:root{
  --wood:#a9744f;
  --wood-dark:#7a5236;
  --blue:#2b5f8a;
  --blue-dark:#1e4463;
  --bg:#f4f1ec;
  --card-bg:#ffffff;
  --border:#e2ddd3;
  --text:#2c2a26;
  --muted:#8a8377;
  --green:#3f8f5f;
  --red:#c1493f;
  --amber:#c98a2c;
  --shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
  --nav-h: 60px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}
*{box-sizing:border-box; -webkit-tap-highlight-color: transparent;}
html,body{margin:0; height:100%;}
body{
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  background:var(--bg); color:var(--text); font-size:15px;
}
button{
  cursor:pointer; border:none; border-radius:8px; padding:10px 14px; font-size:14px; font-weight:500;
  font-family:inherit; -webkit-appearance:none; appearance:none;
}
button:active{opacity:.85;}
input, select, textarea{ font-family:inherit; font-size:16px; } /* 16px prevents iOS zoom-on-focus */
.btn-primary{background:var(--blue); color:#fff;}
.btn-secondary{background:#efeae2; color:var(--wood-dark);}
.btn-ghost{background:transparent; color:var(--blue); border:1px solid var(--blue);}
.btn-danger{background:var(--red); color:#fff;}
.btn-sm{padding:7px 12px; font-size:13px;}
.btn-block{width:100%;}

/* ---------- LOGIN ---------- */
.login-screen{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px;
  background:linear-gradient(160deg,var(--wood-dark),var(--wood) 45%,var(--blue-dark));
}
.login-card{
  background:#fff; border-radius:14px; padding:28px 24px; width:100%; max-width:360px; box-shadow:0 10px 40px rgba(0,0,0,0.3);
  text-align:center;
}
.login-logo{font-size:40px; margin-bottom:6px;}
.login-card h1{font-size:19px; margin:0 0 4px; color:var(--wood-dark);}
.login-sub{color:var(--muted); font-size:13px; margin:0 0 20px;}
.login-card .form-row{text-align:left; margin-bottom:14px;}
.login-error{background:#fdf2f1; color:var(--red); padding:8px 10px; border-radius:6px; font-size:13px; margin-bottom:14px;}

/* ---------- LAYOUT ---------- */
.app-view{display:flex; flex-direction:column; min-height:100vh;}
.topbar{
  background:linear-gradient(135deg,var(--wood-dark),var(--wood));
  color:#fff; padding:12px 16px; display:flex; align-items:center; justify-content:space-between;
  position:sticky; top:0; z-index:20; box-shadow:var(--shadow);
}
.topbar-title{font-weight:700; font-size:16px; display:flex; align-items:center; gap:6px;}
.title-text{display:none;}
.topbar-user{display:flex; align-items:center; gap:8px; font-size:13px;}
.role-badge{background:rgba(255,255,255,.2); padding:2px 8px; border-radius:8px; font-size:11px;}

main{flex:1; padding:12px 12px calc(var(--nav-h) + 20px + var(--safe-bottom));}

.panel{max-width:1200px; margin:0 auto;}

.toolbar{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:12px;}
.toolbar input[type=text], .toolbar select{
  padding:9px 10px; border:1px solid var(--border); border-radius:8px; font-size:14px; background:#fff;
}
.toolbar input[type=text]{flex:1; min-width:140px;}
.spacer{flex:0 0 0;}

/* ---------- NAV: mobile bottom bar ---------- */
.tabs-mobile{
  position:fixed; bottom:0; left:0; right:0; z-index:30;
  display:flex; background:#fff; border-top:1px solid var(--border);
  padding-bottom:var(--safe-bottom);
  box-shadow:0 -2px 8px rgba(0,0,0,0.06);
}
.tabs-mobile button{
  flex:1; background:transparent; border-radius:0; padding:9px 4px 8px; display:flex; flex-direction:column; align-items:center; gap:2px;
  color:var(--muted); font-size:11px; font-weight:600; min-height:var(--nav-h);
}
.tabs-mobile button .ic{font-size:19px;}
.tabs-mobile button.active{color:var(--blue-dark);}
.tabs-desktop{display:none;}

/* ---------- MORE SHEET ---------- */
.sheet{
  background:#fff; border-radius:16px 16px 0 0; padding:10px 0 max(16px,var(--safe-bottom)); width:100%;
  max-width:480px; margin:0 auto;
}
.sheet-handle{width:36px; height:4px; background:var(--border); border-radius:3px; margin:6px auto 10px;}
.sheet button{
  width:100%; text-align:left; background:transparent; padding:14px 20px; border-radius:0; font-size:15px; color:var(--text);
  display:flex; align-items:center; gap:10px;
}
.sheet button:active{background:#f4f1ec;}
.sheet button.danger{color:var(--red);}

/* ---------- STAGE CHIPS (mobile board) ---------- */
.stage-chips{display:flex; gap:6px; overflow-x:auto; padding-bottom:8px; margin-bottom:8px; -webkit-overflow-scrolling:touch;}
.stage-chip{
  flex:0 0 auto; padding:8px 14px; border-radius:16px; font-size:13px; font-weight:600; background:#efeae2; color:var(--wood-dark);
  border:2px solid transparent; white-space:nowrap;
}
.stage-chip.active{border-color:var(--blue); background:#fff; color:var(--blue-dark);}
.stage-chip .cnt{opacity:.7; margin-left:4px;}

.mobile-board-list{display:flex; flex-direction:column; gap:8px;}
.board{display:none;}

/* ---------- LEAD CARD (shared: mobile board list + list tab) ---------- */
.lead-card{
  background:var(--card-bg); border-radius:10px; padding:12px; box-shadow:var(--shadow);
  border-left:4px solid var(--blue); cursor:pointer;
}
.lead-card.source-call{border-left-color:var(--amber);}
.lead-card.source-site{border-left-color:var(--blue);}
.lead-card.source-other{border-left-color:var(--muted);}
.lead-card .name{font-weight:700; font-size:15px; margin-bottom:4px;}
.lead-card .meta{font-size:13px; color:var(--muted); margin-bottom:2px;}
.lead-card .row2{display:flex; justify-content:space-between; align-items:center; margin-top:6px; flex-wrap:wrap; gap:6px;}
.lead-card .tag{font-size:11px; padding:2px 8px; border-radius:8px; background:#f0ede6; color:var(--muted);}
.lead-card .amount{font-size:13px; color:var(--green); font-weight:700;}
.lead-card .stagepill{font-size:11px; padding:2px 8px; border-radius:8px; color:#fff; font-weight:600;}

.lead-card-list{display:flex; flex-direction:column; gap:8px;}

/* ---------- DASHBOARD ---------- */
.stat-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:16px;}
.stat-card{background:#fff; border-radius:10px; padding:14px; box-shadow:var(--shadow); text-align:center;}
.stat-card .num{font-size:22px; font-weight:800; color:var(--blue-dark);}
.stat-card .lbl{font-size:11.5px; color:var(--muted); margin-top:4px;}
.funnel{background:#fff; border-radius:10px; padding:14px; box-shadow:var(--shadow); margin-bottom:14px;}
.funnel h3{margin:0 0 12px; font-size:14px; color:var(--wood-dark);}
.funnel-row{display:flex; align-items:center; gap:8px; margin-bottom:8px;}
.funnel-label{width:105px; font-size:12px; color:var(--text); flex-shrink:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.funnel-bar-wrap{flex:1; background:#f0ede6; border-radius:5px; overflow:hidden; height:20px;}
.funnel-bar{background:linear-gradient(90deg,var(--blue),var(--wood)); height:100%; border-radius:5px; display:flex; align-items:center; justify-content:flex-end; padding-right:6px;}
.funnel-bar span{color:#fff; font-size:11px; font-weight:700;}

/* ---------- SETTINGS / ADMIN PANELS ---------- */
.settings-panel{background:#fff; border-radius:10px; padding:16px; box-shadow:var(--shadow);}
.hint{color:var(--muted); font-size:12.5px; margin-top:-4px;}
.form-error{background:#fdf2f1; color:var(--red); padding:8px 10px; border-radius:6px; font-size:13px; margin:10px 0;}

.stage-row{display:flex; align-items:center; gap:8px; padding:9px 4px; border-bottom:1px solid var(--border); flex-wrap:wrap;}
.stage-row:last-child{border-bottom:none;}
.stage-row-delete{background:#fdf2f1; border-radius:8px; padding:12px; margin-bottom:2px;}
.stage-drag-handle{cursor:grab; color:var(--muted); font-size:16px; display:none;}
.stage-color{width:30px; height:30px; padding:0; border:1px solid var(--border); border-radius:6px; cursor:pointer; flex-shrink:0;}
.stage-title-input{flex:1 1 120px; min-width:0; padding:7px 8px; border:1px solid var(--border); border-radius:6px; font-size:14px;}
.stage-lost-toggle{display:flex; align-items:center; gap:4px; font-size:12px; color:var(--muted); white-space:nowrap;}
.stage-lead-count{font-size:11px; color:var(--muted); white-space:nowrap; width:100%; text-align:right; order:10;}
.stage-row-actions{display:flex; gap:4px; flex-shrink:0;}
.add-stage-form{display:flex; gap:8px; align-items:center; margin-top:14px; flex-wrap:wrap; border-top:1px solid var(--border); padding-top:14px;}
.add-stage-form input[type=text]{flex:1; min-width:150px; padding:8px 10px; border:1px solid var(--border); border-radius:6px; font-size:14px;}

.add-form{display:flex; gap:8px; align-items:center; margin-top:14px; flex-wrap:wrap; border-top:1px solid var(--border); padding-top:14px;}
.add-form input, .add-form select{padding:8px 10px; border:1px solid var(--border); border-radius:6px; font-size:14px;}
.add-form input[type=text], .add-form input[type=password]{flex:1; min-width:130px;}

.user-row{display:flex; align-items:center; gap:8px; padding:10px 4px; border-bottom:1px solid var(--border); flex-wrap:wrap;}
.user-row:last-child{border-bottom:none;}
.user-row .u-name{font-weight:600; flex:1 1 140px; min-width:0;}
.user-row .u-name small{display:block; color:var(--muted); font-weight:400; font-size:12px;}
.user-row .u-badge{font-size:11px; padding:2px 8px; border-radius:8px; background:#f0ede6; color:var(--wood-dark); font-weight:600;}
.user-row .u-badge.inactive{background:#fdf2f1; color:var(--red);}
.toggle-switch{position:relative; width:40px; height:22px; flex-shrink:0;}
.toggle-switch input{opacity:0; width:0; height:0;}
.toggle-slider{position:absolute; inset:0; background:#d8d2c4; border-radius:22px; transition:.15s; cursor:pointer;}
.toggle-slider:before{content:""; position:absolute; width:16px; height:16px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.15s;}
.toggle-switch input:checked + .toggle-slider{background:var(--green);}
.toggle-switch input:checked + .toggle-slider:before{transform:translateX(18px);}
.mini-actions{display:flex; gap:6px;}

.managers-checkboxes{display:flex; flex-direction:column; gap:6px; max-height:160px; overflow-y:auto; border:1px solid var(--border); border-radius:8px; padding:8px;}
.managers-checkboxes label{display:flex; align-items:center; gap:8px; font-size:14px;}

/* ---------- CALLS / REMINDERS ---------- */
.calls-list{display:flex; flex-direction:column; gap:8px; margin-bottom:8px;}
.call-row{border:1px solid var(--border); border-radius:8px; padding:10px; font-size:13px; background:#fff;}
.call-row.overdue{border-color:var(--red); background:#fdf2f1;}
.call-row.due-soon{border-color:var(--amber); background:#fdf6ea;}
.call-row.completed{opacity:.65;}
.call-row .call-top{display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap;}
.call-row .call-time{font-weight:700; color:var(--text);}
.call-row .call-client{font-weight:700; color:var(--wood-dark);}
.call-row .call-topic{margin-top:4px; color:var(--text);}
.call-row .call-meta{font-size:11.5px; color:var(--muted); margin-top:2px;}
.call-row .call-agreed{margin-top:6px; font-size:12.5px; color:var(--muted); background:#faf8f4; padding:6px 8px; border-radius:6px;}
.call-row .call-actions{display:flex; gap:6px; margin-top:8px; flex-wrap:wrap;}
.call-row-global{cursor:pointer;}
.call-status-pill{font-size:10.5px; padding:2px 8px; border-radius:8px; font-weight:700; white-space:nowrap;}
.call-status-pill.overdue{background:var(--red); color:#fff;}
.call-status-pill.soon{background:var(--amber); color:#fff;}
.call-status-pill.upcoming{background:#efeae2; color:var(--wood-dark);}
.call-status-pill.completed{background:var(--green); color:#fff;}
.reminder-checkboxes{display:flex; gap:12px; flex-wrap:wrap; font-size:13px;}
.reminder-checkboxes label{display:flex; align-items:center; gap:4px;}
.reminder-tag{font-size:10.5px; padding:1px 6px; border-radius:6px; background:#f0ede6; color:var(--muted); margin-right:4px; display:inline-block;}

.nav-badge{background:var(--red); color:#fff; font-size:10px; border-radius:8px; padding:1px 6px; margin-left:6px; font-weight:700;}
.tabs-mobile button{position:relative;}
.nav-badge-dot{position:absolute; top:4px; right:calc(50% - 24px); background:var(--red); color:#fff; font-size:9px; min-width:15px; height:15px; border-radius:8px; display:flex; align-items:center; justify-content:center; padding:0 3px; font-weight:700;}

/* ---------- MODAL (bottom sheet on mobile) ---------- */
.overlay{
  position:fixed; inset:0; background:rgba(30,25,20,0.5); display:none; align-items:flex-end; justify-content:center; z-index:100;
}
.overlay.show{display:flex;}
.modal{
  background:#fff; border-radius:16px 16px 0 0; padding:20px; width:100%; max-height:92vh; overflow-y:auto;
  box-shadow:0 -10px 40px rgba(0,0,0,0.25);
  padding-bottom:calc(20px + var(--safe-bottom));
}
.modal h2{margin:0 0 14px; font-size:17px; color:var(--wood-dark); padding-right:24px;}
.form-row{margin-bottom:12px;}
.form-row label{display:block; font-size:12px; font-weight:600; color:var(--muted); margin-bottom:4px;}
.form-row input, .form-row select, .form-row textarea{
  width:100%; padding:9px 10px; border:1px solid var(--border); border-radius:8px; font-size:15px; font-family:inherit;
}
.form-grid{display:grid; grid-template-columns:1fr; gap:2px 10px;}
.modal-actions{display:flex; justify-content:space-between; margin-top:16px; gap:8px; flex-wrap:wrap;}
.modal-actions .left{display:flex; gap:8px; flex-wrap:wrap;}

.notes-list{max-height:160px; overflow-y:auto; border:1px solid var(--border); border-radius:8px; padding:8px; margin-bottom:8px; background:#faf8f4;}
.note-item{font-size:12.5px; padding:6px 0; border-bottom:1px dashed var(--border);}
.note-item:last-child{border-bottom:none;}
.note-item .note-author{font-weight:600; color:var(--wood-dark);}
.note-date{color:var(--muted); font-size:11px;}
.note-add-row{display:flex; gap:6px;}
.note-add-row input{flex:1;}

.close-x{position:absolute; top:12px; right:14px; background:transparent; color:var(--muted); font-size:22px; padding:2px 8px;}
.modal-wrap{position:relative;}

.empty-state{text-align:center; padding:36px 16px; color:var(--muted); font-size:14px;}

::-webkit-scrollbar{width:8px; height:8px;}
::-webkit-scrollbar-thumb{background:#d8d2c4; border-radius:4px;}

/* ================= DESKTOP (>=900px) ================= */
@media (min-width: 900px){
  .title-text{display:inline;}
  main{padding:20px 24px 40px;}
  .tabs-mobile{display:none;}
  .tabs-desktop{
    display:flex; gap:2px; background:#fff; border-bottom:1px solid var(--border); padding:0 24px;
  }
  .tabs-desktop button{
    background:transparent; border-radius:0; padding:12px 16px; color:var(--muted); font-weight:600; border-bottom:3px solid transparent;
  }
  .tabs-desktop button.active{color:var(--blue-dark); border-bottom:3px solid var(--blue);}

  .stage-chips, .mobile-board-list{display:none;}
  .board{display:flex; gap:12px; overflow-x:auto; padding-bottom:16px;}
  .column{
    background:#efeae2; border-radius:10px; min-width:250px; max-width:250px; flex:0 0 auto;
    display:flex; flex-direction:column; max-height:calc(100vh - 230px);
  }
  .column-header{padding:10px 12px; font-weight:700; font-size:13px; color:var(--wood-dark); display:flex; justify-content:space-between; align-items:center; border-bottom:2px solid var(--wood);}
  .column-count{background:#fff; border-radius:10px; padding:1px 8px; font-size:12px; color:var(--muted);}
  .column-body{padding:8px; overflow-y:auto; flex:1; min-height:60px;}
  .column-body.dragover{background:#e2d9c9;}
  .column-footer{padding:8px;}
  .add-lead-mini{width:100%; background:transparent; border:1px dashed var(--wood); color:var(--wood-dark); padding:6px; border-radius:6px; font-size:12px;}
  .column.lost .column-header{color:var(--red); border-bottom-color:var(--red);}
  .column .lead-card{margin-bottom:8px; cursor:grab;}
  .column .lead-card:active{cursor:grabbing;}

  .lead-card-list{display:grid; grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); gap:10px;}

  .stat-grid{grid-template-columns:repeat(auto-fit, minmax(160px,1fr));}

  .stage-drag-handle{display:inline;}
  .stage-lead-count{width:auto; text-align:right; order:0; min-width:64px;}

  .overlay{align-items:center; padding:20px;}
  .modal{border-radius:12px; max-width:560px; padding:22px;}
  .form-grid{grid-template-columns:1fr 1fr; gap:10px;}
}