/* ==========================================================================
   HAIRLINE — Team Chung CRM edition
   Adapted from the portable Hairline component system. Accent set to forest
   green; good/warn/bad chosen to complement it (deep teal, warm gold,
   muted terracotta) rather than clash with it. Every existing class name
   in the app is restyled here — no markup changes required.

   THE SIX RULES:
     1. No shadow, ever — depth = 1px border + background tint.
     2. Hairline borders — every panel/card/table/input gets a single 1px edge.
     3. Two typefaces, sharp split — serif for headings/display numbers only,
        sans for everything functional.
     4. Uppercase is a UI signal — small letter-spaced caps mark structural
        chrome only (labels, tabs, buttons, nav, table headers), never prose.
     5. Color is a pointer — neutrals do the work; accent + semantic colors
        used sparingly for active/linked/status, never decoration.
     6. One motion rule — transitions only animate border-color, background
        or color, at 150–180ms. Nothing moves, scales or lifts.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600&family=Public+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --ink:#1b2226; --canvas:#f4f6f7; --surface:#ffffff; --surface-2:#fbfcfc;
  --border:#e1e5e7; --border-2:#cfd5d8; --muted:#78878e; --muted-2:#a4afb4;

  /* Forest green, chosen as the CRM's brand accent */
  --accent:#1f5c3f; --accent-ink:#ffffff; --accent-wash:rgba(31,92,63,0.07); --accent-wash-2:rgba(31,92,63,0.14);

  /* Complementary earthy palette: deep teal / warm gold / muted terracotta —
     chosen so they read clearly against forest green rather than fighting it */
  --good:#1b7a72; --good-wash:rgba(27,122,114,0.10);
  --warn:#b8862f; --warn-wash:rgba(184,134,47,0.12);
  --bad:#a8442e; --bad-wash:rgba(168,68,46,0.09);

  --font-display:'Playfair Display',Georgia,serif;
  --font-body:'Public Sans',-apple-system,'Segoe UI',sans-serif;
  --font-mono:'IBM Plex Mono','SF Mono',Consolas,monospace;

  --sidebar-w:232px;
}

/* ── base ──────────────────────────────────────────────────────────────── */
*{box-sizing:border-box;}
body{ margin:0; background:var(--canvas); color:var(--ink); font-family:var(--font-body); font-size:14px; line-height:1.6; -webkit-font-smoothing:antialiased; }
a{ color:inherit; }
h1,h2,h3,.serif{ font-family:var(--font-display); font-weight:500; letter-spacing:-0.01em; margin:0; }

.shell{ display:flex; min-height:100vh; }

