/* =====================================================================
   CRM BMFI – wygląd jak Agent Ads (w duchu Revoluta): jasne tło, białe karty bez ramek,
   duże zaokrąglenia, wiersze jak transakcje, przyciski-pigułki, zieleń BMFI jako akcent.
   ===================================================================== */
:root {
  --bg:#f3f3f6; --card:#ffffff; --ink:#0e0f13; --muted:#85858f; --line:#ececf1; --soft:#f3f3f6;
  --accent:#1d5c40; --accent-hover:#164a33; --accent-soft:#e6f1eb;
  --good:#127a3d; --goodbg:#e8f6ee; --bad:#b42318; --badbg:#fdecea; --warn:#8a5a00; --warnbg:#fff6e0;
  --radius:24px; --shadow:0 1px 2px rgba(14,15,19,.04), 0 2px 12px rgba(14,15,19,.03);
}
* { box-sizing:border-box; }
html, body { margin:0; }
body { font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; background:var(--bg);
       color:var(--ink); line-height:1.55; font-size:15px; letter-spacing:-.006em; -webkit-font-smoothing:antialiased; }
a { color:var(--accent); }
h1 { font-size:2.1em; font-weight:700; letter-spacing:-.04em; margin:0 0 2px; line-height:1.15; }
h2 { font-size:1.15em; font-weight:700; letter-spacing:-.02em; margin:0 0 10px; }
h3 { font-size:1em; font-weight:600; margin:16px 0 6px; }
code { background:var(--soft); padding:1px 5px; border-radius:5px; font-size:.9em; }
.muted { color:var(--muted); }
.small { font-size:.85em; }
.hidden { display:none !important; }

/* ---- Układ: menu boczne + treść ---- */
.app { display:flex; min-height:100vh; }
.sidebar { width:250px; flex:none; position:sticky; top:0; height:100vh; display:flex; flex-direction:column;
           padding:28px 18px 18px; overflow-y:auto; }
.logo { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); padding:0 10px 22px; }
.logo-img { height:24px; width:auto; }
.logo-sub { background:#fff; box-shadow:var(--shadow); border-radius:999px; padding:3px 10px; font-size:.78em;
            font-weight:600; color:var(--muted); white-space:nowrap; }
