/* === app.css (RTL + Mobile-first) === */
:root{
  --card:#ffffff; --text:#1b1b1f; --muted:#6b7280; --accent:#17296b; --gold:#d39a1a; --bg:#f6f7fb;
  --radius:14px; --shadow:0 8px 24px rgba(0,0,0,.06); --overlay:rgba(3,8,23,.45);
}
@media (prefers-color-scheme: dark){
  :root{ --card:#0f1220; --text:#f4f5f7; --muted:#9aa3b2; --bg:#060913; --shadow:0 10px 36px rgba(0,0,0,.5) }
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Arial;background:var(--bg);color:var(--text)}
img{max-width:100%;display:block}
a{text-decoration:none}

/* Cards / inputs / buttons */
.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:clamp(14px,4vw,20px)}
input[type=text],input[type=password],input[type=email],input[type=tel]{
  width:100%;padding:14px 12px;border:1px solid #dcdfe4;border-radius:12px;background:#fff;font-size:16px
}
@media (prefers-color-scheme: dark){
  input[type=text],input[type=password],input[type=email],input[type=tel]{background:#0b0e1a;border-color:#1e2333;color:var(--text)}
}
.btn{display:inline-block;padding:12px 16px;border-radius:12px;border:0;cursor:pointer;background:var(--accent);color:#fff;font-weight:800;font-size:16px}
.btn.block{width:100%}
.btn.gold{background:var(--gold)}
.btn:active{transform:translateY(1px)}
.small{color:var(--muted);font-size:clamp(13px,3.6vw,14px)}
.title{font-size:clamp(16px,4.6vw,20px);font-weight:800}

/* Header + hamburger */
.app-header{
  background:var(--accent);color:#fff;padding:12px clamp(12px,4vw,24px);
  display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:1000
}
.app-header img.logo{width:44px;height:44px;object-fit:contain;border-radius:10px}
.app-header .ttl{font-weight:800;font-size:clamp(16px,4.6vw,20px)}
.hamburger{margin-inline-start:auto;width:44px;height:44px;border-radius:10px;border:0;background:rgba(255,255,255,.12);display:grid;place-items:center;color:#fff;font-size:22px;cursor:pointer}

/* Drawer (RTL) */
.drawer{position:fixed;inset-block:0;inset-inline-end:-300px;width:280px;background:var(--card);box-shadow:var(--shadow);z-index:1002;padding:16px;transition:transform .25s ease, inset-inline-end .25s ease;border-start-start-radius:14px;border-end-start-radius:14px}
.drawer.open{inset-inline-end:0}
.drawer .nav a{display:block;padding:12px;border-radius:10px;color:var(--text)}
.drawer .nav a:hover{background:rgba(0,0,0,.06)}
@media (prefers-color-scheme: dark){ .drawer .nav a:hover{background:rgba(255,255,255,.08)} }
.overlay{position:fixed;inset:0;background:var(--overlay);backdrop-filter:saturate(120%) blur(2px);opacity:0;pointer-events:none;transition:opacity .2s ease;z-index:1001}
.overlay.show{opacity:1;pointer-events:auto}

/* Drawer header + close button */
.drawer .head{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-bottom:10px;
}
.drawer .head .title{font-weight:800; font-size:16px}
.drawer .close{
  width:36px; height:36px; border:0; border-radius:10px;
  background:rgba(0,0,0,.06); cursor:pointer; font-size:18px;
  display:grid; place-items:center;
}
@media (prefers-color-scheme: dark){
  .drawer .close{ background:rgba(255,255,255,.08); color:#fff }
}
.drawer .nav{display:grid; gap:6px}


/* Splash */
#splash{position:fixed;inset:0;background:var(--bg);display:grid;place-items:center;z-index:40;transition:opacity .35s ease}
#splash .box{display:grid;place-items:center;gap:10px;transform:translateY(10px);animation:rise .6s ease forwards}
#splash img{width:96px;height:96px;object-fit:contain;border-radius:14px}
#splash .brand{color:var(--accent);font-weight:900;font-size:20px}
@keyframes rise{to{transform:none;opacity:1}}
.hide{opacity:0;pointer-events:none}

/* Toasts */
.toast-wrap{position:fixed;inset-inline:0;inset-block-end:16px;display:grid;place-items:center;z-index:50;padding:0 12px}
.toast{background:var(--card);color:var(--text);border-radius:12px;box-shadow:var(--shadow);padding:10px 14px;min-width:220px;max-width:90vw;display:flex;gap:10px;align-items:center;opacity:0;transform:translateY(8px);animation:toast-in .25s ease forwards}
.toast.success{border-inline-start:6px solid #22c55e}
.toast.error{border-inline-start:6px solid #ef4444}
@keyframes toast-in{to{opacity:1;transform:none}}

/* Containers */
.main-pad{padding:clamp(14px,4vw,24px)}



/* ===== Mobile-friendly table (cards) ===== */
@media (max-width: 640px) {
  table thead { display: none; }
  table, table tbody, table tr, table td { display: block; width: 100%; }
  table tr { background: var(--card); border-radius: 12px; box-shadow: var(--shadow); margin: 10px 0; padding: 8px; }
  table td { border: 0 !important; padding: 6px 8px !important; }
  table td::before {
    content: attr(data-label);
    display: block; font-size: 12px; color: var(--muted); margin-bottom: 2px;
  }
  table td:last-child { margin-top: 8px; }
}


/* ===== Families Cards (accordion) ===== */
.fam-toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:8px 0 12px}
.fam-toolbar input[type=search]{flex:1;min-width:180px;padding:12px;border:1px solid #dcdfe4;border-radius:10px;background:#fff;font-size:15px}
@media (prefers-color-scheme: dark){ .fam-toolbar input[type=search]{background:#0b0e1a;border-color:#1e2333;color:var(--text)} }
.fam-list{display:grid;gap:10px}
.family-card{background:var(--card);border-radius:12px;box-shadow:var(--shadow);overflow:hidden}
.family-card .head{
  display:flex;gap:10px;align-items:center;cursor:pointer;padding:12px 14px
}
.family-card .name{font-weight:900}
.family-card .meta{color:var(--muted);font-size:13px;margin-inline-start:auto;display:flex;gap:10px;align-items:center}
.badge{font-size:12px;padding:4px 8px;border-radius:999px;background:rgba(0,0,0,.06)}
@media (prefers-color-scheme: dark){ .badge{background:rgba(255,255,255,.08)} }
.chev{transition:transform .2s ease}
.family-card.open .chev{transform:rotate(180deg)}
.family-card .body{display:none;padding:12px 14px;border-top:1px solid rgba(0,0,0,.06)}
@media (prefers-color-scheme: dark){ .family-card .body{border-top-color:rgba(255,255,255,.08)} }
.family-card.open .body{display:block}
.body .row{display:grid;grid-template-columns:1fr;gap:8px}
@media (min-width:640px){ .body .row{grid-template-columns:repeat(2,1fr)} }
.kv{background:rgba(0,0,0,.03);border-radius:10px;padding:8px}
@media (prefers-color-scheme: dark){ .kv{background:rgba(255,255,255,.04)} }
.kv .k{font-size:12px;color:var(--muted)}
.kv .v{font-weight:700}
.body .actions{margin-top:10px;display:flex;gap:8px;flex-wrap:wrap}



/* ===== Toolbar & Buttons - Mobile First ===== */
.fam-toolbar{
  display:grid; gap:8px; grid-template-columns:1fr 1fr;
  align-items:center; margin:8px 0 12px;
}
.fam-toolbar input[type=search]{grid-column:1/-1}
.fam-toolbar select{width:100%}
.fam-toolbar .btn{width:100%; padding:12px 14px; border-radius:12px; font-weight:800}
@media (min-width:640px){
  .fam-toolbar{grid-template-columns:1fr auto auto auto}
  .fam-toolbar input[type=search]{grid-column:auto}
}

/* ===== Pretty Family Cards ===== */
.fam-list{display:grid; gap:12px}
.family-card{
  position:relative; background:var(--card); border-radius:16px; box-shadow:var(--shadow);
  overflow:hidden; border:1px solid rgba(0,0,0,.04);
}
@media (prefers-color-scheme: dark){
  .family-card{ border-color: rgba(255,255,255,.06); }
}
.family-card .head{
  display:flex; gap:10px; align-items:center; padding:14px 16px; cursor:pointer;
  background:linear-gradient(180deg, rgba(23,41,107,.06), transparent);
}
.family-card .avatar{
  width:42px; height:42px; border-radius:12px; flex:0 0 auto;
  background:rgba(23,41,107,.12); display:grid; place-items:center; font-weight:900;
}
.family-card .name{font-weight:900; font-size:16px}
.family-card .meta{margin-inline-start:auto; display:flex; gap:8px; align-items:center; color:var(--muted); font-size:13px}
.badge{font-size:12px; padding:4px 8px; border-radius:999px; background:rgba(23,41,107,.1)}
@media (prefers-color-scheme: dark){ .badge{background:rgba(23,41,107,.22)} }
.chev{transition:transform .2s ease; font-weight:900}
.family-card.open .chev{transform:rotate(180deg)}

.family-card .body{display:none; padding:14px 16px; border-top:1px solid rgba(0,0,0,.06)}
@media (prefers-color-scheme: dark){ .family-card .body{border-top-color:rgba(255,255,255,.08)} }
.family-card.open .body{display:block}
.body .row{display:grid; grid-template-columns:1fr; gap:10px}
@media (min-width:640px){ .body .row{grid-template-columns:repeat(2,1fr)} }

.kv{background:rgba(0,0,0,.03); border-radius:12px; padding:10px}
@media (prefers-color-scheme: dark){ .kv{background:rgba(255,255,255,.05)} }
.kv .k{font-size:12px; color:var(--muted); margin-bottom:2px}
.kv .v{font-weight:700}

.body .actions{
  margin-top:12px; display:grid; grid-template-columns:1fr 1fr; gap:8px;
}
.body .actions .btn{width:100%; padding:12px 14px; border-radius:12px}
.body .actions .btn.danger{ background:#b91c1c }

/* כפתור עגול קטן לאייקון (אם נרצה בעתיד) */
.icon-btn{width:40px; height:40px; display:grid; place-items:center; border-radius:10px; background:rgba(0,0,0,.06); border:0}
@media (prefers-color-scheme: dark){ .icon-btn{background:rgba(255,255,255,.08)} }


/* === Families: final cards (override) === */
.fam-list{display:grid;gap:12px}

.fam-list .family-card{
  background:var(--card);
  border-radius:16px;
  box-shadow:var(--shadow);
  overflow:hidden;
  border:1px solid rgba(0,0,0,.06);
}
@media (prefers-color-scheme: dark){
  .fam-list .family-card{border-color:rgba(255,255,255,.10)}
}

/* Header: משבצת שמאלית + טקסט */
.fam-list .family-card .head{
  display:grid !important;                 /* מבטל flex ישן */
  grid-template-columns:120px 1fr;
  min-height:92px;
  cursor:pointer;
  direction:ltr;                            /* המשבצת נשארת שמאל */
  background:linear-gradient(180deg, rgba(23,41,107,.05), transparent);
  padding:0 !important;                     /* שלא יצטבר padding כפול */
}
.fam-list .family-card .thumb{
  background:linear-gradient(180deg,#e5e7eb,#dfe3ea);
}
@media (prefers-color-scheme: dark){
  .fam-list .family-card .thumb{background:linear-gradient(180deg,#1b2240,#0e1327)}
}

.fam-list .family-card .text{
  direction:rtl;
  padding:14px 16px;
  display:flex; align-items:center; gap:10px;
}
.fam-list .family-card .title{
  margin:0; font-weight:900; font-size:18px; line-height:1.25;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.fam-list .family-card .meta{
  margin-inline-start:auto; display:flex; gap:8px; align-items:center;
  font-size:13px; color:var(--muted);
}
.fam-list .badge{font-size:12px;padding:4px 8px;border-radius:999px;background:rgba(23,41,107,.12)}
@media (prefers-color-scheme: dark){ .fam-list .badge{background:rgba(23,41,107,.24)} }
.fam-list .chev{font-weight:900; transition:transform .2s ease}
.fam-list .family-card.open .chev{transform:rotate(180deg)}

/* Body */
.fam-list .family-card .body{
  display:block; padding:14px 16px; border-top:1px solid rgba(0,0,0,.06);
}
.fam-list .family-card[hidden] .body{ display:none }
@media (prefers-color-scheme: dark){ .fam-list .family-card .body{border-top-color:rgba(255,255,255,.10)} }
.fam-list .family-card:not(.open) .body{ display:none }

/* Key/Value grid */
.fam-list .body .grid{ display:grid; gap:10px; grid-template-columns:1fr }
@media (min-width:640px){ .fam-list .body .grid{ grid-template-columns:repeat(2,1fr) } }

.fam-list .kv{ background:rgba(0,0,0,.04); border-radius:12px; padding:10px 12px }
@media (prefers-color-scheme: dark){ .fam-list .kv{ background:rgba(255,255,255,.06) } }
.fam-list .kv .k{ font-size:12px; color:var(--muted); margin-bottom:2px }
.fam-list .kv .v{ font-weight:700; word-break:break-word }

.fam-list .actions{ margin-top:12px; display:grid; grid-template-columns:1fr 1fr; gap:8px }
.fam-list .actions .btn{ width:100%; padding:12px 14px; border-radius:12px }
.fam-list .actions .btn.danger{ background:#b91c1c }


/* --- Families: mobile name fix --- */
.fam-list .family-card .title{ min-width:0 } /* חשוב כדי שלא ייחתך שלא לצורך */

@media (max-width: 520px){
  .fam-list .family-card .head{
    grid-template-columns:90px 1fr;  /* היה 120px */
  }
  .fam-list .family-card .text{
    display:flex;
    flex-direction:column;           /* שם למעלה, מטא מתחת */
    align-items:flex-start;
    gap:6px;
  }
  .fam-list .family-card .title{
    white-space:normal;              /* מאפשר ירידת שורה לשם */
    font-size:18px;
    line-height:1.3;
  }
  .fam-list .family-card .meta{
    margin-inline-start:0;           /* לא “דוחף” את הכותרת */
    width:100%;
    display:flex;
    gap:8px;
    align-items:center;
    justify-content:flex-start;      /* תגית אזור + חץ */
  }
  .fam-list .family-card .meta .small{
    display:none;                    /* מסתיר "עודכן: …" במוביל; אפשר להסיר שורה זו אם תרצה */
  }
}

/* אופציונלי: במסכים ממש צרים – אפילו Thumb קטן יותר */
@media (max-width: 380px){
  .fam-list .family-card .head{ grid-template-columns:74px 1fr; }
  
  
  /* CSV button sizing */
.fam-toolbar .btn { width:100% }
@media (min-width:900px){
  .fam-toolbar { grid-template-columns: 1fr auto auto auto auto } /* חיפוש | אזור | הוספה | רענון | CSV/PDF */
  .fam-toolbar .btn { width:auto; min-width:110px }
  #btnExportFamilies { min-width:140px }
}

/* pretty select */
.select-wrap{
  position:relative; min-width:180px;
}
.select-wrap select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  padding:12px 36px 12px 12px; border:1px solid #dcdfe4; border-radius:12px; background:#fff;
  font-size:15px; color:var(--text); width:100%;
}
.select-wrap:after{
  content:"▾"; position:absolute; inset-inline-start:10px; inset-block:50%; transform:translateY(-50%);
  font-size:14px; color:var(--muted); pointer-events:none;
}
@media (prefers-color-scheme: dark){
  .select-wrap select{ background:#0b0e1a; border-color:#1e2333; color:var(--text) }
}

/* צ'קבוקסים בכרטיס */
.family-card .pick{
  width:20px; height:20px; accent-color:var(--accent);
  margin-inline-end:8px; flex:0 0 auto;
}

}

/* כפתור CSV – לא יתפוס רוחב מלא בדסקטופ */
.btn.btn-csv { width: 100%; }
@media (min-width: 1024px) {
  .btn.btn-csv { width: 100px; }
}

/* עיצוב סלקט של האזור */
.select-wrap{
  position:relative; width:100%;
}
.select-wrap select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  width:100%; padding:12px 40px 12px 12px;
  border:1px solid #dcdfe4; border-radius:10px; background:#fff; font-size:15px;
}
.select-wrap::before{
  content:"▾"; position:absolute; inset-inline-start:10px; inset-block:50%;
  transform:translateY(-50%); pointer-events:none; color:#6b7280; font-size:14px;
}
@media (prefers-color-scheme: dark){
  .select-wrap select{ background:#0b0e1a; border-color:#1e2333; color:var(--text); }
}

/* רווח קטן לצ'קבוקס בכרטיס */
.family-card .head .pick { margin-inline-end:8px; transform:translateY(1px); }


/* === Families: align header title when checkbox exists === */
.family-card .head{ position: relative; }              /* כדי שאבסולוט ידע על מה להתמקם */
.family-card .head .pick{
  position: absolute;
  inset-block-start: 10px;          /* למעלה */
  inset-inline-start: 10px;         /* בתחילת השורה (תומך RTL/LTR) */
  transform: none;
  z-index: 2;
}

/* הטקסט בכותרת – מיושר יפה, לא באמצע אנכי */
.family-card .text{
  display: flex;
  flex-direction: column;
  justify-content: center;          /* מרכז אנכי עדין */
  align-items: flex-start;          /* מיושר לימין ב-RTL בתוך הקונטיינר */
  gap: 6px;
}

/* שם המשפחה – לא יידחף מטה, שורות שבורות ייראו טוב */
.family-card .title{
  margin: 0;
  font-weight: 900;
  font-size: 18px;
  line-height: 1.25;
  white-space: normal;              /* לא לכפות שורה אחת */
}

/* קצת ריווח כדי שלא ייגע ב-checkbox */
.family-card .head{ padding: 14px 16px 14px 16px; }


/* ===== Date input like other fields ===== */
input[type=date]{
  width:100%;
  padding:14px 12px;
  border:1px solid #dcdfe4;
  border-radius:12px;
  background:#fff;
  font-size:16px;
  color:var(--text);
  /* כי המספרים/התאריך באנגלית – נוח להשאיר LTR בתוך קונטקסט RTL */
  direction:ltr;
  text-align:left;
}

/* Dark mode התאמות */
@media (prefers-color-scheme: dark){
  input[type=date]{
    background:#0b0e1a;
    border-color:#1e2333;
    color:var(--text);
  }
}

/* סמל הלוח שנה – קצת טיפוח */
input[type=date]::-webkit-calendar-picker-indicator{
  opacity:.75;
  cursor:pointer;
  padding:4px;
  border-radius:8px;
}
input[type=date]:hover::-webkit-calendar-picker-indicator{ opacity:1; }

/* שיפור מיושר תוכן בחלק מהדפדפנים */
input[type=date]::-webkit-datetime-edit{ padding:0; }