/* ═══════════════════════════════════════════════════════
   components.css — buttons, badges, cards, tables, modals
   ═══════════════════════════════════════════════════════ */

/* ── Stat cards ─────────────────────────────────── */
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:22px}
.stat-card{
  background:#fff;border-radius:14px;padding:22px 20px;
  box-shadow:0 1px 4px rgba(0,0,0,.06);display:flex;align-items:center;gap:16px
}
.stat-icon-box{
  width:52px;height:52px;border-radius:14px;display:flex;
  align-items:center;justify-content:center;font-size:24px;flex-shrink:0
}
.stat-label{font-size:15px;color:#9CA3AF;font-weight:600;margin-bottom:4px;text-transform:uppercase;letter-spacing:.5px}
.stat-value{font-size:36px;font-weight:800;color:#111827;line-height:1}

/* ── Toolbar ─────────────────────────────────────── */
/* Sticky so search/filters stay accessible while scrolling rows */
.toolbar{
  display:flex;gap:10px;margin-bottom:18px;align-items:center;flex-wrap:wrap;
  position:sticky;top:0;z-index:20;background:#F3F4F6;
  padding:12px 0;margin-top:-12px;
  border-bottom:1px solid #E5E7EB
}
.search-input{
  flex:1;min-width:200px;padding:12px 16px;border:2px solid #E5E7EB;border-radius:10px;
  font-size:17px;font-family:'Heebo',sans-serif;outline:none;transition:border-color .2s
}
.search-input:focus{border-color:#2563EB}
.filter-select{
  padding:12px 16px;border:2px solid #E5E7EB;border-radius:10px;
  font-size:17px;font-family:'Heebo',sans-serif;outline:none;background:#fff;cursor:pointer
}
.filter-select:focus{border-color:#2563EB}

/* ── Table ──────────────────────────────────────── */
/* overflow:visible so sticky thead can stick to viewport, not card */
.table-card{background:#fff;border-radius:14px;box-shadow:0 1px 4px rgba(0,0,0,.06);overflow:visible}
table{width:100%;border-collapse:collapse}
thead th{
  background:#F9FAFB;padding:13px 16px;text-align:right;font-size:17px;
  font-weight:700;color:#9CA3AF;text-transform:uppercase;letter-spacing:.5px;
  border-bottom:1px solid #E5E7EB;white-space:nowrap;
  /* Sticky just below the toolbar — together they take ~115px which is well under 1/3 of screen */
  position:sticky;top:74px;z-index:15
}
/* round the top corners of the first/last header cells to match the card */
thead tr:first-child th:first-child{border-top-right-radius:14px}
thead tr:first-child th:last-child{border-top-left-radius:14px}
tbody tr{border-bottom:1px solid #F3F4F6;cursor:pointer;transition:background .1s}
tbody tr:hover{background:#F9FAFB}
tbody tr:last-child{border-bottom:none}
td{padding:15px 16px;font-size:17px;vertical-align:middle}
.td-name{font-weight:600;color:#111827}
.td-e{cursor:default;position:relative}
.td-e:hover{background:rgba(37,99,235,.05)!important;box-shadow:inset 0 0 0 1px rgba(37,99,235,.18)}
.td-e.editing{background:#EFF6FF!important;box-shadow:inset 0 0 0 2px #2563EB}
.td-e input,.td-e select{width:100%;font-family:Heebo,sans-serif;font-size:17px;color:#111827;border:none;outline:none;background:transparent;direction:rtl;padding:0}

/* ── Badges ─────────────────────────────────────── */
.badge{display:inline-block;padding:5px 13px;border-radius:20px;font-size:15px;font-weight:700;white-space:nowrap}
/* candidate statuses — actual Airtable values */
.s-עדיין-לא-שומעים{background:#FEF3C7;color:#92400E}
.s-שומעים{background:#DBEAFE;color:#1E40AF}
.s-בתהליך{background:#F3E8FF;color:#6B21A8}
.s-מאורס,.s-מאורסת{background:#D1FAE5;color:#065F46}
.s-לא-פעיל,.s-לא_פעיל{background:#F3F4F6;color:#6B7280}
/* legacy */
.s-פעיל{background:#D1FAE5;color:#065F46}
.s-בשידוך{background:#DBEAFE;color:#1E40AF}
.s-ממתין{background:#FEF3C7;color:#92400E}
.s-נסגר{background:#FEE2E2;color:#991B1B}
/* click-to-edit field values */
.fv-click{cursor:pointer;padding:3px 7px;border-radius:7px;min-height:22px;transition:background .12s;display:block}
.fv-click:hover{background:#EFF6FF}
/* kept for multi-select edit links */
.edit-pen{opacity:0;transition:opacity .15s;cursor:pointer;font-size:17px;margin-right:5px;user-select:none}
.info-item:hover .edit-pen{opacity:1}
/* match statuses — actual Airtable values */
.s-הוצע{background:#F3E8FF;color:#6B21A8}
.s-הסכמה-חד-צדדית{background:#FEF9C3;color:#854D0E}
.s-הסכמה-הדדית{background:#DBEAFE;color:#1E40AF}
.s-משא-ומתן{background:#EDE9FE;color:#5B21B6}
.s-דור-ישרים{background:#FEF3C7;color:#92400E}
.s-פגישת-הורים{background:#FFEDD5;color:#9A3412}
.s-פגישות{background:#FEF9C3;color:#854D0E}
.s-אירוסין{background:#D1FAE5;color:#065F46}
.s-לא-יצא{background:#FEE2E2;color:#991B1B}
/* task statuses */
.s-פתוח{background:#FEF3C7;color:#92400E}
.s-בוצע{background:#D1FAE5;color:#065F46}
.s-בטל{background:#F3F4F6;color:#6B7280}

/* ── Buttons ─────────────────────────────────────── */
.btn{
  padding:11px 20px;border-radius:9px;font-size:16px;font-weight:700;
  font-family:'Heebo',sans-serif;cursor:pointer;border:none;
  transition:all .12s;white-space:nowrap;display:inline-flex;align-items:center;gap:6px
}
.btn-primary{background:#2563EB;color:#fff}
.btn-primary:hover{background:#1D4ED8}
.btn-secondary{background:#F3F4F6;color:#374151}
.btn-secondary:hover{background:#E5E7EB}
.btn-success{background:#10B981;color:#fff}
.btn-success:hover{background:#059669}
.btn-sm{padding:8px 15px;font-size:15px}

/* ── Row navigation arrow (opens record card) ───── */
.row-arrow{
  cursor:pointer;font-size:30px;color:#6B7280;font-weight:700;line-height:1;
  display:inline-block;padding:6px 12px;border-radius:8px;transition:all .15s;
  user-select:none
}
.row-arrow:hover{color:#2563EB;background:#EFF6FF;transform:translateX(-3px)}

/* ── Related rows ────────────────────────────────── */
.related-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:11px 0;border-bottom:1px solid #F3F4F6;cursor:pointer;transition:color .1s
}
.related-row:last-child{border-bottom:none}
.related-row:hover .related-name{color:#2563EB}
.related-name{font-size:17px;font-weight:600;color:#111827}
.related-meta{font-size:15px;color:#9CA3AF;margin-top:2px}
.no-related{color:#9CA3AF;font-size:17px;padding:8px 0}

/* ── Inline add-row ─────────────────────────────── */
.tr-add td{color:#9CA3AF;font-style:italic;border-top:1px dashed #E5E7EB!important;cursor:pointer;transition:background .1s}
.tr-add:hover td{background:#F9FAFB}
.tr-add.editing td{background:#F0FDF4;cursor:default;font-style:normal}
.tr-add input,.tr-add select{width:100%;font-family:Heebo,sans-serif;font-size:17px;color:#111827;
  border:none;outline:none;background:transparent;direction:rtl;padding:0}
.tr-add input:focus{background:#DBEAFE;border-radius:4px;padding:1px 5px}
.add-row-btns{display:flex;gap:5px;justify-content:center}
.add-row-btns button{border:none;border-radius:6px;padding:6px 14px;cursor:pointer;font-family:Heebo,sans-serif;font-size:15px;font-weight:700}

/* ── Modal ──────────────────────────────────────── */
.modal-overlay{
  position:fixed;inset:0;background:rgba(17,24,39,.4);
  display:flex;align-items:center;justify-content:center;z-index:500;
  backdrop-filter:blur(2px)
}
.modal{
  background:#fff;border-radius:18px;padding:30px;
  width:500px;max-width:94vw;max-height:90vh;overflow-y:auto;
  box-shadow:0 20px 60px rgba(0,0,0,.2)
}
.modal h3{font-size:22px;font-weight:800;margin-bottom:20px}
.modal textarea{
  width:100%;padding:14px 16px;border:2px solid #E5E7EB;border-radius:10px;
  font-family:'Heebo',sans-serif;font-size:17px;resize:vertical;min-height:130px;
  outline:none;line-height:1.6
}
.modal textarea:focus{border-color:#2563EB}
.modal-actions{display:flex;gap:10px;margin-top:18px}
.status-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:4px}
.status-opt{
  padding:13px 6px;border:2px solid #E5E7EB;border-radius:10px;text-align:center;
  cursor:pointer;font-size:16px;font-weight:600;transition:all .12s;color:#374151
}
.status-opt:hover{border-color:#93C5FD;background:#EFF6FF}
.status-opt.selected{border-color:#2563EB;background:#DBEAFE;color:#1E40AF}

/* ── Record expand modal ─────────────────────────── */
/* overlay covers only the main content area — sidebar stays outside, visible and unblurred */
.record-modal-overlay{position:fixed;left:0;top:0;bottom:0;right:260px;background:rgba(17,24,39,.52);display:flex;align-items:center;justify-content:center;z-index:300}
@media(max-width:820px){.record-modal-overlay{right:0}}
.record-modal{background:#fff;border-radius:18px;width:820px;max-width:98%;max-height:92vh;display:flex;flex-direction:column;box-shadow:0 25px 60px rgba(0,0,0,.28)}
.record-modal-header{position:sticky;top:0;background:#fff;z-index:10;border-bottom:1px solid #F3F4F6;padding:14px 20px;display:flex;align-items:center;justify-content:space-between;border-radius:18px 18px 0 0;flex-shrink:0}
.record-modal-body{padding:24px;overflow-y:auto;flex:1}
.rmh-icon{cursor:pointer;color:#9CA3AF;font-size:20px;padding:6px 11px;border-radius:7px;transition:background .12s;user-select:none}
.rmh-icon:hover{background:#F3F4F6;color:#374151}
/* nav peek — sidebar highlight when modal open (sidebar is outside the overlay so clearly visible) */
@keyframes peek-pulse{0%,100%{background:#DCFCE7}50%{background:#BBF7D0}}
@keyframes mtv-pop{0%{opacity:0;transform:scale(.7) translateY(30px)}100%{opacity:1;transform:scale(1) translateY(0)}}
.nav-item.nav-peek{animation:peek-pulse 1.4s ease-in-out 3;background:#DCFCE7;color:#166534;border-right:4px solid #16A34A;font-weight:700;font-size:18px}
.nav-item.nav-peek .nav-icon{font-size:20px}