/* ============================================================================
   crm.css — notifactor sales platform (CRM) styles.
   Single, organized stylesheet for every CRM surface. Loaded AFTER base.css.
   Sections: 1) tokens  2) primitives  3) topbar/nav  4) page head  5) buttons
   6) lead detail  7) today  8) pipeline  9) forms  10) reminder widget
   11) activity  12) inbox row  13) loud alert  14) responsive
   ============================================================================ */

/* ── 0. font — Inter (self-hosted, latin + cyrillic) ─────────────────────── */
@font-face{
  font-family:'Inter';
  font-style:normal; font-weight:100 900; font-display:swap;
  src:url('/static/fonts/inter-latin-wght-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter';
  font-style:normal; font-weight:100 900; font-display:swap;
  src:url('/static/fonts/inter-cyrillic-wght-normal.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* ── 1. tokens ───────────────────────────────────────────────────────────── */
:root{
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --r-card: 16px;
  --r-btn: 11px;
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.5rem;
  --line: #e9ecf3;
  --ink: #16203a;
  --ink-2: #5b6680;
  --ink-3: #98a0b5;
  --green: #15a34a;
  --green-d:#0f8a3d;
  --card-shadow: 0 1px 2px rgba(20,28,50,.04), 0 6px 18px rgba(20,28,50,.05);
  --pop-shadow: 0 12px 32px rgba(20,28,50,.14);
}
/* Apply Inter everywhere + premium text rendering. */
body, .btn, input, select, textarea, button{ font-family: var(--font); }
body{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; letter-spacing:-0.011em; }

/* ── 2. primitives ───────────────────────────────────────────────────────── */
.crm-sub{ color:var(--ink-2); margin:-.25rem 0 1rem; }
.crm-empty{ color:var(--ink-2); background:#fbfcfe; border:1px dashed #d8deea;
  border-radius:var(--r-card); padding:1.75rem 1.25rem; text-align:center; line-height:1.6; }
.link{ color:var(--accent); font-weight:600; }
.muted{ color:var(--ink-2); }
.lead-updated-flash{ animation: crmFlash 1.6s ease; }
@keyframes crmFlash{ 0%{ background:rgba(245,158,11,.18);} 100%{ background:transparent;} }

/* ── 3. topbar / nav (glassy, refined) ───────────────────────────────────── */
.topbar{ background:rgba(255,255,255,.82); backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid rgba(233,236,243,.9); }
.nav-link{ transition:color .15s, background .15s; }

/* ── 4. page head ────────────────────────────────────────────────────────── */
.crm-head{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4);
  margin-bottom:var(--sp-5); flex-wrap:wrap; }
.crm-head h1{ margin:0; font-size:1.55rem; font-weight:800; letter-spacing:-.02em; }

/* ── 5. buttons (restrained palette) ─────────────────────────────────────── */
.btn{ border-radius:var(--r-btn); font-weight:600; transition:transform .07s, box-shadow .15s, background .15s, filter .15s; }
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:linear-gradient(135deg,#f43f5e,#e11d48); border:none; color:#fff;
  box-shadow:0 2px 8px rgba(225,29,72,.26); }
.btn-primary:hover{ filter:brightness(1.04); }
.btn-ghost{ background:#fff; border:1px solid var(--line); color:var(--ink); }
.btn-ghost:hover{ background:#f6f7fb; }
.btn-call,.btn-ok{ color:#fff; }
.btn-call{ background:var(--green); }
.btn-call:hover{ background:var(--green-d); text-decoration:none; }
.btn-ok{ background:#334155; }            /* "Готово" — calm slate, not loud blue */
.btn-ok:hover{ background:#1e293b; }

/* ── 6. lead detail head + toolbar ───────────────────────────────────────── */
.action-hero{ display:flex; gap:var(--sp-2); align-items:stretch; margin-bottom:var(--sp-4); flex-wrap:wrap; }
.btn-callbig{ flex:1; min-width:170px; display:flex; align-items:center; justify-content:center; gap:.5rem;
  background:linear-gradient(135deg,#22c55e,#16a34a); color:#fff!important; text-decoration:none;
  font-size:1.05rem; font-weight:700; padding:.95rem 1.1rem; border-radius:14px; box-shadow:0 4px 14px rgba(22,163,74,.3); }
.btn-takebig{ flex:1; min-width:150px; background:linear-gradient(135deg,#f43f5e,#e11d48); color:#fff; border:none;
  cursor:pointer; font-size:1.05rem; font-weight:700; padding:.95rem 1.1rem; border-radius:14px; box-shadow:0 4px 14px rgba(225,29,72,.28); }
.btn-callbig:active,.btn-takebig:active{ transform:translateY(1px); }
.handled-badge{ display:inline-flex; align-items:center; padding:.6rem 1rem; border-radius:12px;
  background:rgba(21,163,74,.1); color:#157f3a; font-weight:700; }

.lead-head{ margin-bottom:var(--sp-4); }
.lead-back{ display:inline-block; color:var(--ink-2); font-size:.9rem; margin-bottom:.5rem; }
.lead-back:hover{ color:var(--accent); text-decoration:none; }
.source-chip{ display:inline-flex; align-items:center; gap:.4rem; flex-wrap:wrap; max-width:100%;
  background:#eef2ff; border:1px solid #dde4f6; color:#3a4a6b; border-radius:999px; padding:.32rem .8rem;
  font-size:.82rem; font-weight:600; }
.source-site{ color:var(--ink); }
.source-page{ color:var(--ink-2); font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:240px; }
.lead-title{ font-size:1.5rem; font-weight:800; letter-spacing:-.02em; margin:.5rem 0 .15rem; }
.lead-sub{ color:var(--ink-2); font-size:.85rem; }

.lead-toolbar{ display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; margin-bottom:var(--sp-5);
  padding:.6rem .75rem; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:var(--card-shadow); }
.tb-status{ display:flex; align-items:center; gap:var(--sp-2); }
.tb-label{ color:var(--ink-2); font-size:.8rem; }
.tb-form{ margin:0; }
.lead-toolbar .form-input-sm{ padding:.38rem .6rem; font-size:.85rem; border-radius:9px; }

.more-menu{ position:relative; margin-left:auto; }
.more-menu>summary{ list-style:none; cursor:pointer; }
.more-menu>summary::-webkit-details-marker{ display:none; }
.more-pop{ position:absolute; right:0; top:calc(100% + .35rem); background:#fff; border:1px solid var(--line);
  border-radius:14px; box-shadow:var(--pop-shadow); padding:.4rem; min-width:210px; z-index:60;
  display:flex; flex-direction:column; gap:.1rem; }
.more-pop form{ margin:0; }
.more-item{ width:100%; text-align:left; background:none; border:none; cursor:pointer; font-family:var(--font);
  padding:.6rem .7rem; border-radius:9px; font-size:.9rem; color:var(--ink); }
.more-item:hover{ background:#f5f6fa; }
.more-danger{ color:var(--danger); }
.more-danger:hover{ background:var(--danger-bg); }

/* CRM bar (stage + convert) */
.crm-bar{ display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; background:#fff;
  border:1px solid var(--line); border-radius:14px; padding:.7rem .9rem; margin-bottom:var(--sp-4); box-shadow:var(--card-shadow); }
.crm-bar-label{ color:var(--ink-2); font-size:.85rem; }

/* Contact block */
.contact-block{ line-height:1.8; }
.contact-name{ font-weight:700; font-size:1.05rem; }
.contact-company{ color:var(--ink-2); }
.contact-amount{ margin-top:.25rem; }
.contact-edit{ margin-top:.6rem; }

/* Section cards — refined */
.section-card{ border:1px solid var(--line); border-radius:var(--r-card); box-shadow:var(--card-shadow); }

/* ── 7. today board ──────────────────────────────────────────────────────── */
.crm-section{ margin-bottom:var(--sp-5); }
.crm-section-title{ font-size:1rem; font-weight:700; letter-spacing:-.01em; margin:0 0 .7rem;
  display:flex; align-items:center; gap:.4rem; color:var(--ink); }
.crm-section-title.overdue{ color:var(--danger); }
.rem-card{ display:flex; justify-content:space-between; gap:var(--sp-4); align-items:flex-start;
  background:#fff; border:1px solid var(--line); border-radius:14px; padding:.9rem 1rem; margin-bottom:.6rem;
  box-shadow:var(--card-shadow); transition:transform .1s, box-shadow .15s; }
.rem-card:hover{ transform:translateY(-1px); box-shadow:0 8px 20px rgba(20,28,50,.08); }
.rem-card.rem-over{ border-left:4px solid var(--danger); }
.rem-main{ min-width:0; }
.rem-name{ font-weight:700; color:var(--accent); text-decoration:none; font-size:1.02rem; }
.rem-amount{ margin-left:.5rem; color:var(--green); font-weight:700; font-size:.9rem; }
.rem-note{ color:var(--ink); margin-top:.25rem; }
.rem-due{ color:var(--ink-3); font-size:.82rem; margin-top:.15rem; }
.rem-actions{ display:flex; gap:.4rem; align-items:center; flex-wrap:wrap; flex-shrink:0; }
.snooze{ position:relative; }
.snooze>summary{ list-style:none; cursor:pointer; }
.snooze>summary::-webkit-details-marker{ display:none; }
.snooze-opts{ display:flex; gap:.3rem; margin-top:.4rem; flex-wrap:wrap; }

/* ── 8. pipeline (kanban) ────────────────────────────────────────────────── */
.kanban{ display:flex; gap:.8rem; overflow-x:auto; padding-bottom:1rem; }
.kanban-col{ flex:0 0 250px; background:#f6f7fb; border:1px solid var(--line); border-radius:14px; padding:.65rem; }
.kanban-col-head{ display:flex; align-items:center; gap:.4rem; margin-bottom:.6rem; flex-wrap:wrap; }
.kanban-count{ background:#fff; border:1px solid var(--line); border-radius:999px; padding:0 .5rem; font-size:.8rem; color:var(--ink-2); }
.kanban-total{ margin-left:auto; font-size:.78rem; color:var(--green); font-weight:700; }
.kanban-card{ background:#fff; border:1px solid var(--line); border-radius:12px; padding:.7rem; margin-bottom:.5rem;
  box-shadow:var(--card-shadow); transition:transform .1s, box-shadow .15s; }
.kanban-card:hover{ transform:translateY(-1px); box-shadow:0 8px 18px rgba(20,28,50,.09); }
.kanban-card-name{ font-weight:700; color:var(--accent); text-decoration:none; display:block; }
.kanban-card-phone a{ color:var(--ink-2); text-decoration:none; font-size:.85rem; }
.kanban-card-amount{ color:var(--green); font-weight:700; font-size:.85rem; margin-top:.2rem; }
.kanban-stage{ margin-top:.45rem; width:100%; font-size:.82rem; padding:.3rem; border-radius:9px; border:1px solid var(--line); }

/* ── 9. forms ────────────────────────────────────────────────────────────── */
.crm-form{ display:flex; flex-direction:column; gap:var(--sp-3); max-width:480px; }
.crm-form label{ display:flex; flex-direction:column; gap:.25rem; font-size:.88rem; color:var(--ink-2); }
.crm-form input,.crm-form textarea,.crm-form select{ padding:.6rem .7rem; border:1px solid var(--line);
  border-radius:10px; font-size:1rem; background:#fff; color:var(--ink); }
.crm-form input:focus,.crm-form textarea:focus,.crm-form select:focus{ outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(225,29,72,.13); }
.crm-form-actions{ display:flex; gap:.5rem; margin-top:.2rem; }
.crm-fieldset{ border:1px solid var(--line); border-radius:12px; padding:.7rem .8rem; }
.crm-fieldset legend{ padding:0 .4rem; color:var(--ink-2); font-size:.85rem; }
.preset-row{ display:flex; gap:.4rem; flex-wrap:wrap; align-items:center; margin:.2rem 0; }
.pill{ display:inline-flex; align-items:center; gap:.3rem; background:#f3f5f9; border:1px solid var(--line);
  border-radius:999px; padding:.28rem .65rem; font-size:.85rem; cursor:pointer; }
.pill input{ margin:0; }

/* ── 10. reminder widget ─────────────────────────────────────────────────── */
.rw-title{ font-size:1rem; margin:0 0 .55rem; }
.rw-next{ background:#fff8e8; border:1px solid #f5e2b3; border-radius:12px; padding:.55rem .75rem; margin-bottom:.55rem; }
.rw-next .rw-due{ font-weight:700; }
.rw-next .rw-note{ color:var(--ink-2); font-size:.9rem; }
.rw-actions{ display:flex; gap:.4rem; flex-wrap:wrap; margin-bottom:.6rem; }
.rw-empty{ font-size:.9rem; margin:.3rem 0 .6rem; }
.rw-new{ border-top:1px dashed var(--line); padding-top:.65rem; display:flex; flex-direction:column; gap:.4rem; }
.rw-new input[type=text],.rw-new input[type=datetime-local]{ width:100%; padding:.45rem .6rem; border:1px solid var(--line); border-radius:9px; }
.rw-custom{ display:flex; gap:.4rem; align-items:center; }

/* ── 11. activity timeline ───────────────────────────────────────────────── */
.activity-quick{ display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:.85rem; }
.activity-form{ margin-top:.5rem; max-width:100%; }
.note-icon{ margin-right:.3rem; }
.note-kind-call{ border-left:3px solid #2563eb; padding-left:.5rem; }
.note-kind-meeting{ border-left:3px solid #7c3aed; padding-left:.5rem; }
.note-kind-stage_change{ opacity:.85; }

/* ── 12. inbox row source ────────────────────────────────────────────────── */
.inbox-site{ font-weight:700; }
.inbox-page{ color:var(--ink-3); font-size:.76rem; margin:.1rem 0; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; max-width:100%; }

/* ── 13. loud in-page alert ──────────────────────────────────────────────── */
.nf-loud{ position:fixed; top:0; left:0; right:0; z-index:10000; display:flex; align-items:center;
  justify-content:space-between; gap:1rem; padding:.85rem 1.1rem; color:#fff;
  background:linear-gradient(135deg,#f43f5e,#e11d48); box-shadow:0 6px 22px rgba(225,29,72,.4);
  animation: nfDrop .25s ease, nfPulse 1.4s ease-in-out infinite .25s; }
@keyframes nfDrop{ from{ transform:translateY(-100%);} to{ transform:translateY(0);} }
@keyframes nfPulse{ 0%,100%{ box-shadow:0 6px 22px rgba(225,29,72,.4);} 50%{ box-shadow:0 6px 30px rgba(225,29,72,.7);} }
.nf-loud-text{ display:flex; flex-direction:column; line-height:1.3; min-width:0; }
.nf-loud-text strong{ font-size:1rem; }
.nf-loud-text span{ font-size:.86rem; opacity:.92; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nf-loud-actions{ display:flex; gap:.5rem; flex-shrink:0; }
.nf-loud-actions button{ border:none; cursor:pointer; font-weight:700; border-radius:9px; padding:.5rem .9rem; }
.nf-loud-view{ background:#fff; color:#e11d48; }
.nf-loud-ok{ background:rgba(255,255,255,.22); color:#fff; }

/* ── 14. responsive (mobile-first stacking) ──────────────────────────────── */
@media (max-width: 768px){ .kanban{ flex-direction:column; } .kanban-col{ flex:1 1 auto; } }
@media (max-width: 640px){
  .action-hero{ flex-direction:column; }
  .btn-callbig,.btn-takebig{ width:100%; min-width:0; }
  .rem-card{ flex-direction:column; align-items:stretch; gap:.7rem; }
  .rem-actions{ width:100%; }
  .rem-actions > *{ flex:1 1 auto; justify-content:center; }
  .rem-actions .snooze{ flex:1 1 100%; }
  .source-page{ max-width:170px; }
  .lead-toolbar{ gap:.4rem; }
  .more-menu{ margin-left:0; }
  .more-pop{ right:auto; left:0; }
}

/* ── 15. footer, install, motion (buttery) ───────────────────────────────── */
.footer-brand{ color:var(--ink-3); font-size:.82rem; }
.footer-by{ opacity:.7; }
.footer-link{ color:var(--ink-2); font-weight:600; }
.footer-link:hover{ color:var(--accent); }
/* Install prompt: mobile-browser only — never on desktop. */
@media (min-width:641px){ [data-install]{ display:none !important; } }
/* Smooth page entrance + interactions ("мазно"). */
.main-content{ animation: crmIn .34s cubic-bezier(.2,.7,.2,1); }
@keyframes crmIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
a,.btn,.nav-link,.pill,summary,select,.kanban-card,.rem-card,.more-item{
  transition: color .16s, background .16s, border-color .16s, box-shadow .18s, transform .1s, filter .16s; }
.btn:hover,.btn-callbig:hover,.btn-takebig:hover{ transform:translateY(-1px); }
.btn:active{ transform:translateY(1px); }
@media (prefers-reduced-motion: reduce){ .main-content{ animation:none; } * { transition:none !important; } }

/* restore button on deleted inbox rows */
.btn-restore{ background:none; border:none; cursor:pointer; font-size:1.1rem; color:var(--green);
  padding:.3rem .5rem; border-radius:8px; }
.btn-restore:hover{ background:rgba(21,163,74,.1); }

/* ── 16. nav declutter + centered content ────────────────────────────────── */
.main-content{ max-width:1180px; margin-left:auto; margin-right:auto; }
.nav-more{ position:relative; }
.nav-more>summary{ list-style:none; cursor:pointer; }
.nav-more>summary::-webkit-details-marker{ display:none; }
.nav-more-pop{ position:absolute; left:0; top:calc(100% + .45rem); background:#fff; border:1px solid var(--line);
  border-radius:12px; box-shadow:var(--pop-shadow); padding:.4rem; min-width:200px; z-index:80;
  display:flex; flex-direction:column; gap:.1rem; }
.nav-more-item{ padding:.6rem .75rem; border-radius:9px; color:var(--ink); font-size:.9rem; font-weight:500; }
.nav-more-item:hover{ background:#f4f5fa; text-decoration:none; }
.nav-more-item.active{ color:var(--accent); background:rgba(225,29,72,.08); }
.topbar-user .nav-link{ font-weight:500; }