/* ── CRM modul stílusok — illeszkedik a meglévő sötét témához ────────────────── */
/* Újrahasznosított globális osztályok: .card .btn .btn-primary .btn-gray .badge
   .results-table input/select/textarea. Itt csak a CRM-specifikus elemek. */

.crm-subtabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.crm-subtab{padding:7px 14px;border-radius:8px;border:1px solid rgba(71,85,105,0.3);background:none;color:#64748b;font-size:13px;font-weight:600;cursor:pointer;transition:all .18s}
.crm-subtab.active{background:rgba(129,203,171,0.15);border-color:rgba(129,203,171,0.3);color:#a8e0c9}
.crm-view{display:none}.crm-view.active{display:block}

/* Login */
.crm-login{max-width:360px;margin:60px auto}
.crm-login .lbl{margin-top:10px}

/* Kanban */
.kanban{display:flex;gap:12px;overflow-x:auto;padding-bottom:12px;align-items:flex-start}
.kcol{flex:0 0 280px;background:rgba(34,34,34,0.5);border:1px solid rgba(71,85,105,0.25);border-radius:12px;padding:10px;min-height:120px;transition:background .15s,border-color .15s}
.kcol.dragover{background:rgba(129,203,171,0.08);border-color:rgba(129,203,171,0.5)}
.kcol-head{display:flex;align-items:center;gap:8px;margin-bottom:10px;padding:0 4px}
.kcol-dot{width:10px;height:10px;border-radius:50%;flex:none}
.kcol-title{font-size:12px;font-weight:700;color:#cbd5e1;flex:1}
.kcol-meta{font-size:10px;color:#64748b;text-align:right;line-height:1.3}
.kcard{background:#2e2e2e;border:1px solid rgba(71,85,105,0.4);border-radius:10px;padding:11px 12px;margin-bottom:9px;cursor:grab;transition:border-color .15s,transform .1s}
.kcard:hover{border-color:rgba(129,203,171,0.4)}
.kcard:active{cursor:grabbing}
.kcard.dragging{opacity:.4}
.kcard-name{font-size:13px;font-weight:700;color:#e2e8f0;margin-bottom:3px;line-height:1.3}
.kcard-sub{font-size:11px;color:#64748b;margin-bottom:6px}
.kcard-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:10px}
.kchip{border-radius:5px;padding:1px 7px;font-size:10px;font-weight:600;border:1px solid}
.kchip-val{background:rgba(34,197,94,0.1);border-color:rgba(34,197,94,0.3);color:#86efac}
.kchip-prio-high{background:rgba(239,68,68,0.12);border-color:rgba(239,68,68,0.35);color:#fca5a5}
.kchip-prio-medium{background:rgba(251,191,36,0.1);border-color:rgba(251,191,36,0.3);color:#fbbf24}
.kchip-prio-low{background:rgba(71,85,105,0.2);border-color:rgba(71,85,105,0.3);color:#94a3b8}
.kchip-tag{background:rgba(129,203,171,0.12);border-color:rgba(129,203,171,0.3);color:#a8e0c9}
.kchip-overdue{background:rgba(239,68,68,0.15);border-color:rgba(239,68,68,0.4);color:#fca5a5}

/* Adatlap (slide-over panel) */
.crm-panel-bg{position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:9998;display:none}
.crm-panel-bg.open{display:block}
.crm-panel{position:fixed;top:0;right:0;height:100%;width:560px;max-width:100vw;background:#222222;border-left:1px solid rgba(71,85,105,0.5);z-index:9999;transform:translateX(100%);transition:transform .25s;overflow-y:auto;display:flex;flex-direction:column}
.crm-panel.open{transform:translateX(0)}
.crm-panel-head{position:sticky;top:0;background:#2e2e2e;border-bottom:1px solid rgba(71,85,105,0.4);padding:16px 20px;z-index:2}
.crm-panel-body{padding:16px 20px;flex:1}
.crm-sec{margin-bottom:18px}
.crm-sec-title{font-size:11px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.6px;margin-bottom:10px;display:flex;align-items:center;gap:8px}
.crm-sec-title .btn{margin-left:auto}

/* Fázis-lépő gombsor */
.phase-steps{display:flex;gap:4px;flex-wrap:wrap;margin:10px 0}
.phase-step{flex:1;min-width:0;text-align:center;padding:7px 4px;border-radius:7px;font-size:10px;font-weight:700;border:1px solid rgba(71,85,105,0.3);background:rgba(34,34,34,0.5);color:#64748b;cursor:pointer;transition:all .15s}
.phase-step.done{color:#fff}
.phase-step.current{box-shadow:0 0 0 2px rgba(129,203,171,0.5)}

/* Idővonal */
.timeline{border-left:2px solid rgba(71,85,105,0.3);padding-left:14px;margin-left:4px}
.tl-item{position:relative;margin-bottom:12px;font-size:12px}
.tl-item::before{content:'';position:absolute;left:-21px;top:3px;width:9px;height:9px;border-radius:50%;background:#475569;border:2px solid #222222}
.tl-item.auto::before{background:#81cbab}
.tl-time{font-size:10px;color:#475569}
.tl-text{color:#cbd5e1;line-height:1.5}

/* kis táblázat-szerkesztő (anyagok) */
.mtbl{width:100%;border-collapse:collapse;font-size:11px}
.mtbl th{text-align:left;padding:5px 6px;color:#64748b;font-size:9px;text-transform:uppercase;border-bottom:1px solid rgba(71,85,105,0.2)}
.mtbl td{padding:3px 4px;border-bottom:1px solid rgba(71,85,105,0.1)}
.mtbl input,.mtbl select{padding:5px 6px;font-size:11px;border-radius:6px}

.note-item{background:rgba(34,34,34,0.5);border:1px solid rgba(71,85,105,0.2);border-radius:8px;padding:9px 11px;margin-bottom:7px}
.note-item.pinned{border-color:rgba(251,191,36,0.4);background:rgba(251,191,36,0.05)}
.thumb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px}
.thumb-grid img{width:100%;height:84px;object-fit:cover;border-radius:8px;border:1px solid rgba(71,85,105,0.3);cursor:pointer}

/* Dashboard */
.dash-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-bottom:16px}
.funnel-row{display:flex;align-items:center;gap:10px;margin-bottom:7px}
.funnel-label{width:170px;font-size:12px;color:#cbd5e1;flex:none}
.funnel-bar{height:26px;border-radius:6px;min-width:2px;display:flex;align-items:center;padding:0 8px;font-size:11px;font-weight:700;color:#222222;white-space:nowrap}
.funnel-val{font-size:11px;color:#94a3b8;flex:none}

/* sync indikátor */
#crmSyncBadge{font-size:11px;padding:3px 9px;border-radius:12px;font-weight:600}
.sync-online{background:rgba(34,197,94,0.12);border:1px solid rgba(34,197,94,0.3);color:#86efac}
.sync-offline{background:rgba(251,191,36,0.12);border:1px solid rgba(251,191,36,0.35);color:#fbbf24}

/* mobil-first: nagy érintőfelületek, egykezes */
@media(max-width:700px){
  .crm-panel{width:100vw}
  .kanban{gap:8px}
  .kcol{flex-basis:86vw}
  .btn{padding:11px 16px;font-size:13px}        /* kesztyűbarát */
  .crm-subtab{padding:10px 14px}
  .phase-step{font-size:11px;padding:10px 4px}
  .mtbl{font-size:12px}
  input,select,textarea{font-size:16px}          /* iOS ne zoomoljon */
}
.tap{min-height:40px;min-width:40px}
.crm-fab{position:fixed;bottom:20px;right:20px;width:56px;height:56px;border-radius:50%;background:#81cbab;color:#fff;border:none;font-size:26px;cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,0.4);z-index:900;display:none}