/* LeadApp — mobile-first stylesheet. No frameworks. */
:root{
    --blue:#1d6ff2; --blue-dark:#1558c7;
    --bg:#eef1f5; --card:#ffffff;
    --text:#1c2330; --muted:#6b7686; --border:#e2e7ee;
    --green:#16a34a; --red:#dc2626; --amber:#b45309;
    --wa:#22a35b;
    --radius:14px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
    margin:0; font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    background:var(--bg); color:var(--text); font-size:16px; line-height:1.45;
    padding-bottom:78px; /* room for bottom nav on mobile */
}
a{color:var(--blue); text-decoration:none}
h1.page-title{font-size:22px; margin:6px 0 14px}
h2{font-size:17px; margin:0 0 10px}
.muted{color:var(--muted)} .small{font-size:13px}
.text-danger{color:var(--red)} .text-green{color:var(--green)}

.container{max-width:960px; margin:0 auto; padding:12px 12px 24px}

/* ---------- top bar ---------- */
.topbar{background:#fff; border-bottom:1px solid var(--border); position:sticky; top:0; z-index:50}
.topbar-inner{max-width:960px; margin:0 auto; padding:10px 12px; display:flex; align-items:center; justify-content:space-between}
.brand{font-weight:800; font-size:19px; color:var(--blue)}
.topbar-user{display:flex; align-items:center; gap:10px; font-size:13px}
.user-chip{background:#eaf1fe; color:var(--blue-dark); padding:5px 10px; border-radius:20px; font-weight:600}
.logout{color:var(--muted)}

/* ---------- nav: bottom bar on mobile, top tabs on desktop ---------- */
.mainnav{
    position:fixed; left:0; right:0; bottom:0; z-index:60;
    background:#fff; border-top:1px solid var(--border);
    display:flex; justify-content:space-around; padding:6px 4px calc(6px + env(safe-area-inset-bottom));
}
.mainnav a{
    display:flex; flex-direction:column; align-items:center; gap:2px;
    color:var(--muted); font-size:11px; padding:6px 10px; border-radius:10px; min-width:60px;
}
.mainnav a.active{color:var(--blue); background:#eaf1fe; font-weight:700}
.nav-icon{font-size:20px}

/* ---------- cards / stats ---------- */
.card{background:var(--card); border-radius:var(--radius); padding:16px; margin-bottom:12px;
    box-shadow:0 1px 4px rgba(20,30,50,.06)}
.stat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:12px}
.stat{background:#fff; border-radius:var(--radius); padding:14px 8px; text-align:center;
    box-shadow:0 1px 4px rgba(20,30,50,.06)}
.stat-num{font-size:24px; font-weight:800}
.stat-label{font-size:12px; color:var(--muted); margin-top:4px}

.pipeline{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.pipe-stage{background:#f7f9fc; border:1px solid var(--border); border-radius:10px;
    padding:10px 6px; text-align:center; display:flex; flex-direction:column; gap:6px; align-items:center}
.pipe-num{font-size:20px; font-weight:800}

/* ---------- stage badges ---------- */
.stage-badge{display:inline-block; padding:4px 10px; border-radius:20px; font-size:12px; font-weight:700; white-space:nowrap}
.stage-new{background:#e8eefc; color:#1d4fd7}
.stage-contacted{background:#e0f2fe; color:#0369a1}
.stage-qualified{background:#fef3c7; color:#92400e}
.stage-proposal{background:#ede9fe; color:#6d28d9}
.stage-won{background:#dcfce7; color:#15803d}
.stage-lost{background:#f1f5f9; color:#64748b}

/* ---------- lead temperature badges ---------- */
.temp-hot{background:#fee2e2; color:#b91c1c}
.temp-warm{background:#fef3c7; color:#92400e}
.temp-cold{background:#e0f2fe; color:#0369a1}
.temp-junk{background:#f1f5f9; color:#64748b}

/* ---------- leads ---------- */
.toolbar{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px}
.lead-card{padding:0}
.lead-main{display:flex; justify-content:space-between; align-items:flex-start; gap:10px; padding:14px 16px; color:inherit}
.lead-row{display:flex; justify-content:space-between; align-items:center; gap:10px;
    padding:12px 4px; border-top:1px solid var(--border); color:inherit}
.lead-row:first-of-type{border-top:0}
.quick-actions{display:flex; gap:8px; padding:0 16px 14px; flex-wrap:wrap}
.quick-actions .btn{flex:1; min-width:90px}
.lead-head{display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-bottom:10px}
.lead-name{margin:0 0 4px; font-size:20px}
.lead-notes{background:#f7f9fc; border-radius:10px; padding:10px 12px; margin:0 0 12px}

/* ---------- buttons ---------- */
.btn{display:inline-block; border:1px solid transparent; border-radius:10px; padding:12px 16px;
    font-size:15px; font-weight:700; cursor:pointer; text-align:center; text-decoration:none;
    background:#fff; color:var(--text); min-height:48px}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--blue); color:#fff}
.btn-ghost{border-color:var(--border); color:var(--text)}
.btn-danger{background:#fee2e2; color:#b91c1c}
.btn-call{background:#e8f7ee; color:#15803d}
.btn-wa{background:var(--wa); color:#fff}
.btn-block{display:block; width:100%; margin-top:8px}

/* ---------- forms ---------- */
.form label{display:block; font-weight:600; font-size:14px; margin-bottom:12px}
.form label.check{display:flex; gap:10px; align-items:flex-start; font-weight:400}
input[type=text],input[type=tel],input[type=email],input[type=password],
input[type=search],input[type=file],input[type=datetime-local],
select,textarea{
    width:100%; padding:12px; margin-top:6px; font-size:16px; border:1px solid var(--border);
    border-radius:10px; background:#fff; color:var(--text); font-family:inherit}
textarea{resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid var(--blue); border-color:var(--blue)}
.filters input[type=search]{margin-bottom:10px}
.filter-row{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.filter-row .btn{grid-column:span 2}
.inline-form{display:flex; gap:6px; flex:1}
.inline-form input{margin-top:0; padding:10px; font-size:14px}

/* ---------- tabs ---------- */
.tabs{display:flex; gap:8px; margin-bottom:12px}
.tabs a{flex:1; text-align:center; background:#fff; border:1px solid var(--border);
    border-radius:10px; padding:12px 6px; font-size:14px; font-weight:700; color:var(--muted)}
.tabs a.active{background:var(--blue); border-color:var(--blue); color:#fff}

/* ---------- timeline ---------- */
.tl{border-left:3px solid var(--border); padding:8px 0 8px 14px; margin:10px 0}
.tl-note{border-color:var(--blue)}
.tl-act{border-color:var(--border)}
.tl-head{font-size:13px; margin-bottom:4px}
.fu-row{display:flex; justify-content:space-between; align-items:center; gap:10px;
    padding:10px 0; border-top:1px solid var(--border)}
.fu-row:first-of-type{border-top:0}
.fu-row.done{opacity:.55}

/* ---------- tables ---------- */
.table-wrap{overflow-x:auto}
table{width:100%; border-collapse:collapse; font-size:14px}
th,td{padding:10px 8px; border-bottom:1px solid var(--border); text-align:left; white-space:nowrap}
th{color:var(--muted); font-size:12px; text-transform:uppercase}
tr.inactive{opacity:.55}

/* ---------- flash / pager ---------- */
.flash{border-radius:10px; padding:12px 14px; margin-bottom:12px; font-weight:600}
.flash.ok{background:#e8f7ee; border:1px solid #bfe6cc; color:#15803d}
.flash.err{background:#fdecec; border:1px solid #f5c2c2; color:#b91c1c}
.pager{display:flex; align-items:center; justify-content:space-between; margin:8px 0}

/* ---------- login ---------- */
.login-page{display:flex; align-items:center; justify-content:center; min-height:100vh; padding:20px}
.login-box{background:#fff; border-radius:16px; padding:28px; width:100%; max-width:380px;
    box-shadow:0 4px 20px rgba(20,30,50,.1)}
.login-logo{font-size:26px; font-weight:800; color:var(--blue)}
.login-box label{display:block; font-weight:600; font-size:14px; margin-bottom:12px}

.grid2{display:grid; gap:12px}
code{background:#f1f3f6; padding:2px 6px; border-radius:6px; font-size:13px; word-break:break-all}
.token-box{background:#0f172a; color:#7dd3fc; border-radius:10px; padding:12px; font-family:monospace;
    font-size:13px; word-break:break-all; margin:6px 0}

/* ---------- desktop ---------- */
@media (min-width:768px){
    body{padding-bottom:0}
    .mainnav{position:static; border-top:0; border-bottom:1px solid var(--border);
        justify-content:flex-start; max-width:960px; margin:0 auto; padding:0 12px; background:transparent}
    .mainnav a{flex-direction:row; font-size:14px; padding:10px 14px}
    .nav-icon{font-size:16px}
    .stat-grid{grid-template-columns:repeat(5,1fr)}
    .pipeline{grid-template-columns:repeat(6,1fr)}
    .grid2{grid-template-columns:1fr 1fr}
    .grid2 .card{margin-bottom:12px}
    .filter-row{grid-template-columns:1fr 1fr 1fr auto}
    .filter-row .btn{grid-column:auto}
    .quick-actions .btn{flex:0 1 auto}
}