@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600..800&family=Plus+Jakarta+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --ink:#0A1931; --deep:#1A3D63; --signal:#4A7FA7; --pale:#B3CFE5; --frost:#F6FAFD; --void:#12151E;
  --line-dark: rgba(246,250,253,.12);
  --font-display:'Bricolage Grotesque',sans-serif; --font-body:'Plus Jakarta Sans',sans-serif; --font-mono:'IBM Plex Mono',monospace;
}
*,*::before,*::after{ box-sizing:border-box; }
body{
  margin:0; background:var(--void); color:var(--frost);
  font-family:var(--font-body); font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{ font-family:var(--font-display); font-weight:700; margin:0 0 6px; color:#fff; }
h1{ font-size:1.7rem; } h3{ font-size:1.05rem; margin-top:26px; }
a{ color:var(--pale); text-decoration:none; }
.muted{ color:rgba(246,250,253,.55); font-size:.88rem; }
.wrap{ max-width:1180px; margin-inline:auto; padding-inline:24px; }
.wrap-narrow{ max-width:640px; }
.back-link{ display:inline-block; margin:22px 0 4px; color:rgba(246,250,253,.6); font-size:.88rem; }

/* Auth pages */
.auth-page{ display:flex; align-items:center; justify-content:center; min-height:100vh; padding:24px; }
.auth-card{ width:100%; max-width:380px; background:rgba(255,255,255,.03); border:1px solid var(--line-dark); border-radius:16px; padding:34px 30px; }
.auth-card h1{ font-size:1.3rem; margin-bottom:22px; }
.auth-card form{ display:flex; flex-direction:column; gap:16px; margin-top:10px; }
.auth-card form .btn{ width:100%; margin-top:4px; }
.auth-card label{ display:flex; flex-direction:column; gap:7px; font-size:.86rem; font-weight:600; }
.error{ background:rgba(220,80,80,.12); border:1px solid rgba(220,80,80,.3); color:#ff9d9d; padding:10px 14px; border-radius:8px; font-size:.88rem; }
.success{ background:rgba(47,143,107,.12); border:1px solid rgba(47,143,107,.35); color:#7fd9ae; padding:10px 14px; border-radius:8px; font-size:.88rem; }

input, select, textarea{
  font-family:var(--font-body); font-size:.95rem; color:var(--frost);
  background:rgba(255,255,255,.04); border:1.5px solid var(--line-dark); border-radius:8px;
  padding:.75em .9em; width:100%;
}
input:focus, select:focus, textarea:focus{ outline:none; border-color:var(--signal); }
textarea{ resize:vertical; font-family:var(--font-body); }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--signal); color:#fff; font-weight:700; font-size:.92rem;
  border:none; border-radius:999px; padding:.8em 1.5em; cursor:pointer; text-decoration:none;
}
.btn:hover{ background:#5c8fb8; }

/* Top nav */
.crm-nav{ background:rgba(255,255,255,.03); border-bottom:1px solid var(--line-dark); }
.crm-nav-inner{ display:flex; align-items:center; justify-content:space-between; height:64px; gap:20px; flex-wrap:wrap; }
.crm-brand{ font-family:var(--font-display); font-weight:700; color:#fff; font-size:1.05rem; }
.crm-brand span{ color:var(--pale); font-weight:500; }
.crm-nav nav{ display:flex; gap:22px; }
.crm-nav nav a{ color:rgba(246,250,253,.75); font-weight:600; font-size:.9rem; }
.crm-nav-user{ display:flex; align-items:center; gap:16px; font-size:.86rem; color:rgba(246,250,253,.6); }
@media(max-width:640px){
  .crm-nav-inner{ height:auto; padding-block:14px; }
  .crm-nav nav{ gap:16px; order:3; width:100%; overflow-x:auto; }
  .crm-nav-user{ font-size:.8rem; gap:12px; }
}

/* Page top / board */
.page-top{ display:flex; justify-content:space-between; align-items:flex-end; margin:30px 0 24px; flex-wrap:wrap; gap:14px; }
.board-search{
  display:flex; align-items:center; gap:8px; background:rgba(255,255,255,.04); border:1.5px solid var(--line-dark);
  border-radius:999px; padding:.55em 1em; margin-bottom:18px; max-width:340px;
}
.board-search svg{ width:16px; height:16px; color:rgba(246,250,253,.4); flex:none; }
.board-search input{ background:none; border:none; padding:0; font-size:.88rem; }
.board-search input:focus{ outline:none; }

/* Mobile stage tabs — hidden on desktop, shown below 760px in place of scrolling
   through all 7 columns at once (see JS for the show/hide logic). */
.stage-tabs{ display:none; gap:8px; overflow-x:auto; padding-bottom:14px; margin-bottom:4px; }
.stage-tabs button{
  flex:none; font-family:var(--font-mono); font-size:.76rem; letter-spacing:.03em;
  background:rgba(255,255,255,.04); border:1px solid var(--line-dark); color:rgba(246,250,253,.6);
  border-radius:999px; padding:8px 14px; white-space:nowrap; cursor:pointer;
}
.stage-tabs button.is-active{ background:var(--signal); border-color:var(--signal); color:#fff; }

.board{ display:flex; gap:16px; overflow-x:auto; padding-bottom:20px; }
.board-col{ flex:0 0 260px; background:rgba(255,255,255,.02); border:1px solid var(--line-dark); border-radius:12px; }
.board-col-head{ display:flex; justify-content:space-between; padding:14px 16px; font-family:var(--font-mono); font-size:.78rem; letter-spacing:.04em; text-transform:uppercase; color:var(--pale); border-bottom:1px solid var(--line-dark); }
.board-col-head .count{ background:rgba(255,255,255,.08); border-radius:999px; padding:1px 8px; }
.board-col-body{ padding:10px; display:flex; flex-direction:column; gap:8px; min-height:60px; transition:background .15s; }
.board-col-body.is-drag-over{ background:rgba(74,127,167,.12); }

@media(max-width:760px){
  .stage-tabs{ display:flex; }
  .board{ overflow-x:visible; flex-direction:column; }
  .board-col{ flex:none; display:none; }
  .board-col.is-active-mobile{ display:block; }
  .board-col-head{ display:none; } /* stage name is already shown in the tab above */
}
.empty{ color:rgba(246,250,253,.35); font-size:.85rem; padding:8px; }
.lead-card{ display:flex; flex-direction:column; gap:5px; background:rgba(255,255,255,.03); border:1px solid var(--line-dark); border-radius:8px; padding:12px 13px; cursor:grab; }
.lead-card:hover{ border-color:var(--signal); background:rgba(74,127,167,.08); }
.lead-card.is-dragging{ opacity:.4; }
.lead-card strong{ color:#fff; font-size:.92rem; }
.lead-business{ color:rgba(246,250,253,.55); font-size:.8rem; }
.lead-meta{ display:flex; gap:6px; flex-wrap:wrap; margin-top:2px; }
.tag{ font-family:var(--font-mono); font-size:.66rem; background:rgba(179,207,229,.14); color:var(--pale); padding:2px 8px; border-radius:999px; }
.tag-source{ background:rgba(255,255,255,.06); color:rgba(246,250,253,.6); }

/* Contact detail */
.detail-grid{ display:grid; gap:26px; margin-top:14px; grid-template-columns:1fr; }
@media(min-width:860px){ .detail-grid{ grid-template-columns:1fr 260px; } }
.info-rows{ display:flex; flex-direction:column; gap:9px; margin-top:20px; font-size:.9rem; }
.info-rows > div{ display:flex; gap:10px; padding:9px 0; border-bottom:1px solid var(--line-dark); }
.info-rows span:first-child{ color:rgba(246,250,253,.5); width:120px; flex:none; }
@media(max-width:520px){
  .info-rows > div{ flex-direction:column; gap:3px; }
  .info-rows span:first-child{ width:auto; font-size:.78rem; text-transform:uppercase; letter-spacing:.03em; font-family:var(--font-mono); }
}
.message-box{ background:rgba(255,255,255,.03); border:1px solid var(--line-dark); border-radius:8px; padding:14px 16px; white-space:pre-wrap; }
.note-form{ display:flex; gap:10px; margin-top:14px; align-items:flex-start; }
.note-form textarea{ flex:1; }
.activity-list{ margin-top:16px; display:flex; flex-direction:column; gap:10px; }
.activity-item{ background:rgba(255,255,255,.02); border:1px solid var(--line-dark); border-radius:8px; padding:11px 14px; }
.activity-item p{ margin:0 0 6px; }
.detail-side select{ margin-top:10px; }

/* Forms */
.crm-form{ display:flex; flex-direction:column; gap:16px; margin-top:20px; }
.crm-form label{ display:flex; flex-direction:column; gap:7px; font-size:.87rem; font-weight:600; }
.req{ color:var(--signal); }

/* Editable auto-save fields */
.editable-field{
  cursor:text; border-radius:5px; padding:1px 4px; margin:-1px -4px;
  transition: background .15s;
}
.editable-field:hover{ background:rgba(255,255,255,.04); }
.editable-field:focus{ outline:2px solid var(--signal); background:rgba(74,127,167,.1); }
.editable-field:empty::before{ content: attr(data-placeholder); color:rgba(246,250,253,.35); }
.autosave-indicator{
  display:inline-block; font-family:var(--font-mono); font-size:.72rem; color:rgba(246,250,253,.4);
  opacity:0; transition:opacity .25s; margin-left:2px;
}
.autosave-indicator.is-visible{ opacity:1; }
.autosave-indicator.is-error{ color:#ff9d9d; }

/* Reply form */
.reply-form{ display:flex; flex-direction:column; gap:10px; margin-top:14px; }
.reply-form textarea{ min-height:90px; }

/* Reports */
.stat-row{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin:26px 0 36px; }
@media(min-width:700px){ .stat-row{ grid-template-columns:repeat(4,1fr); } }
.stat-card{ background:rgba(255,255,255,.03); border:1px solid var(--line-dark); border-radius:12px; padding:20px; display:flex; flex-direction:column; gap:4px; }
.stat-num{ font-family:var(--font-display); font-size:1.9rem; font-weight:700; color:#fff; }
.stat-label{ font-size:.8rem; color:rgba(246,250,253,.55); }
.bar-list{ display:flex; flex-direction:column; gap:10px; margin-top:16px; margin-bottom:8px; }
.bar-row{ display:grid; grid-template-columns:130px 1fr 34px; align-items:center; gap:12px; font-size:.86rem; }
.bar-label{ color:rgba(246,250,253,.75); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bar-track{ height:10px; background:rgba(255,255,255,.05); border-radius:999px; overflow:hidden; }
.bar-fill{ height:100%; background:var(--signal); border-radius:999px; min-width:3px; }
.bar-fill-alt{ background:var(--pale); }
.bar-count{ text-align:right; color:rgba(246,250,253,.6); font-family:var(--font-mono); font-size:.8rem; }

/* Toast (drag-and-drop failure feedback) */
.board-toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px);
  background:#1c2130; border:1px solid var(--line-dark); color:var(--frost);
  padding:12px 20px; border-radius:10px; font-size:.88rem; box-shadow:0 8px 30px rgba(0,0,0,.4);
  opacity:0; pointer-events:none; transition:opacity .25s, transform .25s; z-index:200; max-width:90vw;
}
.board-toast.is-visible{ opacity:1; transform:translateX(-50%) translateY(0); }