/* ============================================================
   כרטסת — מערכת ניהול אנשי קשר
   Design tokens: card-catalog / rolodex concept
   ============================================================ */

:root{
  --ink:        #1B2430;
  --ink-soft:   #2A3444;
  --ink-line:   #3A4658;
  --paper:      #FAF8F4;
  --paper-dim:  #F1EDE5;
  --card-line:  #E3DDD0;
  --teal:       #2F7A6F;
  --teal-dark:  #235D54;
  --teal-tint:  #E4F0EE;
  --amber:      #C98A2E;
  --amber-tint: #FBF0DD;
  --coral:      #C1584B;
  --coral-tint: #FBE9E6;
  --ink-text:   #21262E;
  --muted:      #6B7280;
  --radius-lg:  16px;
  --radius-md:  10px;
  --radius-sm:  6px;
  --shadow-card: 0 1px 2px rgba(27,36,48,.06), 0 8px 24px -12px rgba(27,36,48,.18);
  --shadow-pop:  0 20px 60px -15px rgba(27,36,48,.45);
  --font-display: "Frank Ruhl Libre", "Times New Roman", serif;
  --font-body: "Heebo", "Segoe UI", sans-serif;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  font-family:var(--font-body);
  background:var(--ink);
  color:var(--ink-text);
  direction:rtl;
  -webkit-font-smoothing:antialiased;
}
button{font-family:inherit;}
::selection{background:var(--teal-tint);color:var(--teal-dark);}

/* ---------- App shell ---------- */
#app{
  display:flex;
  height:100vh;
  overflow:hidden;
}

