/* ===============================
GLOBAL
=============================== */
body{
background:#f1f5f9;
font-family:Inter,system-ui,-apple-system,sans-serif;
}


/* ===============================
TOP BAR
=============================== */
.leadcrm-topbar{
display:flex;
justify-content:space-between;
align-items:center;
gap:20px;
padding:20px;
margin-bottom:10px;
flex-wrap:wrap;
}


/* ===============================
FILTER
=============================== */
.leadcrm-filters{
display:flex;
gap:10px;
align-items:center;
flex-wrap:wrap;
}

.leadcrm-filters select{
height:42px;
min-width:150px;
padding:8px 10px;
border:1px solid #e2e8f0;
border-radius:6px;
font-size:12px;
background:#fff;
}

#filter-reset{
height:42px;
padding:0 16px;
background:#0f172a;
color:#fff;
border:none;
border-radius:6px;
cursor:pointer;
}


/* ===============================
RIGHT SIDE (KPI + BUTTON)
=============================== */
.leadcrm-actions{
display:flex;
align-items:center;
gap:12px;
}

.kpi-box{
background:#ffffff;
border-radius:10px;
padding:10px 14px;
box-shadow:0 4px 12px rgba(0,0,0,0.05);
min-width:120px;
}

.kpi-box span{
display:block;
font-size:11px;
color:#64748b;
margin-bottom:4px;
}

.kpi-box strong{
font-size:18px;
color:#0f172a;
}

.leadcrm-create-btn{
height:42px;
display:flex;
align-items:center;
background:#16a34a;
color:#fff;
border:none;
padding:0 16px;
border-radius:8px;
cursor:pointer;
font-weight:600;
}

.leadcrm-create-btn:hover{
background:#15803d;
}


/* ===============================
BOARD LAYOUT
=============================== */
.leadcrm-board-main,
.leadcrm-board-bottom{
display:flex;
gap:22px;
padding:20px;
overflow-x:auto;
align-items:flex-start;
}


/* ===============================
COLUMN
=============================== */
.lead-column{
width:220px;
flex-shrink:0;
background:#f1f5f9;
border-radius:10px;
padding:10px;
box-shadow:0 4px 12px rgba(0,0,0,0.05);
max-height:75vh;
overflow-y:auto;
}

.lead-column h3{
font-size:13px;
font-weight:700;
margin-bottom:10px;
padding-bottom:6px;
border-bottom:1px solid #eef2f7;
color:#0f172a;
}


/* ===============================
STATUS COLORS
=============================== */
.lead-column[data-status="Neu"] h3{color:#64748b;}
.lead-column[data-status="Kontaktiert"] h3{color:#2563eb;}
.lead-column[data-status="Termin"] h3{color:#ea580c;}
.lead-column[data-status="Angebot"] h3{color:#7c3aed;}
.lead-column[data-status="Gewonnen"] h3{color:#16a34a;}
.lead-column[data-status="Verloren"] h3{color:#dc2626;}


/* ===============================
LEAD CARD
=============================== */
.lead-card{
background:#ffffff;
border-radius:10px;
padding:12px;
margin-bottom:10px;
cursor:pointer;
border:1px solid #e6ebf2;
box-shadow:0 2px 6px rgba(0,0,0,0.06);
text-align:center;
position:relative;
transition:all .18s ease;
}

.lead-card::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:4px;
background:#3b82f6;
border-top-left-radius:10px;
border-top-right-radius:10px;
}

.lead-card:hover{
transform:translateY(-2px);
box-shadow:0 8px 18px rgba(0,0,0,0.12);
}

.lead-card strong{
font-size:13px;
font-weight:600;
display:block;
margin-bottom:4px;
color:#0f172a;
}

.lead-card small{
font-size:11px;
display:block;
line-height:1.3;
color:#64748b;
}

.lead-source{
display:inline-block;
margin-top:6px;
padding:2px 8px;
font-size:11px;
background:#e2e8f0;
border-radius:12px;
color:#334155;
}


/* ===============================
MODAL
=============================== */
#leadcrm-modal{
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.45);
z-index:9999;
align-items:center;
justify-content:center;
}

.leadcrm-modal-inner{
background:#f8fafc;
padding:24px;
min-width:600px;
max-width:800px;
width:90%;
border-radius:12px;
position:relative;
box-shadow:0 25px 80px rgba(0,0,0,0.25);
}


/* ===============================
GRID
=============================== */
.leadcrm-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:16px;
}

@media(max-width:768px){
.leadcrm-grid{
grid-template-columns:1fr;
}
}


/* ===============================
FIELDS
=============================== */
.leadcrm-field{
margin-bottom:15px;
font-size:13px;
}

.leadcrm-field label{
display:block;
font-weight:600;
margin-bottom:6px;
color:#334155;
}

.leadcrm-field input,
.leadcrm-field select,
.leadcrm-field textarea{
width:100%;
padding:10px;
border:1px solid #d1d5db;
border-radius:8px;
font-size:13px;
background:#fff;
}

.leadcrm-name-input{
border:none;
width:80%;
font-size:20px;
font-weight:600;
outline:none;
background:transparent;
margin-bottom:10px;
}


/* ===============================
BUTTONS
=============================== */
#leadcrm-save{
margin-top:16px;
width:100%;
background:linear-gradient(135deg,#2563eb,#1d4ed8);
color:#fff;
border:none;
padding:10px;
border-radius:8px;
font-size:14px;
font-weight:600;
cursor:pointer;
}

.leadcrm-delete{
margin-top:10px;
width:100%;
background:#dc2626;
color:#fff;
border:none;
padding:9px;
border-radius:8px;
cursor:pointer;
}


/* ===============================
CLOSE BUTTON
=============================== */
#leadcrm-close{
position:absolute;
top:12px;
right:12px;
width:34px;
height:34px;
display:flex;
align-items:center;
justify-content:center;
border:none;
border-radius:8px;
background:#f1f5f9;
cursor:pointer;
}

/* ===============================
KPI BAR (TOP)
=============================== */

.leadcrm-kpi-bar{
display:flex;
gap:16px;
padding:20px;
flex-wrap:wrap;
}

.kpi-box{
background:#ffffff;
border-radius:12px;
padding:14px 18px;
box-shadow:0 6px 18px rgba(0,0,0,0.06);
min-width:140px;
}

.kpi-box span{
font-size:11px;
color:#64748b;
display:block;
}

.kpi-box strong{
font-size:20px;
color:#0f172a;
margin-top:4px;
display:block;
}

/* Highlight KPI (Umsatz) */
.kpi-box.highlight{
background:linear-gradient(135deg,#2563eb,#1d4ed8);
color:#fff;
}

.kpi-box.highlight span{
color:#c7d2fe;
}

.kpi-box.highlight strong{
color:#fff;
}


/* ===============================
FLOATING BUTTON
=============================== */

.leadcrm-create-btn.floating{
position:fixed;
bottom:25px;
right:25px;
z-index:999;

background:#16a34a;
color:#fff;
border:none;
padding:14px 18px;
border-radius:50px;
font-size:14px;
font-weight:600;

box-shadow:0 12px 30px rgba(0,0,0,0.25);
transition:all .2s ease;
}

.leadcrm-create-btn.floating:hover{
transform:translateY(-2px);
box-shadow:0 18px 40px rgba(0,0,0,0.3);
}

#leadcrm-message {
    display: block;
    max-height: 200px !important;
    overflow-y: auto
}