/* ── sidebar (rail) ───────────────────────────────────────────────────── */
.sidebar{ width:var(--sidebar-w); flex-shrink:0; background:var(--ink); color:var(--canvas); display:flex; flex-direction:column; padding:22px 14px; }
.sidebar-brand{ display:flex; align-items:center; gap:10px; padding:0 6px; margin-bottom:22px; }
.brand-mark{ width:32px; height:32px; flex-shrink:0; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:600; font-size:12px; border-radius:6px; }
.brand-name{ font-family:var(--font-display); font-size:17px; line-height:1.2; color:#fff; }
.brand-sub{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:0.3px; color:rgba(255,255,255,0.4); margin-top:3px; }

.side-nav{ display:flex; flex-direction:column; }
.nav-label{ font-family:var(--font-mono); font-size:9px; text-transform:uppercase; letter-spacing:1.4px; color:rgba(255,255,255,0.3); margin:16px 10px 6px; }
.nav-label:first-child{ margin-top:0; }
.nav-item{ padding:9px 10px; font-size:11px; letter-spacing:0.6px; text-transform:uppercase; font-weight:600; border-radius:6px; cursor:pointer; color:rgba(255,255,255,0.6); user-select:none; transition:background .15s, color .15s; }
.nav-item:hover{ background:rgba(255,255,255,0.06); color:#fff; }
.nav-item.active{ background:var(--accent); color:#fff; }

.sidebar-footer{ margin-top:auto; border-top:1px solid rgba(255,255,255,0.12); padding-top:14px; }
.user-chip{ display:flex; align-items:center; gap:9px; padding:0 6px; margin-bottom:10px; }
.user-avatar{ width:28px; height:28px; flex-shrink:0; border-radius:6px; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; }
.user-name{ font-size:12.5px; color:#fff; line-height:1.2; }
.user-role{ font-family:var(--font-mono); font-size:9.5px; color:rgba(255,255,255,0.4); }
.logout-link{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.4px; color:rgba(255,255,255,0.55); text-decoration:none; padding:0 6px; display:inline-block; }
.logout-link:hover{ color:#fff; }

/* ── main content ─────────────────────────────────────────────────────── */
.main{ flex:1; min-width:0; padding:26px 30px 80px; }
.main-header{ display:flex; align-items:center; gap:14px; border-bottom:1px solid var(--border); padding-bottom:16px; margin-bottom:22px; }
.global-search-wrap{ position:relative; width:280px; margin-left:auto; }
.global-search-wrap input{ width:100%; padding:10px 13px; border:1px solid var(--border-2); border-radius:6px; background:var(--surface); font-family:var(--font-body); font-size:13px; color:var(--ink); outline:none; transition:border-color .15s; }
.global-search-wrap input:focus{ border-color:var(--accent); }
.global-search-results{ position:fixed; background:var(--surface); border:1px solid var(--border-2); border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,0.15); max-height:360px; overflow-y:auto; z-index:500; }

.multi-picker{ border:1px solid var(--border-2); border-radius:6px; padding:6px 8px; background:var(--surface); }
.multi-picker-pills{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:4px; }
.multi-picker-pills:empty{ margin-bottom:0; }
.mp-pill{ display:inline-flex; align-items:center; gap:5px; background:var(--accent-wash-2); color:var(--accent); font-size:12px; font-weight:600; padding:4px 6px 4px 10px; border-radius:20px; }
.mp-pill button{ background:none; border:none; color:var(--accent); font-size:14px; line-height:1; cursor:pointer; padding:0 2px; }
.multi-picker input[type=text]{ width:100%; border:none; outline:none; font-family:var(--font-body); font-size:13px; padding:4px 2px; background:transparent; }
.multi-picker-results{ position:fixed; background:var(--surface); border:1px solid var(--border-2); border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,0.15); max-height:220px; overflow-y:auto; z-index:600; }

.filter-section{ border:1px solid var(--border); border-radius:8px; padding:2px 14px; margin-bottom:14px; }
.filter-section summary{ padding:10px 0; font-size:12.5px; font-weight:700; letter-spacing:0.6px; text-transform:uppercase; color:var(--ink-soft); cursor:pointer; list-style:none; }
.filter-section summary::-webkit-details-marker{ display:none; }
.filter-section summary::before{ content:'▸'; display:inline-block; width:14px; color:var(--muted); }
.filter-section[open] summary::before{ content:'▾'; }
.filter-section[open] summary{ border-bottom:1px solid var(--border); margin-bottom:12px; }
.filter-section .field:last-child{ margin-bottom:12px; }
.mp-item{ padding:8px 12px; font-size:13px; cursor:pointer; }
.mp-item:hover{ background:var(--accent-wash); }
.mp-item.mp-add-new{ color:var(--accent); font-weight:600; border-top:1px solid var(--border); }
.gsr-group-label{ font-size:9px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--muted); padding:8px 12px 4px; }
.gsr-item{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:8px 12px; cursor:pointer; font-size:13px; }
.gsr-item:hover{ background:var(--accent-wash); }
.gsr-title{ font-weight:600; }
.gsr-sub{ font-size:11.5px; color:var(--muted); white-space:nowrap; }
.gsr-empty{ padding:12px; font-size:12.5px; color:var(--ink-soft); }
.main-header h1{ font-size:23px; }

/* ── buttons ──────────────────────────────────────────────────────────── */
.add-btn{ background:var(--accent); color:#fff; border:none; padding:11px 20px; border-radius:6px; font-family:var(--font-body); font-size:10.5px; font-weight:600; letter-spacing:1.2px; text-transform:uppercase; cursor:pointer; transition:background .15s; }
.add-btn:hover{ background:color-mix(in srgb, var(--accent) 85%, black); }

.btn{ padding:10px 18px; font-size:10.5px; font-weight:600; letter-spacing:1px; text-transform:uppercase; cursor:pointer; border:1px solid var(--border-2); background:var(--surface); color:var(--ink); border-radius:6px; font-family:var(--font-body); transition:border-color .15s, background .15s, color .15s; }
.btn:hover{ border-color:var(--accent); color:var(--accent); }
.btn.primary{ background:var(--accent); border-color:var(--accent); color:#fff; }
.btn.primary:hover{ background:color-mix(in srgb, var(--accent) 85%, black); color:#fff; }
.btn.danger{ color:var(--bad); border-color:var(--bad); background:transparent; }
.btn.danger:hover{ background:var(--bad); color:#fff; }
.btn-sm{ padding:7px 13px; font-size:9.5px; }

/* ── search / filter controls ─────────────────────────────────────────── */
.controls input[type=text]{ flex:1; min-width:180px; padding:10px 13px; border:1px solid var(--border-2); border-radius:6px; background:var(--surface); font-family:var(--font-body); font-size:13px; color:var(--ink); outline:none; transition:border-color .15s; }
.controls input[type=text]:focus{ border-color:var(--accent); }
.controls select{ padding:10px 13px; border:1px solid var(--border-2); border-radius:6px; background:var(--surface); font-family:var(--font-body); font-size:12.5px; color:var(--ink); outline:none; cursor:pointer; transition:border-color .15s; }
.bulk-bar{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; background:var(--accent-wash); border:1px solid var(--accent); border-radius:8px; padding:10px 14px; margin-bottom:14px; }
.bulk-selectall-prompt{ background:var(--surface-2); border:1px solid var(--border); border-radius:8px; padding:8px 14px; margin:-8px 0 14px; font-size:12.5px; color:var(--ink-soft); }
.bulk-selectall-prompt a{ color:var(--accent); font-weight:600; text-decoration:none; }
.bulk-selectall-prompt a:hover{ text-decoration:underline; }
.bulk-count{ font-size:12.5px; font-weight:700; color:var(--accent); margin-right:6px; }
.controls select:focus{ border-color:var(--accent); }
.chip-row{ display:flex; gap:8px; flex-wrap:wrap; }
.chip{ padding:6px 13px; border:1px solid var(--border-2); background:var(--surface); border-radius:20px; font-size:10px; font-weight:600; letter-spacing:0.8px; text-transform:uppercase; cursor:pointer; color:var(--muted); white-space:nowrap; transition:background .15s, border-color .15s, color .15s; }
.chip.active{ background:var(--accent-wash-2); border-color:var(--accent); color:var(--accent); }

.filter-row{ display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:14px; margin-bottom:12px; }
.filter-field label{ display:block; font-size:9px; font-weight:600; letter-spacing:1.2px; text-transform:uppercase; color:var(--muted); margin-bottom:5px; }
.filter-field input, .filter-field select{ width:100%; padding:9px 10px; border:1px solid var(--border-2); border-radius:6px; background:var(--surface); font-size:13px; font-family:var(--font-body); outline:none; }
.filter-field input:focus, .filter-field select:focus{ border-color:var(--accent); }

/* ── sortable data table ──────────────────────────────────────────────── */
.dtable-wrap{ overflow-x:auto; border:1px solid var(--border); border-radius:10px; }
.pagination-row{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-top:12px; font-size:12.5px; color:var(--ink-soft); }
.pagination-controls{ display:flex; align-items:center; gap:4px; }
.page-btn{ min-width:30px; height:30px; padding:0 8px; border:1px solid var(--border-2); border-radius:6px; background:var(--surface); font-size:12.5px; font-weight:600; color:var(--ink-soft); cursor:pointer; transition:background .15s, border-color .15s, color .15s; }
.page-btn:hover:not(:disabled):not(.active){ background:var(--accent-wash); border-color:var(--accent); }
.page-btn.active{ background:var(--accent); color:#fff; border-color:var(--accent); }
.page-btn:disabled{ opacity:0.35; cursor:default; }
.page-ellipsis{ padding:0 4px; color:var(--muted); }
.pagination-page{ font-weight:600; color:var(--ink); }
.pagination-size{ display:flex; align-items:center; gap:8px; }
.pagination-size label{ font-size:11px; font-weight:600; letter-spacing:0.8px; text-transform:uppercase; color:var(--muted); }
.pagination-size select{ padding:6px 10px; border:1px solid var(--border-2); border-radius:6px; background:var(--surface); font-size:13px; }
.dtable{ width:100%; border-collapse:collapse; font-size:13px; background:var(--surface); }
.dtable thead th{ background:var(--ink); color:var(--canvas); padding:11px 16px; text-align:left; font-size:9px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; white-space:nowrap; }
.dtable th.sortable{ cursor:pointer; user-select:none; transition:background .15s; }
.dtable th.sortable:hover{ background:#242b30; }
.sort-arrow{ font-size:8px; margin-left:5px; color:rgba(244,246,247,0.35); }
.sort-arrow.active{ color:var(--warn); }
.dtable td{ padding:12px 16px; border-bottom:1px solid var(--border); vertical-align:middle; }
.dtable tr:last-child td{ border-bottom:none; }
.dtable tbody tr{ cursor:pointer; transition:background .15s; }
.dtable tbody tr:hover td{ background:var(--accent-wash); }
.dtable td.actions-cell{ text-align:right; white-space:nowrap; }

/* ── dashboard ────────────────────────────────────────────────────────── */
.stat-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(190px,1fr)); gap:14px; margin-bottom:26px; }
.stat-card{ background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:20px; transition:border-color .15s; }
.stat-card:hover{ border-color:var(--accent); }
.stat-card .num{ font-family:var(--font-display); font-size:32px; color:var(--ink); line-height:1; }
.stat-card .num.alert{ color:var(--bad); }
.stat-card .lbl{ font-size:9px; font-weight:600; letter-spacing:1.2px; text-transform:uppercase; color:var(--muted); margin-top:8px; }

.dash-cols{ display:grid; grid-template-columns:1.1fr 1fr; gap:16px; }
.panel{ background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:20px; }
.panel h3{ font-family:var(--font-body); font-size:9.5px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; margin:0 0 14px; color:var(--muted); }

.stage-bar-row{ display:flex; align-items:center; gap:10px; margin-bottom:10px; font-size:12.5px; }
.stage-bar-row .lbl{ width:120px; flex-shrink:0; color:var(--muted); font-size:11.5px; }
.stage-bar-track{ flex:1; height:6px; background:var(--border); border-radius:3px; }
.stage-bar-fill{ height:100%; border-radius:3px; }
.stage-bar-count{ width:22px; text-align:right; font-family:var(--font-mono); font-weight:500; }

.mini-list-item{ display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--border); font-size:13px; cursor:pointer; }
.mini-list-item:last-child{ border-bottom:none; }
.mini-list-item:hover{ color:var(--accent); }
.mini-list-item .when{ font-family:var(--font-mono); font-size:11px; }
.followup.overdue{ color:var(--bad); font-weight:600; }
.followup.today{ color:var(--warn); font-weight:600; }
.followup.upcoming{ color:var(--muted); }

/* ── pipeline board ───────────────────────────────────────────────────── */
.board{ display:flex; gap:14px; overflow-x:auto; padding-bottom:10px; }
.column{ background:var(--surface-2); border:1px solid var(--border); border-radius:10px; min-width:230px; flex:1; padding:12px; min-height:200px; }
.column.dragover{ background:var(--accent-wash); border-color:var(--accent); }
.column.column-dashed{ border-style:dashed; }
.column-head{ display:flex; align-items:center; gap:8px; font-size:9.5px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:var(--muted); margin-bottom:10px; padding-bottom:9px; border-bottom:1px solid var(--border); }
.column-count{ margin-left:auto; font-family:var(--font-mono); color:var(--muted-2); font-weight:400; }
.kcard{ background:var(--surface); border:1px solid var(--border); border-radius:6px; padding:11px 12px; margin-bottom:8px; cursor:grab; font-size:13px; transition:border-color .15s; }
.kcard:hover{ border-color:var(--accent); }
.kcard:active{ cursor:grabbing; }
.kcard .kname{ font-weight:600; margin-bottom:3px; }
.kcard .kmeta{ font-size:11px; color:var(--muted); }
.kcard .kactions{ display:flex; gap:6px; margin-top:8px; }

/* ── register (contacts list) ─────────────────────────────────────────── */
.name{ font-weight:600; font-size:13.5px; }
.meta{ font-size:11.5px; color:var(--muted); margin-top:2px; }
.tag{ display:inline-block; font-size:9px; font-weight:600; letter-spacing:0.8px; text-transform:uppercase; padding:3px 8px; border:1px solid var(--border-2); border-radius:4px; color:var(--muted); }
.stage-label{ font-size:12.5px; }
.stage-dot{ display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:6px; position:relative; top:-1px; }
.owner-badge{ font-family:var(--font-mono); font-size:10.5px; color:var(--muted); }
.mini-tag{ display:inline-block; font-size:9.5px; padding:2px 8px; background:var(--warn-wash); color:var(--warn); border-radius:20px; margin-right:4px; font-weight:600; }
.dnd-badge{ display:inline-block; font-size:9px; font-weight:700; letter-spacing:0.6px; padding:2px 7px; background:var(--bad-wash); color:var(--bad); border-radius:4px; vertical-align:middle; }
.row-actions{ display:inline-flex; gap:8px; }
.icon-btn{ border:1px solid var(--border-2); background:var(--surface); width:32px; height:32px; border-radius:6px; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--ink); font-size:14px; transition:border-color .15s, background .15s, color .15s; }
.icon-btn:hover{ border-color:var(--accent); color:var(--accent); }
.icon-btn.whatsapp{ border-color:var(--good); color:var(--good); }
.icon-btn.whatsapp:hover{ background:var(--good); color:#fff; }
.icon-btn.outlook{ border-color:var(--warn); color:var(--warn); }
.icon-btn.outlook:hover{ background:var(--warn); color:#fff; }

.empty{ padding:60px 20px; text-align:center; color:var(--muted); }
.empty .serif{ font-size:19px; color:var(--ink); display:block; margin-bottom:6px; }

/* ── modals ───────────────────────────────────────────────────────────── */
.overlay{ position:fixed; inset:0; background:rgba(27,34,38,0.4); display:none; align-items:flex-start; justify-content:center; padding:44px 16px; overflow-y:auto; z-index:50; }
.overlay.open{ display:flex; }
.modal{ background:var(--surface); border:1px solid var(--border); border-radius:10px; width:100%; max-width:620px; padding:28px; }
.modal h2{ font-size:20px; margin:0 0 4px; }
.modal-sub{ font-size:12px; color:var(--muted); margin-bottom:18px; line-height:1.6; }
.field{ margin-bottom:14px; }
.field label{ display:block; font-size:9px; font-weight:600; letter-spacing:1.2px; text-transform:uppercase; color:var(--muted); margin-bottom:6px; }
.field input, .field select, .field textarea{ width:100%; padding:10px 12px; border:1px solid var(--border-2); border-radius:6px; background:var(--surface); font-family:var(--font-body); font-size:13.5px; color:var(--ink); outline:none; transition:border-color .15s; }
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--accent); }
.field textarea{ resize:vertical; min-height:60px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.modal-actions{ display:flex; justify-content:space-between; align-items:center; margin-top:18px; padding-top:16px; border-top:1px solid var(--border); }

.subtab-row{ display:flex; gap:20px; border-bottom:1px solid var(--border); margin-bottom:14px; }
.subtab{ font-size:10px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:var(--muted); padding-bottom:9px; cursor:pointer; border-bottom:2px solid transparent; transition:color .15s, border-color .15s; }
.subtab.active{ color:var(--accent); border-bottom-color:var(--accent); }

.seq-step{ display:flex; align-items:flex-start; gap:9px; padding:8px 0; border-bottom:1px solid var(--border); font-size:13px; }
.seq-step:last-child{ border-bottom:none; }
.seq-step input[type=checkbox]{ margin-top:3px; accent-color:var(--accent); }
.seq-step .stitle.done{ text-decoration:line-through; color:var(--muted); }
.seq-step .sdue{ font-family:var(--font-mono); font-size:10.5px; color:var(--muted); display:block; }

.timeline-item{ border-left:2px solid var(--border); padding:6px 0 6px 12px; margin-bottom:8px; font-size:13px; }
.timeline-item .date{ font-family:var(--font-mono); font-size:10.5px; color:var(--muted); display:block; margin-bottom:2px; }
.timeline-item .kind{ font-size:9px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--warn); margin-right:6px; }
.add-note-row{ display:flex; gap:8px; margin-top:8px; }
.add-note-row input{ flex:1; padding:9px 11px; border:1px solid var(--border-2); border-radius:6px; font-family:var(--font-body); font-size:13px; outline:none; }
.add-note-row input:focus{ border-color:var(--accent); }
.add-note-row button{ background:var(--accent); color:#fff; border:none; border-radius:6px; padding:0 16px; font-size:10.5px; font-weight:600; letter-spacing:0.8px; text-transform:uppercase; cursor:pointer; }

.comm-add{ background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:14px; margin-bottom:16px; }
.comm-add-row{ display:flex; gap:8px; margin-bottom:8px; }
.comm-add select{ padding:8px 10px; border:1px solid var(--border-2); border-radius:6px; font-size:12.5px; font-family:var(--font-body); }
.comm-add textarea{ width:100%; padding:9px 11px; border:1px solid var(--border-2); border-radius:6px; font-size:12.5px; font-family:var(--font-body); min-height:54px; resize:vertical; margin-bottom:8px; outline:none; }
.comm-add textarea:focus{ border-color:var(--accent); }
.comm-add button{ background:var(--accent); color:#fff; border:none; border-radius:6px; padding:9px 16px; font-size:10.5px; font-weight:600; letter-spacing:0.8px; text-transform:uppercase; cursor:pointer; }
.comm-item{ border-left:2px solid var(--border); padding:8px 0 8px 12px; margin-bottom:10px; }
.comm-item .chead{ font-family:var(--font-mono); font-size:10.5px; color:var(--muted); margin-bottom:4px; }
.comm-item .ctype{ font-size:9px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:var(--accent); margin-right:8px; }
.comm-item .ccontent{ font-size:12.5px; background:var(--surface-2); padding:9px 11px; border-left:3px solid var(--warn); border-radius:0 6px 6px 0; white-space:pre-wrap; }
.comm-item .cplain{ font-size:12.5px; color:var(--muted); font-style:italic; }

/* ── quick-log popup ──────────────────────────────────────────────────── */
.quick-modal{ background:var(--surface); border:1px solid var(--border); border-radius:10px; width:100%; max-width:420px; padding:24px; }
.quick-modal h2{ font-size:17px; margin:0 0 4px; }
.quick-modal textarea{ width:100%; padding:11px 12px; border:1px solid var(--border-2); border-radius:6px; font-family:var(--font-body); font-size:13.5px; min-height:90px; resize:vertical; outline:none; }
.quick-modal textarea:focus{ border-color:var(--accent); }
.quick-actions{ display:flex; justify-content:space-between; align-items:center; margin-top:14px; }
.dnd-warning{ background:var(--bad-wash); color:var(--bad); padding:9px 12px; border-radius:6px; font-size:12.5px; font-weight:600; margin-bottom:12px; }

/* ── custom fields / pipeline stages managers ─────────────────────────── */
.cf-row{ display:grid; grid-template-columns:1.3fr 1fr 1.4fr auto; gap:8px; align-items:center; margin-bottom:10px; }
.cf-row input, .cf-row select{ padding:9px 10px; border:1px solid var(--border-2); border-radius:6px; font-size:13px; font-family:var(--font-body); width:100%; outline:none; }
.cf-row input:focus, .cf-row select:focus{ border-color:var(--accent); }
.cf-remove{ background:transparent; border:1px solid var(--border-2); border-radius:6px; color:var(--bad); width:32px; height:32px; cursor:pointer; transition:background .15s, color .15s; }
.cf-remove:hover{ background:var(--bad); color:#fff; }
.cf-add-row{ background:var(--accent); color:#fff; border:none; border-radius:6px; padding:9px 16px; font-size:10.5px; font-weight:600; letter-spacing:0.8px; text-transform:uppercase; cursor:pointer; margin-top:4px; }
.cf-hint{ font-size:12px; color:var(--muted); margin-bottom:14px; line-height:1.6; }

/* ── automation rules ─────────────────────────────────────────────────── */
.rule-card{ background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:14px 16px; margin-bottom:10px; }
.rule-line{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:13px; margin-bottom:8px; }
.rule-line:last-child{ margin-bottom:0; }
.rule-line select, .rule-line input[type=text]{ padding:7px 9px; border:1px solid var(--border-2); border-radius:6px; font-size:13px; font-family:var(--font-body); outline:none; }
.rule-line select:focus, .rule-line input:focus{ border-color:var(--accent); }
.rule-remove{ margin-left:auto; background:transparent; border:1px solid var(--border-2); border-radius:6px; color:var(--bad); width:28px; height:28px; cursor:pointer; flex-shrink:0; transition:background .15s, color .15s; }
.rule-remove:hover{ background:var(--bad); color:#fff; }
.rule-add-btn{ background:var(--accent); color:#fff; border:none; border-radius:6px; padding:9px 16px; font-size:10.5px; font-weight:600; letter-spacing:0.8px; text-transform:uppercase; cursor:pointer; margin-top:4px; }

.status-line{ font-family:var(--font-mono); font-size:10.5px; color:var(--muted); margin-top:10px; min-height:16px; }

/* ── mobile nav drawer ────────────────────────────────────────────────── */
.nav-toggle-checkbox{ display:none; }
.hamburger{ display:none; font-size:20px; cursor:pointer; color:var(--ink); line-height:1; }
.nav-backdrop{ display:none; }
@media (max-width:880px){
  .sidebar{ position:fixed; top:0; left:0; height:100vh; z-index:60; transform:translateX(-100%); transition:transform .2s ease; }
  .nav-toggle-checkbox:checked ~ .sidebar{ transform:translateX(0); }
  .nav-backdrop{ display:none; position:fixed; inset:0; background:rgba(0,0,0,0.35); z-index:55; }
  .nav-toggle-checkbox:checked ~ .nav-backdrop{ display:block; }
  .hamburger{ display:block; }
  .main{ padding:18px 16px 80px; }
  .stat-grid{ grid-template-columns:repeat(2,1fr); }
  .dash-cols{ grid-template-columns:1fr; }
  .field-row{ grid-template-columns:1fr; }
}