/* ---------- Sidebar ---------- */
.sidebar{
  width:220px;
  flex:0 0 220px;
  background:linear-gradient(180deg,var(--ink) 0%, var(--ink-soft) 100%);
  color:#EDEFF2;
  display:flex;
  flex-direction:column;
  padding:22px 16px;
  border-left:1px solid var(--ink-line);
}
.brand{
  font-family:var(--font-display);
  font-size:22px;
  font-weight:600;
  letter-spacing:.3px;
  margin:4px 6px 2px;
  color:#fff;
}
.brand small{
  display:block;
  font-family:var(--font-body);
  font-size:11px;
  font-weight:400;
  color:#98A2B3;
  margin-top:2px;
  letter-spacing:.2px;
}
.nav{
  margin-top:28px;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.nav-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 12px;
  border-radius:var(--radius-sm);
  color:#C7CDD8;
  cursor:pointer;
  font-size:14px;
  font-weight:500;
  transition:background .15s, color .15s;
  border:none;
  background:none;
  width:100%;
  text-align:right;
}
.nav-item .ic{font-size:16px;width:20px;text-align:center;}
.nav-item:hover{background:rgba(255,255,255,.06);color:#fff;}
.nav-item.active{background:var(--teal);color:#fff;}
.nav-badge{
  margin-right:auto;
  background:rgba(255,255,255,.14);
  border-radius:20px;
  font-size:11px;
  padding:1px 8px;
  min-width:18px;
  text-align:center;
}
.nav-item.active .nav-badge{background:rgba(255,255,255,.28);}
.nav-item.warn .nav-badge{background:var(--amber);color:#fff;}

.sidebar-footer{
  margin-top:auto;
  padding:10px 6px;
  font-size:11px;
  color:#6B7686;
  line-height:1.6;
}

/* ---------- Main area ---------- */
.main{
  flex:1;
  display:flex;
  flex-direction:column;
  background:var(--paper);
  overflow:hidden;
}

.topbar{
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px 24px;
  background:#fff;
  border-bottom:1px solid var(--card-line);
  flex-wrap:wrap;
}
.topbar h1{
  font-family:var(--font-display);
  font-size:19px;
  font-weight:600;
  margin:0;
  color:var(--ink);
}
.topbar .spacer{flex:1;}

.btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:9px 16px;
  border-radius:999px;
  border:1px solid var(--card-line);
  background:#fff;
  color:var(--ink-text);
  font-size:13.5px;
  font-weight:600;
  cursor:pointer;
  transition:transform .1s, box-shadow .15s, background .15s, border-color .15s;
  white-space:nowrap;
}
.btn:hover{background:var(--paper-dim);}
.btn:active{transform:scale(.97);}
.btn:disabled{opacity:.4;cursor:not-allowed;}
.btn:disabled:hover{background:#fff;}
.btn-primary{background:var(--teal);border-color:var(--teal);color:#fff;}
.btn-primary:hover{background:var(--teal-dark);}
.btn-danger{background:var(--coral);border-color:var(--coral);color:#fff;}
.btn-danger:hover{background:#a5453a;}
.btn-ghost{background:transparent;border-color:transparent;color:var(--muted);}
.btn-ghost:hover{background:var(--paper-dim);}
.btn-sm{padding:6px 12px;font-size:12.5px;}

/* ---------- Content ---------- */
.content{
  flex:1;
  overflow-y:auto;
  padding:22px 24px 60px;
}
.page{display:none;}
.page.active{display:block;}

.toolrow{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:18px;
  flex-wrap:wrap;
}
.search-box{
  flex:1;
  min-width:220px;
  position:relative;
}
.search-box input{
  width:100%;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid var(--card-line);
  background:#fff;
  font-size:14px;
  font-family:inherit;
}
.search-box input:focus{outline:2px solid var(--teal);outline-offset:1px;}

/* ---------- Index cards (contacts) ---------- */
.card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(270px,1fr));
  gap:14px;
}
.contact-card{
  background:#fff;
  border:1px solid var(--card-line);
  border-radius:var(--radius-md);
  padding:14px 16px 14px 34px;
  box-shadow:var(--shadow-card);
  position:relative;
  border-top:3px solid var(--teal);
}
.contact-card.selected{
  border-color:var(--teal);
  box-shadow:0 0 0 2px var(--teal) inset;
}
.contact-card .ccheck{
  position:absolute;
  top:14px;
  left:12px;
  width:16px;
  height:16px;
  cursor:pointer;
}
.contact-card .cname{
  font-family:var(--font-display);
  font-size:16.5px;
  font-weight:600;
  color:var(--ink);
  margin:0 0 6px;
}
.contact-card .cfield{
  font-size:12.5px;
  color:var(--muted);
  display:flex;
  gap:6px;
  margin:3px 0;
  align-items:flex-start;
}
.contact-card .cfield b{color:#8B93A0;font-weight:600;min-width:34px;}
.contact-card .cactions{
  display:flex;
  gap:6px;
  margin-top:10px;
  padding-top:10px;
  border-top:1px dashed var(--card-line);
}
.tag{
  display:inline-block;
  font-size:10.5px;
  background:var(--paper-dim);
  color:var(--muted);
  padding:2px 7px;
  border-radius:999px;
  margin-inline-end:4px;
}

.empty-state{
  text-align:center;
  padding:70px 20px;
  color:var(--muted);
}
.empty-state .ic{font-size:38px;margin-bottom:10px;}
.empty-state h3{font-family:var(--font-display);color:var(--ink);font-size:19px;margin:0 0 6px;}

/* ---------- Panels / forms ---------- */
.panel{
  background:#fff;
  border:1px solid var(--card-line);
  border-radius:var(--radius-lg);
  padding:20px 22px;
  box-shadow:var(--shadow-card);
  margin-bottom:18px;
}
.panel h2{
  font-family:var(--font-display);
  font-size:17px;
  margin:0 0 4px;
  color:var(--ink);
}
.panel .hint{font-size:12.5px;color:var(--muted);margin:0 0 16px;}

.field-row{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:12px;}
.field{flex:1;min-width:160px;display:flex;flex-direction:column;gap:5px;}
.field label{font-size:12px;font-weight:600;color:var(--muted);}
.field select,.field input[type=text]{
  padding:9px 12px;
  border-radius:var(--radius-sm);
  border:1px solid var(--card-line);
  font-size:13.5px;
  font-family:inherit;
  background:#fff;
}
.check-row{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--ink-text);}

.preset-row{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 16px;}
.preset-chip{
  border:1px dashed var(--card-line);
  background:var(--paper-dim);
  border-radius:999px;
  padding:6px 13px;
  font-size:12.5px;
  cursor:pointer;
  color:var(--ink-text);
}
.preset-chip:hover{border-color:var(--teal);color:var(--teal-dark);}

/* ---------- Duplicate groups ---------- */
.dupe-group{
  background:#fff;
  border:1px solid var(--card-line);
  border-radius:var(--radius-md);
  margin-bottom:12px;
  overflow:hidden;
}
.dupe-head{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 16px;
  background:var(--paper-dim);
  border-bottom:1px solid var(--card-line);
}
.dupe-head b{font-family:var(--font-display);font-size:14.5px;}
.dupe-head .spacer{flex:1;}
.dupe-stack{padding:10px 16px;display:flex;flex-direction:column;gap:6px;}
.dupe-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border-radius:var(--radius-sm);
  border:1px solid var(--card-line);
  font-size:13px;
}
.dupe-item .di-name{font-weight:600;min-width:120px;}
.dupe-item .di-meta{color:var(--muted);font-size:12px;flex:1;}
.dupe-item.keep{border-color:var(--teal);background:var(--teal-tint);}

/* ---------- Modal ---------- */
.modal-backdrop{
  position:fixed;inset:0;
  background:rgba(20,26,34,.55);
  display:none;
  align-items:center;justify-content:center;
  z-index:100;
  padding:20px;
}
.modal-backdrop.show{display:flex;}
.modal{
  background:#fff;
  border-radius:var(--radius-lg);
  max-width:520px;
  width:100%;
  max-height:85vh;
  display:flex;
  flex-direction:column;
  box-shadow:var(--shadow-pop);
  overflow:hidden;
}
.modal-head{
  padding:20px 24px 12px;
  border-bottom:1px solid var(--card-line);
}
.modal-head h3{
  font-family:var(--font-display);
  font-size:18px;
  margin:0 0 6px;
  color:var(--ink);
}
.modal-head p{margin:0;font-size:13px;color:var(--muted);}
.modal-body{padding:16px 24px;overflow-y:auto;flex:1;}
.modal-foot{
  padding:14px 24px;
  border-top:1px solid var(--card-line);
  display:flex;
  gap:10px;
  justify-content:flex-start;
}
.details-toggle{
  font-size:12.5px;
  color:var(--teal-dark);
  cursor:pointer;
  text-decoration:underline;
  margin-top:6px;
  display:inline-block;
}
.details-list{
  margin-top:10px;
  border:1px solid var(--card-line);
  border-radius:var(--radius-sm);
  max-height:220px;
  overflow-y:auto;
  display:none;
}
.details-list.show{display:block;}
.details-list .drow{
  padding:8px 12px;
  font-size:12.5px;
  border-bottom:1px solid var(--card-line);
  display:flex;
  gap:8px;
}
.details-list .drow:last-child{border-bottom:none;}
.drow .before{color:var(--coral);text-decoration:line-through;}
.drow .after{color:var(--teal-dark);font-weight:600;}
.drow .arrow{color:var(--muted);}

/* ---------- Column mapping modal ---------- */
.map-table{width:100%;border-collapse:collapse;font-size:13px;}
.map-table th{text-align:right;font-size:11.5px;color:var(--muted);padding:6px 8px;}
.map-table td{padding:6px 8px;border-top:1px solid var(--card-line);}
.map-table select{width:100%;padding:6px 8px;border-radius:var(--radius-sm);border:1px solid var(--card-line);font-family:inherit;}
.map-sample{color:var(--muted);font-size:11.5px;}

/* ---------- Toast ---------- */
#toast-wrap{
  position:fixed;bottom:20px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;gap:8px;z-index:200;
  align-items:center;
}
.toast{
  background:var(--ink);
  color:#fff;
  padding:11px 20px;
  border-radius:999px;
  font-size:13px;
  box-shadow:var(--shadow-pop);
  display:flex;align-items:center;gap:10px;
  animation:toast-in .2s ease;
}
.toast.ok{background:var(--teal-dark);}
.toast.warn{background:var(--amber);}
.toast.err{background:var(--coral);}
@keyframes toast-in{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}

/* ---------- Misc ---------- */
.count-pill{
  background:var(--paper-dim);
  border-radius:999px;
  padding:3px 11px;
  font-size:12px;
  color:var(--muted);
  font-weight:600;
}
.drop-zone{
  border:2px dashed var(--card-line);
  border-radius:var(--radius-lg);
  padding:50px 20px;
  text-align:center;
  color:var(--muted);
  transition:border-color .15s,background .15s;
}
.drop-zone.drag{border-color:var(--teal);background:var(--teal-tint);}
.drop-zone .ic{font-size:34px;margin-bottom:8px;}
.hidden{display:none !important;}

@media (max-width:760px){
  .sidebar{width:76px;flex-basis:76px;padding:16px 8px;}
  .brand,.nav-item span:not(.ic),.sidebar-footer{display:none;}
  .nav-item{justify-content:center;}
}