:root{
  --bg:#0b1020; --panel:#131a2b; --panel-2:#0f1424; --txt:#e6e9f2; --muted:#9aa3b2;
  --brand:#6c7cff; --brand-2:#8b9bff; --ok:#2ecc71; --warn:#ffbe55; --err:#ff5c5c;
  --card-bd:rgba(255,255,255,.06); --shadow:0 10px 30px rgba(0,0,0,.35);
  --radius:16px; --radius-sm:12px; --gap:16px; --gap-sm:10px;
  --font:400 14px/1.5 "Heebo","Rubik","Segoe UI",system-ui,Arial;
}
*{box-sizing:border-box} html,body{height:100%}
body{margin:0;background:linear-gradient(180deg,#0b1020 0%,#0a0f1f 100%);color:var(--txt);font:var(--font)}
a{color:inherit;text-decoration:none}
.container{max-width:1280px;margin:0 auto;padding:20px}
.topbar{position:sticky;top:0;z-index:1000;backdrop-filter:saturate(140%) blur(10px);background:rgba(11,16,32,.7);border-bottom:1px solid var(--card-bd)}
.topbar-inner{display:flex;align-items:center;gap:16px;padding:12px 20px;}
.brand{display:flex;align-items:center;gap:10px}
.brand-badge{width:32px;height:32px;border-radius:10px;background:linear-gradient(135deg,var(--brand),var(--brand-2));box-shadow:var(--shadow)}
.brand-title{font-weight:800;letter-spacing:.3px}
.nav{display:flex;gap:6px;margin-inline-start:12px}
.nav a{padding:8px 12px;border-radius:10px;color:var(--muted);border:1px solid transparent}
.nav a.active{color:#fff;border-color:var(--card-bd);background:var(--panel)}
.topbar-tools{margin-inline-start:auto;display:flex;align-items:center;gap:10px}
.search{background:var(--panel);border:1px solid var(--card-bd);border-radius:12px;padding:6px 10px;width:240px}
.btn{cursor:pointer;border:1px solid var(--card-bd);background:var(--panel);color:#fff;padding:8px 12px;border-radius:12px;transition:.15s}
.btn:hover{transform:translateY(-1px)} .btn.primary{background:linear-gradient(135deg,var(--brand),var(--brand-2));border-color:transparent}
.btn.ghost{background:transparent} .badge{padding:4px 10px;border-radius:999px;border:1px solid var(--card-bd);color:var(--muted);font-weight:600}
.page{padding:24px} .h1{font-weight:800;font-size:24px;margin:0 0 8px} .h2{font-weight:800;font-size:18px;margin:0 0 8px;color:#fff} .lead{color:var(--muted);margin:0 0 20px}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.card{background:linear-gradient(180deg,var(--panel) 0%,var(--panel-2) 100%);border:1px solid var(--card-bd);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}
.kpi{display:flex;flex-direction:column;gap:6px}.kpi .label{color:var(--muted);font-weight:600}.kpi .value{font-weight:900;font-size:22px}
.table{width:100%;border-collapse:separate;border-spacing:0 10px}
.table thead th{font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);text-align:right;padding:0 10px}
.table tbody tr{background:var(--panel);border:1px solid var(--card-bd);box-shadow:var(--shadow)}
.table tbody td{padding:10px;font-weight:500}
.row-actions{display:flex;gap:8px}
.pager{display:flex;gap:6px;align-items:center;justify-content:flex-end;margin-top:12px}
.form{display:grid;grid-template-columns:repeat(2,minmax(240px,1fr));gap:12px}
.field label{display:block;font-weight:700;margin:0 0 6px}
.input,select,textarea{width:100%;background:#0b1224;border:1px solid var(--card-bd);color:#fff;border-radius:12px;padding:10px}
.input:focus,select:focus,textarea:focus{outline:2px solid var(--brand)}
.sts-new{background:#1b2a4a;color:#c9d8ff;padding:3px 10px;border-radius:999px}
.sts-assigned{background:#1a3f2e;color:#c9ffd8;padding:3px 10px;border-radius:999px}
.sts-won{background:#123a22;color:#b4ffd1;padding:3px 10px;border-radius:999px}
.sts-lost{background:#3a1212;color:#ffc9c9;padding:3px 10px;border-radius:999px}
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;z-index:4000}
.modal{width:min(700px,96vw);background:var(--panel);border:1px solid var(--card-bd);border-radius:18px;box-shadow:var(--shadow);padding:16px}
.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.modal-actions{display:flex;gap:8px;justify-content:flex-start;margin-top:12px}
#toast-root{position:fixed;inset-inline-end:20px;inset-block-start:20px;z-index:5000;display:flex;flex-direction:column;gap:10px;pointer-events:none}
.toast{pointer-events:auto;min-width:300px;max-width:420px;padding:12px 14px;border-radius:14px;box-shadow:var(--shadow);border:1px solid var(--card-bd)}
.toast .title{font-weight:900;margin-bottom:4px}.toast .msg{opacity:.95}
.toast.info{background:#1a2a55;color:#e9f0ff}.toast.success{background:#0f2b1d;color:#dcffea}
.toast.warn{background:#422b0b;color:#ffe5bd}.toast.error{background:#3a1313;color:#ffd1d1}
.toast .x{float:inline-start;cursor:pointer;font-weight:900;margin-inline-start:6px}
.hint-error{color:#ffb4b4;font-size:12px;margin-top:4px} [aria-invalid="true"]{border-color:#ff7171 !important}
@media (max-width:1024px){.cards{grid-template-columns:repeat(2,1fr)} .form{grid-template-columns:1fr}}

/* Spinner */
.spinner{width:20px;height:20px;border:2px solid rgba(255,255,255,.25);border-top-color:#fff;border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.center{display:flex;align-items:center;justify-content:center;gap:8px}
/* Phase5 split/timeline */
.split{display:grid;grid-template-columns:360px 1fr;gap:16px}
.panel{background:linear-gradient(180deg,var(--panel) 0%, var(--panel-2) 100%);border:1px solid var(--card-bd);border-radius:16px;box-shadow:var(--shadow);padding:14px}
.kv{display:grid;grid-template-columns:120px 1fr;gap:8px 10px}
.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;border:1px solid var(--card-bd);background:#0b1224;color:#e6e9f2}
.wa-thread{display:flex;flex-direction:column;gap:10px;max-height:68vh;overflow:auto}
.msg{max-width:75%;padding:10px 12px;border-radius:14px;border:1px solid var(--card-bd)}
.msg.in{background:#0f1a33;align-self:flex-start}
.msg.out{background:#102919;align-self:flex-end}
.ev{font-size:12px;color:var(--muted)}
.statusbar{display:flex;gap:8px;flex-wrap:wrap}
/* Search bar group */
.input-group{display:flex;gap:8px;align-items:center}
.input-group .input{min-width:220px}
.input-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;border:1px solid var(--card-bd);background:#0b1224;color:#e6e9f2}
.input-pill{border-radius:999px}

/* --- Shell / Topbar --- */
.topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:10px 16px;background:#0f172a;color:#e5e7eb;box-shadow:0 2px 8px rgba(0,0,0,.1)}
.topbar .brand{font-weight:700}
.topbar .mainnav a{color:#cbd5e1;text-decoration:none;margin:0 8px;padding:6px 10px;border-radius:10px}
.topbar .mainnav a:hover{background:rgba(255,255,255,.08)}
.topbar .mainnav a.active{background:#3b82f6;color:#fff}
.view{padding:16px}

/* --- Shell / Topbar --- */
.topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:10px 16px;background:#0f172a;color:#e5e7eb;box-shadow:0 2px 8px rgba(0,0,0,.1)}
.topbar .brand{font-weight:700}
.topbar .mainnav a{color:#cbd5e1;text-decoration:none;margin:0 8px;padding:6px 10px;border-radius:10px}
.topbar .mainnav a:hover{background:rgba(255,255,255,.08)}
.topbar .mainnav a.active{background:#3b82f6;color:#fff}
.view{padding:16px}

/* ====== NAV v2 (RTL right-aligned, premium look) ====== */
.topbar{
  position:sticky;top:0;z-index:60;
  display:flex;align-items:center;justify-content:flex-end; /* הכל לימין */
  gap:16px;padding:10px 18px;
  background:rgba(7,12,24,.86);backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(255,255,255,.06);
}

/* שהתפריט יופיע ממש בצד ימין לפני הלוגו */
.topbar .mainnav{ order:1; display:flex; align-items:center; gap:4px; }
.topbar .brand{ order:2; font-weight:700; color:#e5e7eb; padding-inline-start:8px; }

.topbar .mainnav a{
  color:#cbd5e1; text-decoration:none;
  padding:8px 12px; border-radius:12px; font-weight:600;
  transition:transform .15s ease, background-color .15s ease, color .15s ease, box-shadow .15s ease;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}
.topbar .mainnav a:hover{
  background:rgba(255,255,255,.08);
  transform:translateY(-1px);
}
.topbar .mainnav a.active{
  background:#3b82f6; color:#fff; box-shadow:none;
}

/* רספונסיביות: במובייל התפריט מעט קומפקטי */
@media (max-width: 720px){
  .topbar{ gap:10px; padding:8px 12px; }
  .topbar .mainnav a{ padding:7px 10px; border-radius:10px; }
  .view{ padding:12px; }
}
/* ---- Nav fix: menu right, brand left ---- */
.topbar{display:flex;align-items:center;justify-content:flex-start;}
.topbar .brand{order:0;}
.topbar .mainnav{order:0; margin-left:auto;} /* דוחף את התפריט לקצה הימני */
.topbar .mainnav a{display:inline-flex; align-items:center;}
.brand-logo{height:28px;width:auto;display:block;border-radius:8px}
@media (max-width:720px){.brand-logo{height:22px}}
.topbar{display:flex;align-items:center;justify-content:flex-start;gap:12px}
.topbar .mainnav{margin-left:auto}
.topbar .mainnav a{display:inline-flex;align-items:center}
CSS
/* === Logo size override === */
.topbar{min-height:64px}
.topbar .brand{display:flex;align-items:center}
.brand-logo{
  height:44px;            /* דסקטופ */
  width:auto; display:block; border-radius:8px;
  image-rendering:auto; object-fit:contain;
}
@media (max-width:1024px){ .brand-logo{height:36px} }  /* טאבלט */
@media (max-width:720px){  .brand-logo{height:28px} }  /* מובייל */
/* === AUTORAMK Logo — XL sizing === */
.topbar{ min-height:80px; }
.topbar .brand{ display:flex; align-items:center; padding-inline-end:8px; }
.topbar .brand .brand-logo{
  height:64px !important;     /* דסקטופ גדול */
  max-height:none !important;
  width:auto; display:block; border-radius:10px; object-fit:contain;
}
@media (max-width:1024px){ .topbar .brand .brand-logo{ height:48px !important; } } /* טאבלט */
@media (max-width:720px){  .topbar .brand .brand-logo{ height:36px !important; } } /* מובייל */

/* מעט מרווח לטאבס שייראו טוב ליד לוגו גדול */
.topbar .mainnav a{ line-height:1; padding:10px 14px; font-size:15px; }
/* --- Large logo on the right without growing the navbar --- */
.topbar{
  position:sticky; top:0; z-index:60;
  display:flex; align-items:center; justify-content:flex-start;
  height:56px;                      /* navbar stays compact */
  padding:8px 16px;
  padding-right:128px;              /* reserve space for the big logo */
  background:rgba(7,12,24,.86); backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.topbar .brand{
  position:absolute; right:16px; top:50%; transform:translateY(-50%);
}
.topbar .brand .brand-logo{
  height:84px;                      /* BIG logo */
  width:auto; display:block; border-radius:10px; object-fit:contain;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.25));
}
.topbar .mainnav{ margin-left:auto; }
.topbar .mainnav a{
  color:#cbd5e1; text-decoration:none;
  padding:8px 12px; border-radius:12px; font-weight:600;
  font-size:14px; line-height:1;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
  transition:transform .15s, background-color .15s, color .15s, box-shadow .15s;
}
.topbar .mainnav a:hover{ background:rgba(255,255,255,.08); transform:translateY(-1px); }
.topbar .mainnav a.active{ background:#3b82f6; color:#fff; box-shadow:none; }

/* Responsive: shrink logo & reserved space on smaller screens */
@media (max-width:1024px){
  .topbar{ padding-right:100px; }
  .topbar .brand .brand-logo{ height:64px; }
}
@media (max-width:720px){
  .topbar{ padding-right:76px; height:52px; }
  .topbar .brand .brand-logo{ height:44px; }
  .topbar .mainnav a{ padding:7px 10px; font-size:13px; }
}
/* -- FORCE: big AUTORAMK logo -- */
header.topbar .brand img.brand-logo{
  height:96px !important;      /* שנה כאן אם תרצה גדול/קטן יותר */
  width:auto !important;
  max-height:none !important;
  object-fit:contain;
}
header.topbar{ padding-right:140px; } /* רווח ללוגו גדול; עדכן אם תגדיל עוד */
/* === AUTORAMK logo — bigger (desktop 120px) === */
header.topbar .brand img.brand-logo{
  height:120px !important;      /* Desktop */
  width:auto !important;
  max-height:none !important;
  object-fit:contain;
}
/* תן מרווח לתפריט בצד ימין כדי שהלוגו לא יכסה */
header.topbar{ padding-right:168px; } /* כוונון עדין? העלה/הורד פה */

/* Tablet */
@media (max-width:1024px){
  header.topbar .brand img.brand-logo{ height:84px !important; }
  header.topbar{ padding-right:120px; }
}
/* Mobile */
@media (max-width:720px){
  header.topbar .brand img.brand-logo{ height:56px !important; }
  header.topbar{ padding-right:84px; }
}
/* ===== NAV PRO (Premium) =========================================== */
/* משתני עיצוב בסיסיים (אפשר לכוון צבעים בהמשך במקום אחד) */
:root{
  --nav-bg: rgba(7,12,24,.86);
  --nav-border: rgba(255,255,255,.06);
  --nav-chip-fg: #e5e7eb;
  --nav-chip-fg-dim: #cbd5e1;
  --nav-chip-bg: rgba(255,255,255,.04);
  --nav-chip-bg-hover: rgba(255,255,255,.09);
  --nav-chip-bg-active: linear-gradient(135deg,#3b82f6,#7c4dff);
  --nav-focus: rgba(59,130,246,.45);
}

/* פס עליון מזוגג, שומר על קומפקטיות (מתאים לוגו גדול בצד ימין שכבר עשינו) */
.topbar{
  background: var(--nav-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--nav-border);
}

/* קונטיינר קישורים — ימין ל־RTL, גלילה עדינה אם אין מקום */
.topbar .mainnav{
  display:flex; align-items:center; gap:8px;
  margin-left:auto; /* ימין ב-RTL */
  overflow-x:auto; overflow-y:hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* FF */
}
.topbar .mainnav::-webkit-scrollbar{ display:none; } /* Chrome/Safari */

/* צ'יפ של לינק — אלגנטי, נגיש, עם מעברי צבע עדינים */
.topbar .mainnav a{
  position:relative;
  color:var(--nav-chip-fg-dim);
  text-decoration:none;
  font-weight:600; font-size:14px; line-height:1;
  padding:10px 14px;
  border-radius:14px;
  background:var(--nav-chip-bg);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease;
  outline:none;
}

/* Hover — הרמה עדינה */
.topbar .mainnav a:hover{
  background:var(--nav-chip-bg-hover);
  transform: translateY(-1px);
  color:var(--nav-chip-fg);
}

/* Focus — נגיש ויפה */
.topbar .mainnav a:focus-visible{
  box-shadow: 0 0 0 3px var(--nav-focus), inset 0 0 0 1px rgba(255,255,255,.08);
}

/* Active — גרדיאנט מלא + אינדיקטור תחתון */
.topbar .mainnav a.active{
  color:#fff;
  background: var(--nav-chip-bg-active);
  box-shadow:none;
}
.topbar .mainnav a.active::after{
  content:"";
  position:absolute; inset-inline:10px; bottom:6px;
  height:2px; border-radius:2px;
  background: rgba(255,255,255,.9);
  opacity:.85;
}

/* מרווחים מותאמים ללוגו גדול בצד ימין (כבר שמרנו padding-right בטופבר) */

/* מובייל/טאבלט — מעט יותר קומפקטי */
@media (max-width:1024px){
  .topbar .mainnav a{ padding:9px 12px; font-size:13.5px; }
}
@media (max-width:720px){
  .topbar .mainnav{ gap:6px; }
  .topbar .mainnav a{ padding:8px 10px; font-size:13px; border-radius:12px; }
}

/* הנמכת תנועה למי שמעדיף פחות אנימציות */
@media (prefers-reduced-motion: reduce){
  .topbar .mainnav a{ transition:none; }
}
/* ==================================================================== */
/* ===== NAV PRO+ Active ===== */
.topbar .mainnav a{
  position:relative;
  color:var(--nav-chip-fg-dim, #cbd5e1);
  text-decoration:none; font-weight:700; font-size:14px; line-height:1;
  padding:10px 14px; border-radius:14px;
  background:var(--nav-chip-bg, rgba(255,255,255,.04));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease, opacity .16s;
  outline:none;
}
.topbar .mainnav a:hover{
  background:var(--nav-chip-bg-hover, rgba(255,255,255,.09));
  transform: translateY(-1px);
  color:var(--nav-chip-fg, #e5e7eb);
}
.topbar .mainnav a:focus-visible{
  box-shadow: 0 0 0 3px rgba(59,130,246,.45), inset 0 0 0 1px rgba(255,255,255,.08);
}

/* Active: טאב צבוע היטב (גרדיאנט + קו תחתון) */
.topbar .mainnav a.active{
  color:#fff;
  background: linear-gradient(135deg,#3b82f6 0%, #7c4dff 100%);
  box-shadow: 0 6px 18px rgba(59,130,246,.25), inset 0 0 0 1px rgba(255,255,255,.08);
}
.topbar .mainnav a.active::after{
  content:"";
  position:absolute; inset-inline:10px; bottom:6px;
  height:2px; border-radius:2px; background:rgba(255,255,255,.92);
}

/* aria-current תמיכה (אם בא מרחיבים אחרים) */
.topbar .mainnav a[aria-current="page"]{ color:#fff; }
/* ===== BUTTON SYSTEM PRO =========================================== */
:root{
  --btn-radius: 14px;
  --btn-shadow: 0 8px 20px rgba(0,0,0,.12);
  --btn-ring: 0 0 0 3px rgba(59,130,246,.35);
  --btn-fg: #0b1220;
  --btn-muted: #94a3b8;
  --btn-bg: #f1f5f9;
  --btn-bg-hover: #e5eaf1;
  --btn-primary-from:#3b82f6; --btn-primary-to:#7c4dff;
  --btn-success:#10b981; --btn-warning:#f59e0b; --btn-danger:#ef4444;
}

/* בסיס */
.btn{
  -webkit-appearance:none; appearance:none; user-select:none;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 14px; border-radius:var(--btn-radius); border:0;
  font-weight:700; font-size:14px; line-height:1; letter-spacing:.2px;
  color:var(--btn-fg); background:var(--btn-bg);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06), var(--btn-shadow);
  cursor:pointer; transition: transform .12s ease, box-shadow .12s ease, background .12s ease, opacity .12s ease;
}
.btn:hover{ background:var(--btn-bg-hover); transform: translateY(-1px); }
.btn:active{ transform: translateY(0); }
.btn:focus-visible{ outline:none; box-shadow: var(--btn-shadow), var(--btn-ring); }
.btn[disabled], .btn.disabled{ opacity:.55; cursor:not-allowed; transform:none; }

/* Primary (גרדיאנט) */
.btn.primary{
  color:#fff;
  background: linear-gradient(135deg,var(--btn-primary-from),var(--btn-primary-to));
  box-shadow: 0 8px 22px rgba(123,77,255,.32);
}
.btn.primary:hover{ filter:brightness(1.03); transform: translateY(-1.5px); }
.btn.primary:active{ filter:brightness(.98); transform: translateY(0); }

/* Secondary (מלא מעודן) */
.btn.secondary{
  color:#0f172a; background:#e2e8f0;
  box-shadow: inset 0 0 0 1px rgba(15,23,42,.06), 0 6px 16px rgba(15,23,42,.12);
}
.btn.secondary:hover{ background:#dce3ee; }

/* Ghost (שקוף) */
.btn.ghost{
  background:transparent; color:var(--btn-muted);
  box-shadow: inset 0 0 0 1px rgba(148,163,184,.35);
}
.btn.ghost:hover{ color:#e5e7eb; background:rgba(255,255,255,.08); }

/* Outline */
.btn.outline{
  background:transparent; color:#e5e7eb;
  box-shadow: inset 0 0 0 1px rgba(229,231,235,.7);
}
.btn.outline:hover{ background:rgba(255,255,255,.08); }

/* Success / Warning / Danger */
.btn.success{ color:#fff; background: var(--btn-success); box-shadow: 0 8px 22px rgba(16,185,129,.28); }
.btn.warning{ color:#fff; background: var(--btn-warning); box-shadow: 0 8px 22px rgba(245,158,11,.28); }
.btn.danger{  color:#fff; background: var(--btn-danger);  box-shadow: 0 8px 22px rgba(239,68,68,.28); }
.btn.success:hover, .btn.warning:hover, .btn.danger:hover{ filter:brightness(1.05); transform: translateY(-1.5px); }

/* Pills / Block / Icon */
.btn.pill{ border-radius:999px; }
.btn.block{ display:flex; width:100%; }
.btn.icon{ padding:10px; width:40px; height:40px; }

/* Loading */
.btn.loading{ position:relative; pointer-events:none; opacity:.85; }
.btn.loading::after{
  content:""; position:absolute; inset:auto auto 50% 50%;
  width:16px; height:16px; margin:-8px;
  border:2px solid rgba(255,255,255,.55); border-top-color:#fff; border-radius:50%;
  animation:spin .9s linear infinite;
}
.btn.loading.ghost::after{ border-color: rgba(148,163,184,.55); border-top-color:#94a3b8; }

/* Buttons inside cards/toolbars */
.toolbar .btn{ margin-inline-start:6px; }
/* ================= PREMIUM QUIET ELEGANCE ========================== */
/* פלטת פרימיום רגועה */
:root{
  --lux-bg: rgba(11,17,28,.78);               /* רקע זכוכיתי */
  --lux-chip-fg: #e6e8ec;                     /* טקסט בהיר מאוזן */
  --lux-chip-dim: #b5becb;                    /* טקסט חלש */
  --lux-chip-bg: rgba(255,255,255,.03);       /* צ'יפ שקט */
  --lux-chip-hover: rgba(255,255,255,.07);    /* צ'יפ בהובר */
  --lux-line: rgba(255,255,255,.06);          /* קו עדין */
  --lux-ring: 0 0 0 3px rgba(147,197,253,.26);/* פוקוס נעים */
  /* גרדיאנט “שקט” מאוד לאקטיב (שחור-אבן) */
  --lux-active-from: #1d2433;
  --lux-active-to:   #0f1724;
  --lux-active-edge: rgba(255,255,255,.08);   /* הדגשת קצה פנימית */
  --lux-ink: #0c1220;                         /* טקסט כהה לכפתורים בהירים */
}

/* Topbar זכוכיתי רגוע */
.topbar{
  background: var(--lux-bg);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--lux-line);
}

/* ===== Nav (quiet luxury) ===== */
.topbar .mainnav{ gap:10px; }
.topbar .mainnav a{
  color: var(--lux-chip-dim);
  background: var(--lux-chip-bg);
  border-radius: 14px;
  padding: 10px 14px;
  font-weight: 600; font-size: 14px; line-height: 1;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.05),
    0 4px 10px rgba(0,0,0,.08);
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease, color .14s ease, opacity .14s ease;
}
.topbar .mainnav a:hover{
  background: var(--lux-chip-hover);
  color: var(--lux-chip-fg);
  transform: translateY(-1px);
}
.topbar .mainnav a:focus-visible{ box-shadow: var(--lux-ring), inset 0 0 0 1px rgba(255,255,255,.08); }

/* Active – טאב “שחמט” יוקרתי: כהה, מוברש, בלי צבעים צורמים */
.topbar .mainnav a.active{
  color:#fff;
  background: linear-gradient(180deg, var(--lux-active-from) 0%, var(--lux-active-to) 100%);
  box-shadow:
    inset 0 1px 0 var(--lux-active-edge),    /* היילייט עדין בקצה העליון */
    inset 0 0 0 1px rgba(255,255,255,.06),   /* קו פנימי דק */
    0 8px 18px rgba(0,0,0,.18);              /* צל חיצוני רך */
  transform: translateY(-1px);
}
.topbar .mainnav a.active::after{
  content:""; position:absolute; inset-inline:12px; bottom:6px;
  height:1.5px; border-radius:2px;
  background: linear-gradient(90deg, rgba(255,255,255,.0), rgba(255,255,255,.85), rgba(255,255,255,.0));
  opacity:.9;
}

/* ===== Buttons (quiet premium) ===== */
:root{
  --btnR: 14px;
  --btnShadowSoft: 0 10px 22px rgba(0,0,0,.12);
  --btnEdge: inset 0 0 0 1px rgba(0,0,0,.06);
  --btnEdgeLight: inset 0 0 0 1px rgba(255,255,255,.06);
}
/* בסיס */
.btn{
  border-radius: var(--btnR);
  padding: 10px 14px; font-weight: 700; font-size: 14px;
  display:inline-flex; align-items:center; gap:8px;
  transition: transform .14s ease, box-shadow .14s ease, filter .14s ease, background .14s ease, color .14s ease;
}
/* Primary – גרדיאנט מוברש כהה, אלגנטי */
.btn.primary{
  color:#fff;
  background: linear-gradient(180deg, #1b2433 0%, #111827 100%);
  box-shadow: var(--btnShadowSoft), var(--btnEdgeLight);
}
.btn.primary:hover{ filter: brightness(1.035); transform: translateY(-1px); }
.btn.primary:active{ filter: brightness(.98); transform: translateY(0); }
.btn.primary:focus-visible{ box-shadow: var(--btnShadowSoft), 0 0 0 3px rgba(147,197,253,.28); }

/* Secondary – אבן בהיר אלגנטי */
.btn.secondary{
  color: var(--lux-ink);
  background: linear-gradient(180deg, #eef2f7 0%, #e7ecf4 100%);
  box-shadow: var(--btnShadowSoft), var(--btnEdge);
}
.btn.secondary:hover{ filter: brightness(1.02); transform: translateY(-1px); }

/* Ghost – קווי מתאר עדינים, שקיפות אלגנטית */
.btn.ghost{
  color: #cbd5e1; background: transparent;
  box-shadow: inset 0 0 0 1px rgba(203,213,225,.4);
}
.btn.ghost:hover{ background: rgba(255,255,255,.06); color:#e6e8ec; }

/* Outline – קלאסי נקי */
.btn.outline{
  color:#e6e8ec; background: transparent;
  box-shadow: inset 0 0 0 1px rgba(230,232,236,.7);
}
.btn.outline:hover{ background: rgba(255,255,255,.06); }

/* מצבי סטטוס מעודנים (שקטים) */
.btn.success{ color:#0b301f; background: linear-gradient(180deg,#c3f3de 0%,#b1e8d2 100%); box-shadow: var(--btnShadowSoft), var(--btnEdge); }
.btn.warning{ color:#3a2500; background: linear-gradient(180deg,#ffe4b5 0%,#ffd899 100%); box-shadow: var(--btnShadowSoft), var(--btnEdge); }
.btn.danger { color:#3a0d0d; background: linear-gradient(180deg,#ffc9c9 0%,#ffb3b3 100%); box-shadow: var(--btnShadowSoft), var(--btnEdge); }

/* Loading spinner על כפתורים (נשאר עדין) */
.btn.loading::after{
  width:14px; height:14px; border-width:2px;
  border-color: rgba(255,255,255,.45); border-top-color:#fff;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .topbar .mainnav a, .btn{ transition:none; }
}
/* =================================================================== */
/* ===== Page Container (centered, premium proportions) ===== */
:root{
  /* משנה אחת לניהול רוחב התוכן: 1320px מקסימום או 92vw */
  --container-w: min(1320px, 92vw);
}

/* כל התוכן האפליקטיבי יתיישר למרכז ברוחב מאוזן */
#view{
  max-width: var(--container-w);
  margin-inline: auto;
  padding: 24px 16px;   /* ריווח פנימי נעים */
}

/* דפים ישנים שמרנדרים .page – ניישר גם אותם בבטחה */
#view > .page{
  max-width: var(--container-w);
  margin-inline: auto;
}

/* כרטיסים יישבו יפה במרכז גם ללא מרג'ינים חיצוניים חריגים */
#view .card{
  margin-inline: 0;
}

/* עמודים שממש צריכים לרוץ לכל הרוחב (מפות/טבלאות גדולות) – הוסיפו class="full-bleed" לשורש הדף */
.full-bleed{
  max-width: none !important;
  width: 100% !important;
  margin-inline: 0 !important;
  padding-inline: 0 !important;
}

/* שיפורים קטנים לגריד של כרטיסים בלוח מחוונים (אם קיים) */
.dashboard-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}
@media (max-width: 720px){
  #view{ padding: 16px 12px; }
}
/* dashboard card actions */
.card .card-actions{ display:flex; align-items:center; gap:10px; }
.card .card-actions .btn{ min-width:140px; }

/* chip-link: תגית/Badge לחיצה ועדינה */
.chip-link{display:inline-block;padding:4px 10px;border-radius:999px;background:rgba(148,163,184,.12);color:#cbd5e1;font-size:12px;line-height:1;border:1px solid rgba(148,163,184,.18);cursor:pointer;transition:all .15s}
.chip-link:hover{background:rgba(148,163,184,.2);transform:translateY(-1px)}
.chip-link:active{transform:none}

/* --- Chat panel (WhatsApp-like) --- */
.chat-wrap{display:grid;grid-template-columns: minmax(340px,1fr) minmax(420px,1fr);gap:16px}
@media (max-width: 980px){ .chat-wrap{grid-template-columns:1fr} }

.chat-panel{background:linear-gradient(180deg,#0f172a 0%,#0b1220 100%);border-radius:16px;box-shadow:0 6px 18px rgba(0,0,0,.25);overflow:hidden;display:flex;flex-direction:column;min-height:420px}
.chat-header{display:flex;align-items:center;gap:12px;padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.02)}
.chat-header .avatar{width:36px;height:36px;border-radius:50%;background:#111827;display:flex;align-items:center;justify-content:center;font-weight:700;color:#e2e8f0}
.chat-title{font-weight:700}
.chat-sub{font-size:12px;color:#a5b4fc}

.chat-body{padding:12px;overflow:auto;display:flex;flex-direction:column;gap:8px;scroll-behavior:smooth}
.msg{display:flex;max-width:82%}
.msg.in{justify-content:flex-start}
.msg.out{justify-content:flex-end}
.bubble{padding:10px 12px;border-radius:14px;line-height:1.35;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.msg.in .bubble{background:#111827;color:#e5e7eb;border-top-left-radius:4px}
.msg.out .bubble{background:#155e75;color:#e6fffa;border-top-right-radius:4px}
.msg .meta{font-size:11px;color:#94a3b8;margin-top:4px}

.chat-input{display:flex;gap:8px;padding:10px;border-top:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.02)}
.chat-input .input{flex:1}
.chat-tools{display:flex;gap:8px;padding:10px;border-top:1px dashed rgba(255,255,255,.08)}
.chat-tools .btn.small{padding:6px 10px;font-size:12px;border-radius:10px}

.badge.outline{border:1px solid rgba(148,163,184,.35);color:#cbd5e1;background:transparent}
.kit-divider{height:1px;background:rgba(255,255,255,.08);margin:8px 0}

/* export file name hint style */
.export-hint{font-size:12px;color:#94a3b8;margin-inline-start:6px}

/* ====== Dashboard Premium ====== */
.container{max-width:1200px;margin-inline:auto;}
.kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:16px 0}
@media (max-width:1200px){.kpi-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:900px){.kpi-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.kpi-grid{grid-template-columns:1fr}}
.kpi-card{
  position:relative;background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.06); border-radius:16px; padding:20px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25); transition:transform .2s ease, border-color .2s ease;
}
.kpi-card:hover{ transform: translateY(-2px); border-color: rgba(255,255,255,.14); }
.kpi-title{ color:#a6b0bf; font-size:14px; margin-bottom:10px; }
.kpi-value{ font-size:36px; font-weight:800; letter-spacing:.5px; }
.kpi-actions{ margin-top:12px; }
.kpi-strip{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:22px; }
@media (max-width:900px){ .kpi-strip{ grid-template-columns:1fr; } }
.kpi-strip-item{
  background: rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06);
  border-radius:14px; padding:16px 18px; display:flex; align-items:center; justify-content:space-between;
}
.strip-title{ color:#9aa3b2; font-size:14px; }
.strip-value{ font-size:24px; font-weight:700; }

/* Skeleton shimmer */
.skeleton{ position:relative; color:transparent !important; }
.skeleton::after{
  content:''; position:absolute; inset:0; border-radius:8px;
  background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.13), rgba(255,255,255,.06));
  animation: shimmer 1.2s linear infinite; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; padding:8px;
}
@keyframes shimmer{ 0%{transform:translateX(-100%)} 100%{transform:translateX(100%)} }

/* === Dashboard skeleton – light pulse & fixed heights === */
.kpi-value{min-height:40px; line-height:40px;}
.strip-value{min-height:28px; line-height:28px;}

.skeleton{
  position:relative;
  opacity:.35;
  animation:pulse 1.2s ease-in-out infinite;
}
@keyframes pulse{
  0%{opacity:.35}
  50%{opacity:.7}
  100%{opacity:.35}
}

/* אם תרצה לדלג על skeleton לחלוטין: הוסף למחלקת body את no-skeleton */
.no-skeleton .skeleton{animation:none; opacity:1;}

/* === Topbar (RTL premium) === */
.topbar{position:sticky;top:0;z-index:60;background:rgba(7,12,24,.86);backdrop-filter:saturate(150%) blur(8px);border-bottom:1px solid rgba(255,255,255,0.06)}
.topbar__inner{display:flex;align-items:center;justify-content:flex-start;gap:16px;height:64px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand__logo{height:56px;width:auto;border-radius:12px;object-fit:contain;display:block}
.nav{display:flex;gap:8px;margin-right:auto} /* RTL: הלוגו והנב מצד ימין, הפריטים נפרשים שמאלה */
.nav a{color:#cbd5e1;text-decoration:none;padding:10px 14px;border-radius:12px;font-weight:600;font-size:14px;line-height:1;display:inline-flex;align-items:center;gap:6px;transition:transform .08s ease, background-color .15s ease, color .15s ease}
.nav a:hover{transform:translateY(-1px);background:rgba(255,255,255,0.06)}
.nav a.active{background:linear-gradient(180deg,rgba(255,255,255,0.12),rgba(255,255,255,0.06));color:#fff;border:1px solid rgba(255,255,255,0.14)}

/* שמירה על פרופורציה כוללת */
.container{max-width:1180px;margin:0 auto;padding:0 16px}
@media (max-width:1024px){.container{max-width:960px}}
@media (max-width:720px){.container{max-width:640px}}
/* === Topbar fixes 2025-10-10 === */
.topbar .topbar__inner{justify-content:flex-end; height:72px}            /* הכל נצמד לימין + גובה */
.topbar .nav{margin-right:0!important; margin-left:24px}                  /* שלא ידחוף לאמצע */
.topbar .brand{margin-left:16px}                                          /* רווח קטן בין לוגו לתפריט */
.topbar .brand__logo{height:72px; width:auto; object-fit:contain}         /* לוגו גדול יותר */
@media (max-width: 720px){
  .topbar .topbar__inner{height:64px}
  .topbar .brand__logo{height:56px}
}
/* === Topbar final overrides (right-aligned + 120px logo) === */
/* יישור כל הטופבר לימין – לוגו בקצה ימין, תפריט לידו לשמאל */
.topbar .topbar__inner{justify-content:flex-start; height:92px}

/* לוגו גדול 120px בלי לעוות יחס */
.topbar .brand__logo{height:120px; width:auto; object-fit:contain}

/* התפריט מתחיל ליד הלוגו מצד ימין (לא דוחף למרכז) */
.topbar .nav{margin-right:16px !important; margin-left:0 !important}

/* כפתורי התפריט נשארים קומפקטיים גם עם לוגו גדול */
.topbar .nav a{height:40px; display:inline-flex; align-items:center;}

/* מובייל: להקטין מעט כדי שלא יגלוש */
@media (max-width: 720px){
  .topbar .topbar__inner{height:76px}
  .topbar .brand__logo{height:64px}
}
/* === Topbar hard override (logo right, menu next to it) === */
.topbar .topbar__inner{
  display:flex !important;
  flex-direction: row !important;
  justify-content: flex-end !important; /* עוגן לימין */
  align-items: center !important;
  gap: 16px !important;
}

/* סדר אלמנטים: תפריט (1) ואז לוגו (2) — כך הלוגו יהיה בקצה הימני */
.topbar .nav{ order:1 !important; margin:0 16px 0 0 !important; }
.topbar .brand{ order:2 !important; }

/* לוגו גדול (כבר ביקשת 120px) */
.topbar .brand__logo{ height:120px !important; width:auto !important; object-fit:contain !important; }

/* למקרה שיש כללים ישנים שממרכזים/דוחפים */
.topbar .nav{ margin-left:0 !important; }
.topbar .topbar__inner .nav,
.topbar .topbar__inner .brand{
  flex: 0 0 auto !important;
}
/* ===== TOPBAR: logo right, menu next to it (hard override) ===== */
.topbar .topbar__inner,
.topbar .inner,
header.topbar .inner,
header .topbar__inner {
  display: flex !important;
  flex-direction: row !important;
  justify-content: flex-end !important;   /* הכל לימין */
  align-items: center !important;
  gap: 16px !important;
  width: 100% !important;
}

/* התפריט משמאל ללוגו (ימינה במסך RTL) */
.topbar .nav,
.topbar nav,
.topbar .menu {
  order: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 auto !important;
}
.topbar .nav ul,
.topbar nav ul,
.topbar .menu ul {
  display: flex !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* הלוגו בקצה הימני */
.topbar .brand,
.topbar .logo,
.topbar .brand-wrap {
  order: 2 !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
}
.topbar .brand__logo,
.topbar .logo img,
.topbar .brand img {
  height: 120px !important;        /* גודל הלוגו */
  width: auto !important;
  object-fit: contain !important;
}

/* ביטול ניסיונות למרכז מהורה גבוה יותר */
.topbar,
header.topbar,
.topbar * {
  text-align: right !important;
}
.topbar .nav,
.topbar nav,
.topbar .menu {
  align-self: center !important;
}

/* העלמת תגית debug "v-frozen" אם קיימת */
.badge.v-frozen,
.v-frozen,
[data-debug="v-frozen"] {
  display: none !important;
}
/* ==== FIX: Header RTL — logo on far right, menu next to it ==== */
.topbar .topbar__inner,
.topbar .inner,
header.topbar .inner,
header .topbar__inner {
  display:flex !important;
  flex-direction: row-reverse !important; /* ימני ← שמאלי */
  justify-content: flex-start !important; /* מתחיל מהימין */
  align-items: center !important;
  gap: 16px !important;
}

/* סדר פריטים: קודם הלוגו (ימין), אחריו התפריט */
.topbar .brand,
.topbar .logo,
.topbar .brand-wrap { order: 1 !important; }

.topbar .nav,
.topbar nav,
.topbar .menu { order: 2 !important; }

/* הלוגו בגודל המבוקש */
.topbar .brand__logo,
.topbar .logo img,
.topbar .brand img {
  height: 120px !important;
  width: auto !important;
  object-fit: contain !important;
}
/* ===== HEADER RTL FIX v3 (force-right) ===== */
.topbar, header.topbar, header, .site-header {
  position: relative;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important; /* מתחיל מהימין ב-RTL */
  min-height: 72px;
}

/* לוגו בימין, ממוקם מוחלט כדי שהתפריט לא יזיז אותו */
.topbar .brand, .topbar .logo, header .brand, header .logo, .site-header .brand, .site-header .logo {
  position: absolute !important;
  right: 16px !important;       /* ימין */
  left: auto !important;
  inset-inline-end: 16px !important; /* תמיכה בלוגיקה RTL */
  inset-inline-start: auto !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: block !important;
}

/* גודל הלוגו */
.topbar .brand img, .topbar .logo img, header .brand img, header .logo img, .site-header .brand img, .site-header .logo img {
  height: 120px !important;
  width: auto !important;
  object-fit: contain !important;
}

/* התפריט/ניווט יזוז שמאלה מהלוגו (כלומר יתחיל אחרי 160px מימין) */
.topbar nav, .topbar .nav, .topbar .menu,
header nav, header .nav, header .menu,
.site-header nav, .site-header .nav, .site-header .menu {
  margin-right: 160px !important;
  margin-left: 0 !important;
  display: flex !important;
  gap: 12px !important;
  justify-content: flex-start !important; /* השורה תתחיל ליד הלוגו */
}

/* שלא יופיעו דברים במרכז בטעות */
.topbar .nav a, header .nav a, .site-header .nav a {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 10px;
  text-decoration: none;
}
/* ===== HEADER RTL FIX v4 (force-right: absolute logo + right padding gap) ===== */
header.topbar, .topbar, .site-header {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;   /* השורה מתחילה ליד הלוגו */
  direction: rtl !important;                /* לוודא ש"ימין" זה ימין */
  padding-right: 176px !important;          /* רווח ללוגו (160 + מרווח) */
}

/* הלוגו צמוד לימין, מוחלט, לא מזיז את התפריט */
header.topbar .brand, .topbar .brand, .site-header .brand,
header.topbar .logo,  .topbar .logo,  .site-header .logo {
  position: absolute !important;
  right: 16px !important;
  left: auto !important;
  inset-inline-end: 16px !important;
  inset-inline-start: auto !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

header.topbar .brand img, .topbar .brand img, .site-header .brand img,
header.topbar .logo img,  .topbar .logo img,  .site-header .logo img {
  height: 120px !important;
  width: auto !important;
  object-fit: contain !important;
}

/* התפריט מתחיל מייד אחרי רווח הימין (לא יזוז לשמאל) */
header.topbar nav, .topbar nav, .site-header nav,
header.topbar .nav, .topbar .nav, .site-header .nav,
header.topbar .menu, .topbar .menu, .site-header .menu {
  margin-right: 0 !important;
  margin-left: 0 !important;
  gap: 12px !important;
}
/* === Topbar RTL fix — exact structure (header.topbar > .container.topbar__inner > a.brand + nav.nav) === */
header.topbar .topbar__inner{
  display:flex !important;
  flex-direction:row-reverse !important;   /* לוגו יופיע בימין, nav לידו */
  justify-content:flex-start !important;
  align-items:center !important;
  gap:16px !important;
  height:92px !important;
}
header.topbar .brand{ order:1 !important; margin:0 0 0 16px !important; flex:0 0 auto !important; }
header.topbar .brand__logo{ height:120px !important; width:auto !important; object-fit:contain !important; }
header.topbar .nav{ order:2 !important; margin:0 !important; padding:0 !important; display:flex !important; gap:12px !important; }
header.topbar .nav a{ display:inline-flex !important; align-items:center !important; height:40px !important; }
/* ===== TOPBAR FIX v5 — full-width header + right-pinned brand, nav next to it ===== */

/* 1) מבטל מרכזת של ה-container בהדר */
header.topbar .container.topbar__inner{
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;             /* לא מרכז */
  padding-inline: 16px !important;  /* ריווח פנימי */
}

/* 2) פריסת פלֶקס פשוטה: מימין לשמאל רגיל, אבל מצמידים לקצה ימין של החלון */
header.topbar .topbar__inner{
  display: flex !important;
  flex-direction: row !important;     /* בלי row-reverse כדי לא לבלבל */
  justify-content: flex-end !important; /* הכל נדחף לקצה ימין של המסך */
  align-items: center !important;
  gap: 16px !important;
  height: 92px !important;
}

/* 3) סדר: התפריט (nav) יהיה ראשון משמאל ללוגו, הלוגו אחריו בקצה הימני */
header.topbar .nav{ order: 1 !important; display:flex !important; gap:12px !important; margin:0 !important; }
header.topbar .brand{ order: 2 !important; margin:0 0 0 8px !important; }

/* 4) גודל הלוגו */
header.topbar .brand__logo{ height: 120px !important; width: auto !important; object-fit: contain !important; }

/* 5) קישורי תפריט */
header.topbar .nav a{ display:inline-flex !important; align-items:center !important; height:40px !important; }

/* ===== TOPBAR FIX v6 — final, force logo on right & menu next to it (RTL) ===== */

/* 1) ההדר פרוס לרוחב מלא, כיוון RTL */
header.topbar{
  position:relative !important;
  direction:rtl !important;
}

/* 2) מבטל מרכזת של ה-container בתוך ההדר */
header.topbar .container.topbar__inner{
  max-width:none !important;
  width:100% !important;
  margin:0 !important;
  padding:0 16px !important;
}

/* 3) מצמיד את הלוגו לקצה הימני באופן מוחלט, כדי שלא יזוז לעולם */
header.topbar .brand{
  position:absolute !important;
  right:16px !important; left:auto !important;
  top:50% !important; transform:translateY(-50%) !important;
  margin:0 !important; padding:0 !important;
}
header.topbar .brand__logo{
  height:120px !important; width:auto !important; object-fit:contain !important;
}

/* 4) התפריט (nav) נשאר אלסטי אבל מתחיל אחרי רווח לימין כדי שלא יתנגש בלוגו */
header.topbar .topbar__inner{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;     /* מתחיל מהימין */
  padding-right:176px !important;            /* רוחב אזור הלוגו + מרווח */
  gap:12px !important; height:92px !important;
}

/* 5) ביטול כללים שמושכים את ה-nav לשמאל/אמצע (כמו margin-right:auto) */
header.topbar .nav{
  display:flex !important; gap:12px !important;
  margin:0 !important; padding:0 !important;
}
header.topbar .nav a{
  display:inline-flex !important; align-items:center !important; height:40px !important;
}

/* ===== TOPBAR FIX v7 — align nav to the right edge (next to absolute logo) ===== */
header.topbar .topbar__inner{
  justify-content:flex-end !important;  /* היה flex-start ב-v6 → זה שזרק שמאלה */
}

header.topbar .nav{
  margin:0 !important;
  margin-left:0 !important;
  margin-right:0 !important;
  margin-inline-start:0 !important;
  margin-inline-end:0 !important;
  flex:0 0 auto !important;
}

/* ===== TOPBAR FIX v8 — place nav absolutely next to the right logo ===== */

/* ההדר נשאר RTL ומלא רוחב (נשמר מ-v6) */

/* 1) מיקום מוחלט ללוגו (כבר קיים), נשארים עקביים */
header.topbar .brand{
  position:absolute !important;
  right:16px !important; left:auto !important;
  top:50% !important; transform:translateY(-50%) !important;
}

/* 2) מיקום מוחלט ל-nav: יישב בדיוק משמאל ללוגו */
header.topbar .nav{
  position:absolute !important;
  right:176px !important;   /* 120px לוגו + 40-50px מרווח = 176px */
  left:auto !important;
  top:50% !important; transform:translateY(-50%) !important;
  display:flex !important; gap:12px !important;
  margin:0 !important; padding:0 !important;
  flex:0 0 auto !important;
}

/* 3) ה-container הפנימי נשאר רספונסיבי, אבל לא משפיע על המיקום המוחלט */
header.topbar .topbar__inner{
  position:relative !important;   /* עוגן למוחלטים */
  min-height:92px !important;
}

/* 4) קישורי תפריט */
header.topbar .nav a{
  display:inline-flex !important; align-items:center !important; height:40px !important;
}

/* 5) רספונסיביות בסיסית: במסכים צרים מצמצמים מרווח */
@media (max-width:1024px){
  header.topbar .nav{ right:156px !important; }
}
@media (max-width:720px){
  header.topbar .nav{ right:136px !important; gap:8px !important; }
  header.topbar .brand__logo{ height:96px !important; }
}

/* === Fine-tune: logo & nav even more to the right === */
header.topbar .brand{
  right:8px !important;            /* היה 16px */
}
header.topbar .nav{
  right:152px !important;          /* היה 176px – צמוד יותר ללוגו */
}

/* היגיון רספונסיבי קטן (מסכים רחבים מאוד – טיפה יותר רווח) */
@media (min-width:1440px){
  header.topbar .nav{ right:160px !important; }
}

/* === Space below the topbar so pages breathe === */
#app .page, #view .page{
  margin-top:18px;                 /* רווח כללי מתחת לתפריט */
}
@media (min-width:1024px){
  #app .page, #view .page{ margin-top:24px; }
}


/* === Fine-tune: logo & nav even more to the right === */
header.topbar .brand{
  right:8px !important;            /* היה 16px */
}
header.topbar .nav{
  right:152px !important;          /* היה 176px – צמוד יותר ללוגו */
}

/* היגיון רספונסיבי קטן (מסכים רחבים מאוד – טיפה יותר רווח) */
@media (min-width:1440px){
  header.topbar .nav{ right:160px !important; }
}

/* === Space below the topbar so pages breathe === */
#app .page, #view .page{
  margin-top:32px;                 /* רווח כללי מתחת לתפריט */ 
}
@media (min-width:1024px){
  #app .page, #view .page{ margin-top:24px; }
}


/* === Fine-tune: logo & nav even more to the right === */
header.topbar .brand{
  right:8px !important;            /* היה 16px */
}
header.topbar .nav{
  right:152px !important;          /* היה 176px – צמוד יותר ללוגו */
}

/* היגיון רספונסיבי קטן (מסכים רחבים מאוד – טיפה יותר רווח) */
@media (min-width:1440px){
  header.topbar .nav{ right:160px !important; }
}

/* === Space below the topbar so pages breathe === */
#app .page, #view .page{
  margin-top:18px;                 /* רווח כללי מתחת לתפריט */ 
}
@media (min-width:1024px){
  #app .page, #view .page{ margin-top:32px; } 
}


/* === Lead Card – WhatsApp-like layout === */
.lead-layout{display:grid;grid-template-columns:420px 1fr;gap:16px}
@media (max-width:1024px){.lead-layout{grid-template-columns:1fr}}
.chat-panel{padding:0;display:flex;flex-direction:column;overflow:hidden}
.chat-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--card-bd)}
.chat-title{font-weight:700}
.chat-list{flex:1;overflow:auto;padding:12px;background:var(--panel)}
.chat-compose{display:flex;gap:8px;padding:10px;border-top:1px solid var(--card-bd);background:rgba(255,255,255,.02)}
.msg{display:flex;margin:6px 0}
.msg .bubble{max-width:75%;padding:8px 10px;border-radius:14px;position:relative}
.msg.me{justify-content:flex-start} /* RTL: הודעות "שלי" בצד ימין ויזואלי */
.msg.me .bubble{background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.06)); border:1px solid rgba(255,255,255,.14)}
.msg.them{justify-content:flex-end}
.msg.them .bubble{background:rgba(59,130,246,.18);border:1px solid rgba(59,130,246,.25)}
.msg .time{opacity:.7;font-size:12px;margin-top:4px;text-align:left}
.details{padding:16px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:900px){.grid2{grid-template-columns:1fr}}
.hstack{display:flex;gap:8px;align-items:center}
.actions{margin-top:12px;display:flex;gap:8px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid var(--card-bd);border-radius:999px;background:rgba(255,255,255,.06)}

/* ==== Lead Card – clean split: chat (left) | details (right) ==== */
.lead-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.head-actions{display:flex;gap:8px;flex-wrap:wrap}

/* שתי עמודות עם רוחב צ'אט קבוע */
.lead-shell{display:grid;grid-template-columns:520px 1fr;gap:16px}
@media (max-width:1200px){.lead-shell{grid-template-columns:440px 1fr}}
@media (max-width:980px){.lead-shell{grid-template-columns:1fr;}}
.left-chat{padding:0;display:flex;flex-direction:column;overflow:hidden}
.right-details{padding:16px}

/* chat */
.chat-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--card-bd)}
.chat-title{font-weight:700}
.chat-list{flex:1;overflow:auto;padding:12px;background:var(--panel)}
.chat-compose{display:flex;gap:8px;padding:10px;border-top:1px solid var(--card-bd);background:rgba(255,255,255,.02)}
.chat-compose .input{flex:1}

/* bubbles – וואטסאפ לייט */
.msg{display:flex;margin:6px 0}
.msg .bubble{max-width:78%;padding:9px 11px;border-radius:14px}
.msg.me{justify-content:flex-start} /* RTL: ימין ויזואלי */
.msg.me .bubble{background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.06)); border:1px solid rgba(255,255,255,.14)}
.msg.them{justify-content:flex-end}
.msg.them .bubble{background:rgba(59,130,246,.18);border:1px solid rgba(59,130,246,.25)}
.msg .time{opacity:.7;font-size:12px;margin-top:4px;text-align:left}

/* form side */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:900px){.grid2{grid-template-columns:1fr}}
.hstack{display:flex;gap:8px;align-items:center}
.actions{margin-top:12px;display:flex;gap:8px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid var(--card-bd);border-radius:999px;background:rgba(255,255,255,.06)}

/* יישור אחיד לגובה כפתורים ושדות */
.right-details .input, .right-details .btn{height:40px;line-height:40px}
.chat-compose .btn{height:40px}
/* --- Lead Card: force layout (chat left, details right) --- */
.lead-shell{
  display:grid !important;
  grid-template-columns: 560px 1fr !important;
  grid-template-areas: "chat details" !important;
  gap:24px !important;
}
.left-chat{ grid-area: chat !important; }
.right-details{ grid-area: details !important; }
@media (max-width: 1100px){
  .lead-shell{ grid-template-columns: 1fr !important; grid-template-areas:"details" "chat" !important; }
}
/* מרווח סביר מהטופ-בר לכל הדפים */
.page.container{ padding-top: 10px; }
/* --- Lead Card: tidy form on the right --- */
.right-details{ padding:20px !important; }
.right-details .grid2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width: 900px){ .right-details .grid2{ grid-template-columns:1fr; } }

/* labels עדינות מעל שדה */
.right-details .field label{
  display:block !important;
  padding:0 !important;
  margin:0 0 6px 0 !important;
  background:none !important;
  border:none !important;
  color:var(--muted);
  font-weight:600;
  line-height:1.2;
}

/* שדות אינפוט אחידים – בלי "גלולות" */
.right-details .input{
  display:block;
  width:100%;
  height:44px !important;
  line-height:44px !important;
  padding:0 12px !important;
  border-radius:12px !important;
  border:1px solid var(--card-bd) !important;
  background:var(--panel) !important;
  box-shadow:none !important;
}

/* select באותו גובה */
.right-details select.input{ appearance:auto; }

/* סטאק לכפתורי ההצמדה */
.right-details .hstack{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.right-details .btn{ height:40px !important; line-height:40px !important; padding:0 12px !important; }

/* תג הצגת שם המעבד נקי יותר */
.right-details .chip{
  height:32px;
  line-height:32px;
  padding:0 10px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid var(--card-bd);
}

/* כפתורי compose בצ'אט */
.chat-compose .btn{ height:40px !important; line-height:40px !important; }
/* ===== LAYOUT LOCK vFinal (lead card + header) ===== */

/* ריווח נעים מתחת לטופבר לכל עמודי האפליקציה */
.page.container{ margin-top:18px !important; padding-top:0 !important; }

/* --- Topbar: שמירה על ימין, בלי מיקום מוחלט לתפריט --- */
header.topbar .topbar__inner{
  display:flex !important;
  flex-direction:row-reverse !important;   /* לוגו בימין, תפריט לשמאלו */
  justify-content:flex-start !important;
  align-items:center !important;
  gap:12px !important;
}
header.topbar .nav{
  position:static !important;
  right:auto !important; left:auto !important; top:auto !important;
  margin:0 !important;
  display:flex !important; gap:10px !important;
}
header.topbar .brand__logo{ height:84px !important; width:auto !important; object-fit:contain !important; }

/* --- Lead card: צאט
/* ===== LAYOUT LOCK vFinal (lead card + header) ===== */

/* ריווח נעים מתחת לטופבר */
.page.container{ margin-top:18px !important; padding-top:0 !important; }

/* --- Topbar: לוגו בימין, תפריט לשמאלו --- */
header.topbar .topbar__inner{
  display:flex !important;
  flex-direction:row-reverse !important;
  justify-content:flex-start !important;
  align-items:center !important;
  gap:12px !important;
}
header.topbar .nav{
  position:static !important;
  right:auto !important; left:auto !important; top:auto !important;
  margin:0 !important;
  display:flex !important; gap:10px !important;
}
header.topbar .brand__logo{ height:84px !important; width:auto !important; object-fit:contain !important; }

/* --- Lead card: צ׳אט משמאל, פרטים מימין --- */
.lead-shell{
  display:grid !important;
  grid-template-columns: 1fr min(520px, 40vw) !important;
  gap:16px !important;
  grid-template-areas: "chat details" !important;
  align-items:start !important;
}
.left-chat{  grid-area:chat !important;  padding:0 !important; display:flex !important; flex-direction:column !important; overflow:hidden !important; min-height:56vh; }
.right-details{ grid-area:details !important; padding:16px !important; }

/* מובייל/טאבלט – קודם פרטים ואז צ׳אט */
@media (max-width: 980px){
  .lead-shell{
    grid-template-columns: 1fr !important;
    grid-template-areas: "details" "chat" !important;
  }
}

/* יישור שדות/כפתורים */
.right-details .grid2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:900px){ .right-details .grid2{ grid-template-columns:1fr; } }
.right-details .input, .right-details select.input, .right-details .btn{
  height:40px !important; line-height:40px !important; padding:0 12px !important;
}
.right-details .hstack{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

/* בועות צ׳אט */
.chat-head{ display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid var(--card-bd); }
#chatList{ padding:12px; overflow:auto; display:flex; flex-direction:column; gap:8px; scroll-behavior:smooth; }
.msg.me{   justify-content:flex-start; }
.msg.them{ justify-content:flex-end; }
.msg .bubble{ border-radius:14px; border:1px solid var(--card-bd); padding:10px 12px; background:rgba(255,255,255,.05); }
.msg.me .bubble{ background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.06)); border:1px solid rgba(255,255,255,.14); }
.msg .time{ opacity:.7; font-size:12px; margin-top:4px; text-align:left; }
/* ===== FINAL OVERRIDES (header + lead card) ===== */

/* ריווח קבוע מתחת לטופבר */
.page.container{ margin-top:18px !important; }

/* --- Topbar נקי: לוגו בקצה ימין, תפריט לידו --- */
header.topbar .topbar__inner{
  display:flex !important;
  flex-direction:row-reverse !important;   /* RTL: הלוגו ראשון (ימין) */
  justify-content:flex-start !important;   /* התפריט מיד אחריו */
  align-items:center !important;
  gap:12px !important;
  height:auto !important;
}
header.topbar .brand__logo{
  height:84px !important; width:auto !important; object-fit:contain !important;
}
header.topbar .nav{
  position:static !important;
  margin:0 !important;
  display:flex !important;
  gap:12px !important;
}

/* --- Lead card: צ׳אט (שמאל) גדול, פרטים (ימין) צר --- */
.lead-shell{
  display:grid !important;
  grid-template-columns: 1fr min(520px, 40vw) !important; /* שמאל רחב, ימין עד ~520 */
  gap:16px !important;
  grid-template-areas: "chat details" !important;
  align-items:start !important;
}
.left-chat{  grid-area: chat !important; padding:0 !important; display:flex !important; flex-direction:column !important; overflow:hidden !important; min-height:56vh; }
.right-details{ grid-area: details !important; padding:16px !important; }

/* מובייל/טאבלט – קודם פרטים ואז צ׳אט */
@media (max-width: 980px){
  .lead-shell{
    grid-template-columns: 1fr !important;
    grid-template-areas: "details" "chat" !important;
  }
}

/* שדות/כפתורים – יישור וגדלים קבועים */
.right-details .grid2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:900px){ .right-details .grid2{ grid-template-columns:1fr; } }
.right-details .input, .right-details select.input, .right-details .btn{
  height:40px !important; line-height:40px !important; padding:0 12px !important;
}
.right-details .hstack{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

/* צ׳אט – בועות בסיס */
.chat-head{ display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid var(--card-bd); }
#chatList{ padding:12px; overflow:auto; display:flex; flex-direction:column; gap:8px; scroll-behavior:smooth; }
.msg.me{   justify-content:flex-start; }
.msg.them{ justify-content:flex-end; }
.msg .bubble{ border-radius:14px; border:1px solid var(--card-bd); padding:10px 12px; background:rgba(255,255,255,.05); }
.msg.me .bubble{ background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.06)); border:1px solid rgba(255,255,255,.14); }
.msg .time{ opacity:.7; font-size:12px; margin-top:4px; text-align:left; }