/* ===================== CRM — נדל"ן עפולה ===================== */
@import url('style.css');

body.crm-body{background:var(--cream-100);}

.crm-shell{display:grid; grid-template-columns:250px 1fr; min-height:100vh;}

/* ---------- sidebar ---------- */
.crm-side{
  background:var(--navy-950); color:var(--cream-50);
  padding:26px 18px; display:flex; flex-direction:column; gap:6px;
  position:sticky; top:0; height:100vh;
}
.crm-brand{display:flex; align-items:center; gap:10px; margin-bottom:30px; padding:0 8px;}
.crm-brand img{width:36px; height:36px; border-radius:7px; object-fit:cover; border:1px solid #2A3F52;}
.crm-brand div{font-family:var(--display); font-weight:700; font-size:15.5px; line-height:1.2;}
.crm-brand span{display:block; font-family:var(--utility); font-size:10.5px; color:#8CA0AC; font-weight:400; margin-top:2px;}

.crm-nav-item{
  display:flex; align-items:center; gap:12px;
  padding:12px 12px; border-radius:8px; font-family:var(--utility); font-size:14px; font-weight:500;
  color:#B9C4CC; transition:background .15s, color .15s;
}
.crm-nav-item .ico{width:18px; text-align:center;}
.crm-nav-item:hover{background:#1B3448; color:var(--cream-50);}
.crm-nav-item.active{background:var(--gold-500); color:var(--navy-950); font-weight:700;}
.crm-nav-item .count{
  margin-right:auto; background:rgba(255,255,255,.14); color:var(--cream-50);
  font-size:11px; padding:1px 8px; border-radius:20px;
}
.crm-nav-item.active .count{background:var(--navy-950); color:var(--gold-300);}

.crm-side-foot{margin-top:auto; padding:14px 12px; font-family:var(--utility); font-size:11.5px; color:#6E828F; border-top:1px solid #223648;}

/* ---------- main ---------- */
.crm-main{padding:34px 40px 70px;}
.crm-topbar{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:30px; gap:20px; flex-wrap:wrap;}
.crm-topbar h1{font-family:var(--display); font-size:26px; color:var(--navy-950); font-weight:700;}
.crm-topbar p{color:var(--ink-600); font-size:14px; margin-top:4px;}
.demo-flag{
  display:flex; align-items:center; gap:8px;
  background:#FDF3DC; border:1px solid var(--gold-300); color:#7A5C1A;
  font-family:var(--utility); font-size:12.5px; padding:9px 14px; border-radius:8px;
}

.crm-view{display:none;}
.crm-view.active{display:block;}

/* stat cards */
.stat-row{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-bottom:34px;}
.stat-card{background:var(--white); border:1px solid var(--stone-200); border-radius:12px; padding:20px;}
.stat-card strong{display:block; font-family:var(--display); font-size:28px; color:var(--navy-950);}
.stat-card span{font-family:var(--utility); font-size:12.5px; color:var(--ink-600);}

.panel{background:var(--white); border:1px solid var(--stone-200); border-radius:12px; margin-bottom:26px;}
.panel-head{display:flex; justify-content:space-between; align-items:center; padding:18px 22px; border-bottom:1px solid var(--stone-200);}
.panel-head h2{font-family:var(--display); font-size:17px; color:var(--navy-950); font-weight:700;}

.btn{
  font-family:var(--utility); font-size:13.5px; font-weight:700; padding:9px 16px; border-radius:7px;
  transition:background .2s, color .2s;
}
.btn-primary{background:var(--navy-950); color:var(--cream-50);}
.btn-primary:hover{background:var(--gold-500); color:var(--navy-950);}
.btn-gold{background:var(--gold-500); color:var(--navy-950);}
.btn-gold:hover{background:var(--gold-400);}
.btn-ghost{background:var(--stone-200); color:var(--ink-800);}
.btn-ghost:hover{background:var(--stone-300);}
.btn-sm{padding:6px 12px; font-size:12px;}
.btn-danger{background:#FBE8E4; color:#A23B2B;}
.btn-danger:hover{background:#F5D3CC;}

/* tabs (client segments) */
.seg-tabs{display:flex; gap:8px; padding:16px 22px 0;}
.seg-tab{
  font-family:var(--utility); font-size:13px; font-weight:600; color:var(--ink-600);
  padding:8px 16px; border-radius:20px; background:var(--stone-200);
}
.seg-tab.active{background:var(--navy-950); color:var(--gold-300);}

/* table */
.table-wrap{overflow-x:auto; padding:6px 22px 22px;}
table{width:100%; border-collapse:collapse; font-family:var(--utility); font-size:13.5px;}
thead th{
  text-align:right; font-weight:700; color:var(--ink-600); font-size:11.5px;
  letter-spacing:.02em; padding:10px 12px; border-bottom:2px solid var(--stone-200); white-space:nowrap;
}
tbody td{padding:13px 12px; border-bottom:1px solid var(--stone-200); vertical-align:middle;}
tbody tr:hover{background:var(--cream-100);}
.pill{display:inline-block; font-size:11px; font-weight:700; padding:3px 10px; border-radius:20px;}
.pill-sale{background:#E7F0EA; color:#2C6B45;}
.pill-rent{background:#E6EEF7; color:#2A5A93;}
.pill-buyer{background:#F0E9F9; color:#6A3FA0;}
.pill-renter{background:#E6EEF7; color:#2A5A93;}
.pill-seller{background:#FDF0E0; color:#A16A1B;}
.pill-new{background:#FBE8E4; color:#A23B2B;}
.pill-active{background:#E7F0EA; color:#2C6B45;}
.pill-match{background:#FDF3DC; color:#7A5C1A;}
.row-actions{display:flex; gap:6px;}
.empty-row{padding:34px; text-align:center; color:var(--ink-600); font-family:var(--utility); font-size:13.5px;}

/* modal */
.modal-overlay{
  position:fixed; inset:0; background:rgba(16,32,46,.55); backdrop-filter:blur(2px);
  display:none; align-items:center; justify-content:center; z-index:100; padding:20px;
}
.modal-overlay.open{display:flex;}
.modal{
  background:var(--white); border-radius:14px; width:100%; max-width:520px; max-height:88vh; overflow-y:auto;
  box-shadow:var(--shadow-pop);
}
.modal-head{display:flex; justify-content:space-between; align-items:center; padding:20px 24px; border-bottom:1px solid var(--stone-200);}
.modal-head h3{font-family:var(--display); font-size:18px; color:var(--navy-950);}
.modal-close{width:30px; height:30px; border-radius:50%; background:var(--stone-200); font-size:15px; line-height:1;}
.modal-close:hover{background:var(--stone-300);}
.modal-body{padding:22px 24px;}
.modal-body .field{margin-bottom:14px;}
.modal-body label{font-family:var(--utility); font-size:12px; font-weight:700; color:var(--ink-600); display:block; margin-bottom:6px;}
.modal-body input, .modal-body select, .modal-body textarea{
  width:100%; font-family:var(--body); font-size:14.5px; padding:11px 12px;
  border:1px solid var(--stone-300); border-radius:7px; background:var(--cream-50); color:var(--ink-800);
}
.modal-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.modal-foot{display:flex; justify-content:flex-end; gap:10px; padding:18px 24px; border-top:1px solid var(--stone-200);}
.checkbox-row{display:flex; gap:18px; margin-top:6px;}
.checkbox-row label{display:flex; align-items:center; gap:7px; font-weight:500; color:var(--ink-800);}
.checkbox-row input{width:auto;}

/* photo upload thumbnails (agent gallery) */
.photo-thumbs{display:flex; flex-wrap:wrap; gap:10px; margin-top:12px;}
.photo-thumb{position:relative; width:68px; height:68px; border-radius:8px; overflow:hidden; border:1px solid var(--stone-300);}
.photo-thumb img{width:100%; height:100%; object-fit:cover; display:block;}
.photo-thumb.primary::after{content:'ראשי'; position:absolute; bottom:0; right:0; left:0; background:rgba(16,32,46,.75); color:var(--gold-300); font-family:var(--utility); font-size:9px; text-align:center; padding:2px 0;}
.photo-thumb .remove-photo{position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:rgba(16,32,46,.75); color:#fff; font-size:11px; display:flex; align-items:center; justify-content:center; line-height:1;}
.photo-thumb .remove-photo:hover{background:#A23B2B;}

/* notes/history */
.notes-list{display:flex; flex-direction:column; gap:10px; margin-top:10px; max-height:180px; overflow-y:auto;}
.note-item{background:var(--cream-100); border-radius:8px; padding:10px 12px; font-size:13px;}
.note-item time{display:block; font-family:var(--utility); font-size:11px; color:var(--ink-600); margin-bottom:3px;}

/* matches view */
.match-picker{display:flex; gap:12px; align-items:flex-end; padding:20px 22px; flex-wrap:wrap;}
.match-picker .field{min-width:220px;}
.match-results{padding:0 22px 22px;}
.match-card{
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  border:1px solid var(--stone-200); border-radius:10px; padding:14px 16px; margin-bottom:10px;
}
.match-card .info h4{font-family:var(--display); font-size:15px; color:var(--navy-950); margin-bottom:4px;}
.match-card .info span{font-family:var(--utility); font-size:12.5px; color:var(--ink-600);}
.match-score{font-family:var(--utility); font-weight:700; font-size:12px; color:#2C6B45; background:#E7F0EA; padding:4px 10px; border-radius:20px; white-space:nowrap;}

.toast{
  position:fixed; bottom:24px; left:24px; z-index:200;
  background:var(--navy-950); color:var(--cream-50); font-family:var(--utility); font-size:13.5px;
  padding:13px 20px; border-radius:9px; box-shadow:var(--shadow-pop);
  display:flex; align-items:center; gap:10px;
  transform:translateY(20px); opacity:0; pointer-events:none; transition:transform .25s ease, opacity .25s ease;
}
.toast.show{transform:translateY(0); opacity:1;}
.toast .dot{width:8px; height:8px; border-radius:50%; background:var(--gold-500);}

@media (max-width:960px){
  .crm-shell{grid-template-columns:1fr;}
  .crm-side{position:static; height:auto; flex-direction:row; overflow-x:auto; padding:16px;}
  .crm-brand{display:none;}
  .crm-side-foot{display:none;}
  .crm-main{padding:24px 18px 60px;}
  .stat-row{grid-template-columns:1fr 1fr;}
  .modal-grid{grid-template-columns:1fr;}
}