.modules { display:flex; gap:4px; background:#e8e8ee; border-radius:999px; padding:4px; margin:0 4px 18px; }
.modules a { flex:1; text-align:center; text-decoration:none; color:#4a4b55; font-weight:600; font-size:.84em;
             padding:7px 6px; border-radius:999px; white-space:nowrap; }
.modules a.active { background:#fff; color:var(--ink); box-shadow:var(--shadow); }
.modules a:hover:not(.active) { color:var(--ink); }
nav { display:flex; flex-direction:column; gap:2px; }
.nav-section { font-size:.78em; font-weight:600; color:var(--muted); padding:20px 12px 6px; }
.nav-item { display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:14px; color:#4a4b55;
            text-decoration:none; font-weight:500; }
.nav-item:hover { background:rgba(255,255,255,.6); }
.nav-item.active { background:#fff; color:var(--ink); box-shadow:var(--shadow); font-weight:600; }
.nav-icon { width:22px; height:22px; color:#6b6c76; display:inline-flex; align-items:center; justify-content:center; flex:none; }
.nav-item.active .nav-icon { color:var(--accent); }
.nav-soon { margin-left:auto; font-size:.7em; color:var(--muted); background:#e8e8ee; border-radius:999px; padding:1px 7px; font-weight:600; }
.account { display:flex; align-items:center; gap:12px; margin-top:auto; padding:18px 10px 6px; }
.avatar { width:38px; height:38px; border-radius:50%; background:#fff; box-shadow:var(--shadow); color:var(--accent);
          display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:.85em; flex:none; }
.account-name { font-weight:600; line-height:1.2; }
.account-role { color:var(--muted); font-size:.8em; }
.account, .account a { color:inherit; text-decoration:none; }
.logout { padding:6px 10px 0; }
.logout button { width:100%; justify-content:center; }
.env { margin:10px 10px 0; background:var(--warnbg); color:var(--warn); border-radius:12px; padding:6px 10px;
       font-size:.78em; font-weight:600; text-align:center; }
.content { flex:1; min-width:0; }
main { max-width:1080px; padding:44px 52px 80px; }
.page-head { margin-bottom:26px; }
.page-head p { color:var(--muted); margin:2px 0 0; }

/* ---- Karty ---- */
.card { background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:26px 28px; }
.card + .card, .card + .rlist-label, .grid-2 + .card { margin-top:18px; }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.note { border-radius:16px; padding:14px 18px; margin:0 0 18px; }
.note.good { background:var(--goodbg); color:var(--good); }
.note.bad { background:var(--badbg); color:var(--bad); }
.note.warn { background:var(--warnbg); color:var(--warn); }
.note.info { background:var(--card); box-shadow:var(--shadow); color:var(--ink); }
.note ul { margin:4px 0 0; padding-left:18px; }

/* ---- Przyciski i pola ---- */
button, .btn { background:var(--accent); color:#fff; border:0; border-radius:999px; padding:11px 20px; font:inherit;
               font-weight:600; letter-spacing:-.01em; cursor:pointer; text-decoration:none; display:inline-flex;
               align-items:center; gap:8px; }
button:hover, .btn:hover { background:var(--accent-hover); }
button.secondary, .btn.secondary { background:#ececf1; color:var(--ink); }
button.secondary:hover, .btn.secondary:hover { background:#e2e2e8; }
button.danger { background:var(--badbg); color:var(--bad); }
button.danger:hover { background:#f9d7d3; }
button.small, .btn.small { padding:7px 14px; font-size:.88em; }
button:focus-visible, .btn:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
  outline:2px solid var(--accent); outline-offset:2px; }
label { display:flex; flex-direction:column; gap:6px; font-weight:600; font-size:.9em; }
input, select, textarea { font:inherit; color:inherit; border:0; background:var(--bg); border-radius:14px;
                          padding:12px 14px; width:100%; }
.form { display:flex; flex-direction:column; gap:14px; }
.form-row { display:grid; grid-template-columns:1fr 1fr 180px auto; gap:10px; align-items:end; }
.pill { display:inline-block; font-size:.75em; padding:3px 10px; border-radius:999px; background:var(--soft);
        color:#55565f; font-weight:600; white-space:nowrap; }
.pill.good { background:var(--goodbg); color:var(--good); }
.pill.bad { background:var(--badbg); color:var(--bad); }
.pill.warn { background:var(--warnbg); color:var(--warn); }
.pill.accent { background:var(--accent-soft); color:var(--accent); }

/* ---- Pulpit: duży nagłówek jak saldo ---- */
.hero { background:var(--card); border-radius:28px; box-shadow:var(--shadow); padding:28px 30px; margin-bottom:22px;
        display:flex; align-items:flex-end; gap:30px; flex-wrap:wrap; }
.hero-label { color:var(--muted); font-size:.9em; font-weight:500; }
.hero-value { font-size:3em; font-weight:700; letter-spacing:-.05em; line-height:1.05; margin-top:4px; }
.hero-stats { display:flex; gap:12px; margin-left:auto; flex-wrap:wrap; }
.hero-stat { background:var(--bg); border-radius:18px; padding:12px 18px; min-width:130px; }
.hero-stat b { display:block; font-size:1.35em; letter-spacing:-.03em; }
.hero-stat span { color:var(--muted); font-size:.82em; }
.hero-note { width:100%; color:var(--muted); font-size:.8em; margin:-8px 0 0; }
.today-empty { background:var(--bg); border-radius:18px; padding:18px 20px; color:#4a4b55; }

/* ---- Listy jak w Revolut (wiersze) ---- */
.rlist-label { color:var(--muted); font-size:.85em; font-weight:600; margin:26px 4px 8px; display:flex; gap:8px; align-items:center; }
.rlist-label .right { margin-left:auto; }
.rlist { background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
.rlist-empty { padding:20px 22px; color:var(--muted); }
.ritem { display:flex; align-items:center; gap:14px; padding:15px 20px; border-top:1px solid var(--line); }
.ritem:first-child { border-top:0; }
.ricon { width:42px; height:42px; border-radius:50%; background:var(--bg); display:inline-flex; align-items:center;
         justify-content:center; flex:none; font-weight:700; color:var(--accent); font-size:.9em; }
.ricon.bad { background:var(--badbg); color:var(--bad); }
.ricon.good { background:var(--goodbg); color:var(--good); }
.ricon.off { color:var(--muted); }
.rmain { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.rtitle { font-weight:600; letter-spacing:-.01em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rsub { color:var(--muted); font-size:.84em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rright { display:flex; gap:8px; align-items:center; flex:none; flex-wrap:wrap; justify-content:flex-end; }
.rright form { margin:0; }
.ritem.closed .rtitle { color:var(--muted); font-weight:500; }

/* ---- Link-zaproszenie ---- */
.copybox { display:flex; gap:8px; align-items:center; margin-top:10px; }
.copybox input { font-family:ui-monospace,Menlo,monospace; font-size:.85em; background:#fff; }

/* ---- Strony logowania ---- */
.auth { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px 16px; }
.auth-box { width:100%; max-width:420px; display:flex; flex-direction:column; gap:18px; }
.auth-box.wide { max-width:560px; }
.auth-logo { display:flex; align-items:center; gap:10px; justify-content:center; }
.auth-logo img { height:30px; }
.auth h1 { font-size:1.6em; text-align:center; }
.auth .lead { text-align:center; color:var(--muted); margin:0; }
.auth button { justify-content:center; width:100%; }
.code-input { font-size:1.6em; letter-spacing:.4em; text-align:center; font-variant-numeric:tabular-nums; }
.qr { display:flex; justify-content:center; background:#fff; border-radius:18px; padding:8px; }
.qr svg { max-width:220px; height:auto; }
.steps { margin:0; padding-left:20px; } .steps li { margin:6px 0; }
.secret { font-family:ui-monospace,Menlo,monospace; word-break:break-all; background:var(--bg); border-radius:12px; padding:8px 12px; }
details.more summary { cursor:pointer; color:var(--accent); font-weight:600; font-size:.9em; }

/* ---- Dziennik ---- */
.filters { display:flex; gap:10px; flex-wrap:wrap; align-items:end; margin-bottom:6px; }
.filters label { min-width:220px; }
.table-wrap { overflow-x:auto; }
table { border-collapse:collapse; width:100%; font-size:.9em; font-variant-numeric:tabular-nums; }
th, td { padding:10px 10px 10px 0; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
th { color:var(--muted); font-weight:600; font-size:.85em; }
td.when { white-space:nowrap; color:var(--muted); }
.pager { display:flex; gap:8px; justify-content:flex-end; margin-top:14px; align-items:center; }

/* ---- Pamięć firmy ---- */
.md h1 { font-size:1.5em; } .md h2 { margin-top:24px; } .md ul { padding-left:20px; } .md li { margin:3px 0; }
.md blockquote { margin:0; padding:10px 16px; background:var(--bg); border-radius:14px; color:#4a4b55; }

/* ---- Telefon ---- */
@media (max-width:900px) {
  .app { flex-direction:column; }
  .sidebar { position:static; width:auto; height:auto; padding:16px 16px 4px; }
  .logo { padding-bottom:12px; }
  nav { flex-direction:row; overflow-x:auto; gap:4px; padding-bottom:6px; }
  .nav-section { display:none; }
  .nav-item { flex:none; padding:8px 12px; }
  .nav-soon { display:none; }
  .account, .logout { display:none; }
  .mobile-account { display:flex !important; }
  main { padding:20px 16px 60px; }
  h1 { font-size:1.7em; }
  .grid-2, .form-row { grid-template-columns:1fr; }
  .hero-value { font-size:2.3em; }
  .hero { padding:22px 20px; gap:18px; }
  .hero-stats { margin-left:0; width:100%; display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
  .hero-stat { min-width:0; padding:10px 12px; }
  .hero-stat b { font-size:1.1em; }
  .ritem { flex-wrap:wrap; }
  .rright { width:100%; justify-content:flex-start; padding-left:56px; }
}
.mobile-account { display:none; align-items:center; gap:10px; justify-content:space-between; margin:10px 4px 0; }
.center { text-align:center; }

/* ===================== Etap 2: klienci ===================== */
.page-actions { display:flex; align-items:flex-start; gap:16px; justify-content:space-between; flex-wrap:wrap; }
.filters.card { padding:18px 20px; }
.filters .grow { flex:1; min-width:240px; }
.filters label { min-width:160px; }
a.ritem.link { color:inherit; text-decoration:none; }
a.ritem.link:hover { background:#fafafc; }
.rright.col { flex-direction:column; align-items:flex-end; gap:4px; }
.rstate { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.ramount { font-weight:700; letter-spacing:-.02em; }
.pill.stage-lead { background:#eef2ff; color:#3949ab; }
.pill.stage-kontakt, .pill.stage-mail { background:#e6f1fb; color:#1f5f99; }
.pill.stage-dokumenty, .pill.stage-oferty { background:var(--warnbg); color:var(--warn); }
.pill.stage-domkniecie { background:var(--accent-soft); color:var(--accent); }
.pill.stage-sfinalizowany { background:var(--goodbg); color:var(--good); }
.pill.stage-wypadl { background:#ececf1; color:#55565f; }
.actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.crumbs { margin:-20px 0 14px; font-size:.9em; } .crumbs a { text-decoration:none; color:var(--muted); }
.client-hero h1 { font-size:1.9em; margin:4px 0 8px; }
.client-hero .grow { flex:1; min-width:240px; }
.pills { display:flex; gap:6px; flex-wrap:wrap; }
.client-grid { display:grid; grid-template-columns:minmax(0, 1fr) 340px; gap:18px; align-items:start; }
.client-main { display:flex; flex-direction:column; gap:18px; min-width:0; }
.client-main .card + .card { margin-top:0; }
.client-side { position:sticky; top:20px; max-height:calc(100vh - 40px); overflow-y:auto; border-radius:var(--radius); }
.card-head { display:flex; align-items:center; gap:12px; justify-content:space-between; margin-bottom:8px; flex-wrap:wrap; }
.card-head h2 { margin:0; } .card-head form { margin:0; }
.next { display:flex; flex-direction:column; gap:14px; padding:20px 24px; }
.next-form { display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; margin:0; }
.next-form .grow { flex:1; min-width:200px; }
.facts { display:grid; grid-template-columns:max-content 1fr; gap:6px 18px; margin:6px 0 4px; }
.facts dt { color:var(--muted); } .facts dd { margin:0; min-width:0; overflow-wrap:anywhere; }
details.edit { margin-top:12px; border-top:1px solid var(--line); padding-top:10px; }
details.edit > summary { cursor:pointer; color:var(--accent); font-weight:600; font-size:.9em; list-style:none; }
details.edit > summary::-webkit-details-marker { display:none; }
details.edit[open] > summary { margin-bottom:10px; }
details.edit.inline { border:0; margin:0; padding:0; flex:none; }
details.edit.inline[open] { flex-basis:100%; }
.row-item { display:flex; gap:12px; align-items:center; padding:12px 0; border-top:1px solid var(--line); flex-wrap:wrap; }
.row-item:first-of-type { border-top:0; }
.row-item .grow { flex:1; min-width:0; overflow-wrap:anywhere; }
.row-item form { margin:0; }
.small-icon { width:38px; height:38px; font-size:.68em; }
.missing { display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin:4px 0 14px; }
.dropzone { display:grid; grid-template-columns:220px 1fr auto; gap:10px; align-items:end; margin-bottom:8px; }
.drop-area { border:2px dashed #d7d7df; border-radius:16px; padding:14px; text-align:center; color:var(--muted);
             font-weight:500; cursor:pointer; display:block; }
.drop-area.over { border-color:var(--accent); background:var(--accent-soft); color:var(--accent); }
.drop-area input { position:absolute; width:1px; height:1px; opacity:0; }
.drop-area .chosen { display:block; color:var(--ink); font-size:.9em; margin-top:4px; }
.note-form { margin-bottom:14px; } .note-form .actions { justify-content:space-between; } .note-form select { width:auto; }
.timeline { display:flex; flex-direction:column; }
.tl-item { display:flex; gap:10px; padding:10px 0; border-top:1px solid var(--line); }
.tl-item:first-child { border-top:0; }
.tl-dot { width:28px; height:28px; border-radius:50%; background:var(--bg); display:inline-flex; align-items:center;
          justify-content:center; flex:none; font-size:.85em; color:var(--muted); }
.tl-notatka .tl-dot, .tl-telefon .tl-dot, .tl-spotkanie .tl-dot, .tl-mail .tl-dot { background:var(--accent-soft); color:var(--accent); }
.tl-etap .tl-dot { background:var(--ink); color:#fff; }
.tl-text { white-space:pre-wrap; font-size:.92em; overflow-wrap:anywhere; }
@media (max-width:1100px) {
  .client-grid { grid-template-columns:1fr; }
  .client-side { position:static; max-height:none; }
}
@media (max-width:900px) {
  .dropzone { grid-template-columns:1fr; }
  .facts { grid-template-columns:1fr; } .facts dt { margin-top:6px; }
  .rright.col { align-items:flex-start; padding-left:56px; }
}

/* ===================== Etap 3: pipeline, proces, zadania ===================== */
.board { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(220px, 1fr); gap:12px; overflow-x:auto;
         padding-bottom:12px; align-items:start; }
main:has(.board) { max-width:none; }
.col { background:#e9e9ef; border-radius:20px; padding:10px; min-height:200px; display:flex; flex-direction:column; gap:8px; }
.col.col-end { background:#efeff3; }
.col.over { outline:2px dashed var(--accent); background:var(--accent-soft); }
.col header { display:flex; flex-direction:column; gap:2px; padding:4px 6px 6px; }
.col-body { display:flex; flex-direction:column; gap:8px; min-height:60px; }
.col-empty { color:#b5b6bd; text-align:center; padding:12px; }
.deal { background:#fff; border-radius:16px; box-shadow:var(--shadow); padding:12px 14px; display:flex; flex-direction:column;
        gap:3px; color:inherit; text-decoration:none; cursor:grab; }
.deal:hover { box-shadow:0 2px 14px rgba(14,15,19,.10); }
.deal.dragging { opacity:.45; }
.deal-name { font-weight:600; letter-spacing:-.01em; overflow-wrap:anywhere; }
.deal-amt { font-weight:700; color:var(--accent); }
.deal-next { font-size:.82em; color:#4a4b55; } .deal-next.late { color:var(--bad); font-weight:600; }
.deal-meta { font-size:.76em; color:var(--muted); }
.dialog { border:0; border-radius:24px; padding:24px; max-width:460px; width:calc(100% - 32px); box-shadow:0 10px 40px rgba(14,15,19,.2); }
.dialog::backdrop { background:rgba(14,15,19,.35); }
.dialog ul { padding-left:18px; }
.stepper { display:flex; gap:4px; list-style:none; padding:0; margin:4px 0 14px; flex-wrap:wrap; }
.stepper li { font-size:.76em; font-weight:600; padding:5px 10px; border-radius:999px; background:var(--bg); color:var(--muted); }
.stepper li.done { background:var(--accent-soft); color:var(--accent); }
.stepper li.now { background:var(--ink); color:#fff; }
.checklist { list-style:none; padding:0; margin:0 0 12px; }
.checklist li { display:flex; gap:10px; align-items:center; padding:8px 0; border-top:1px solid var(--line); }
.checklist li:first-child { border-top:0; }
.checklist form { margin:0; }
.cdot { width:22px; height:22px; border-radius:50%; border:2px solid #d7d7df; display:inline-flex; align-items:center;
        justify-content:center; flex:none; font-size:.75em; font-weight:700; }
.checklist li.ok .cdot { background:var(--accent); border-color:var(--accent); color:#fff; }
.checklist li.ok > .grow { color:var(--muted); }
.move-actions { align-items:flex-start; }
.owner-assign { margin-top:14px; padding-top:12px; border-top:1px solid var(--line); }
label.check { flex-direction:row; align-items:center; gap:10px; font-weight:500; padding:6px 0; }
label.check input { width:auto; }
.rlist.flat { box-shadow:none; border-radius:0; background:transparent; }
.rlist.flat .ritem { padding-left:0; padding-right:0; }
.edit-block summary { cursor:pointer; }

/* ===================== Etap 4: agenci AI ===================== */
.mono { font-family:ui-monospace,Menlo,monospace; font-size:.88em; }
.insight-note { background:var(--bg); border-radius:18px; padding:4px 20px; }
.today-loading { display:flex; gap:10px; align-items:center; background:var(--bg); border-radius:16px; padding:14px 16px; }
.spinner { width:16px; height:16px; border:2px solid var(--accent-soft); border-top-color:var(--accent); border-radius:50%;
           display:inline-block; animation:spin 1s linear infinite; flex:none; }
@keyframes spin { to { transform:rotate(360deg); } }
.bubble-btn { position:fixed; right:calc(20px + env(safe-area-inset-right, 0px)); bottom:calc(20px + env(safe-area-inset-bottom, 0px));
              width:56px; height:56px; border-radius:50%; padding:0; justify-content:center; box-shadow:0 6px 24px rgba(29,92,64,.35); z-index:40; }
.bubble { position:fixed; right:calc(20px + env(safe-area-inset-right, 0px)); bottom:calc(88px + env(safe-area-inset-bottom, 0px));
          width:min(420px, calc(100vw - 32px)); height:min(620px, calc(100vh - 120px)); background:var(--card); border-radius:24px;
          box-shadow:0 12px 48px rgba(14,15,19,.22); z-index:41; display:flex; flex-direction:column; overflow:hidden; }
.bubble[hidden] { display:none; }
.bubble-head { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--line); }
.bubble-msgs { flex:1; overflow-y:auto; padding:14px 16px; display:flex; flex-direction:column; gap:10px; }
.bmsg { max-width:92%; border-radius:18px; padding:10px 14px; font-size:.93em; overflow-wrap:anywhere; }
.bmsg.ty { align-self:flex-end; background:var(--accent); color:#fff; white-space:pre-wrap; border-bottom-right-radius:6px; }
.bmsg.agent { align-self:flex-start; background:var(--bg); border-bottom-left-radius:6px; }
.bmsg.agent > :first-child { margin-top:0; } .bmsg.agent > :last-child { margin-bottom:0; }
.bmsg.agent table { font-size:.85em; display:block; overflow-x:auto; }
.bubble-status { padding:0 16px 6px; min-height:1.2em; }
.bubble-form { display:flex; gap:8px; padding:10px 12px 12px; border-top:1px solid var(--line); align-items:flex-end; }
.bubble-form textarea { resize:none; }
@media (max-width:900px) { .bubble { bottom:calc(84px + env(safe-area-inset-bottom, 0px)); right:16px; height:calc(100vh - 110px); } }