:root{
  --navy:#0e1b34;
  --navy-light:#16264a;
  --gold:#c9a24b;
  --gold-light:#e8cf8a;
  --bg:#fbfaf6;
  --text:#1c2333;
  --danger:#b3402c;
  --success:#3c7a5a;
  --warn:#c98a2b;
  --info:#2b6fc9;
}

*{box-sizing:border-box;}
body{
  margin:0;
  font-family:'Heebo','Rubik',sans-serif;
  background:var(--bg);
  color:var(--text);
  direction:rtl;
}

.bsd-header{
  background:linear-gradient(90deg,var(--navy),var(--navy-light));
  border-bottom:3px solid var(--gold);
  color:#fff;
  padding:14px 28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.bsd-header .brand{
  font-weight:700;
  font-size:1.15rem;
  letter-spacing:.5px;
}
.bsd-header .brand small{
  display:block;
  font-weight:400;
  font-size:.7rem;
  color:var(--gold-light);
}

.login-wrap{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:radial-gradient(circle at 50% 0%,var(--navy-light),var(--navy) 70%);
}
.login-card{
  background:#fff;
  border-radius:14px;
  padding:40px 36px;
  width:100%;
  max-width:380px;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
  text-align:center;
}
.login-card h1{
  font-size:1.3rem;
  margin:0 0 4px;
  color:var(--navy);
}
.login-card p.tagline{
  color:var(--gold);
  font-size:.8rem;
  margin:0 0 24px;
  font-weight:600;
}
.login-card input{
  width:100%;
  padding:12px 14px;
  margin-bottom:14px;
  border:1px solid #d8d3c4;
  border-radius:8px;
  font-size:.95rem;
  font-family:inherit;
  text-align:right;
}
.login-card input:focus{
  outline:none;
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(201,162,75,.2);
}
.login-card button{
  width:100%;
  padding:13px;
  border:none;
  border-radius:8px;
  background:var(--navy);
  color:#fff;
  font-weight:700;
  font-size:.95rem;
  cursor:pointer;
  transition:.15s;
}
.login-card button:hover{background:var(--navy-light);}
.login-error{
  color:var(--danger);
  font-size:.85rem;
  margin-top:10px;
  min-height:18px;
}

/* ============================================================
   התאמה מלאה לסלולרי / Android - משותף לכל המסכים
   ============================================================ */

/* מונע זום אוטומטי ב-iOS/Android בלחיצה על שדה - כל שדה קלט חייב 16px+ */
input, select, textarea, button{
  font-size:16px;
}
.field label, .filters select, .filters input{ font-size:14px; }

/* כותרת עליונה - עוטפת ולא נחתכת, תפריט גולש אופקית בלי לשבור פריסה */
.bsd-header{
  flex-wrap:wrap;
  gap:8px;
  padding:12px 16px;
}
/* ============================================================
   HEADER BAR — every clickable item in the top bar (nav links,
   the 📋/🛠️/⚙️ dropdown trigger buttons, and the יציאה button)
   shares one uniform 3D-pill treatment: same size, same padding,
   same bold clear text, same tactile depth. Selectors are scoped
   to DIRECT children of .nav (or of its dropdown-wrapper divs) so
   the dark dropdown-menu items inside .bsd-forms-menu are excluded
   and keep their own separate, simpler list style.
   ============================================================ */
.nav-rows{
  /* CRITICAL: without min-width:0, a flex child that contains a
     scrollable row (.nav) refuses to shrink below its content's
     natural width (flexbox default is min-width:auto) — instead of
     the row scrolling internally, the WHOLE HEADER overflows the
     screen and gets silently clipped by html,body{overflow-x:hidden},
     with no way to drag/scroll to the hidden buttons. This is the
     fix for "menus at the top get cut off and I can't move them". */
  min-width:0;
  flex:1 1 auto;
}
.nav{
  display:flex;
  align-items:center;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  white-space:nowrap;
  gap:6px;
  width:100%;
  min-width:0;
  scrollbar-width:thin;
}
.nav > div{ flex:0 0 auto; }

/* Tap-to-scroll arrows for the nav bar on mobile. Dragging a
   horizontally-scrolling flex row with a finger is unreliable on
   many Android devices — a tap that moves even slightly gets
   read as a scroll gesture and the click is swallowed. These give
   a static, always-reliable way to reach cut-off buttons (like
   כלים/הגדרות) instead of depending on a clean drag gesture. */
.nav-row-wrap{ position:relative; min-width:0; flex:1 1 auto; }
.nav-scroll-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:26px;
  height:26px;
  border-radius:50%;
  background:rgba(21,38,69,.95);
  color:#fff;
  border:1px solid rgba(255,255,255,.3);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  font-weight:700;
  line-height:1;
  cursor:pointer;
  z-index:65;
  padding:0;
  box-shadow:0 2px 8px rgba(0,0,0,.45);
  touch-action:manipulation;
}
.nav-scroll-btn.nav-scroll-left{ left:0; }
.nav-scroll-btn.nav-scroll-right{ right:0; }
.nav-scroll-btn[hidden]{ display:none; }
.nav > a,
.nav > div > button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  flex:0 0 auto;
  position:relative;
  box-sizing:border-box;
  height:40px;
  padding:0 16px !important;
  font-size:.86rem !important;
  font-weight:700 !important;
  line-height:1;
  border-radius:9px !important;
  border:none !important;
  color:var(--navy) !important;
  background:#f2efe4 !important;
  text-decoration:none;
  white-space:nowrap;
  font-family:inherit;
  cursor:pointer;
  box-shadow:0 2px 0 rgba(0,0,0,.3), 0 3px 8px rgba(0,0,0,.28), 0 1px 0 rgba(255,255,255,.5) inset;
  transition:box-shadow .16s ease, filter .16s ease, background .16s ease;
}
.nav > a:hover,
.nav > div > button:hover{
  background:#fffdf7 !important;
  filter:brightness(1.02);
  box-shadow:0 3px 0 rgba(0,0,0,.3), 0 8px 16px rgba(0,0,0,.32), 0 1px 0 rgba(255,255,255,.6) inset;
}
.nav > a:active,
.nav > div > button:active{
  background:#e7e3d5 !important;
  filter:none;
  box-shadow:0 1px 0 rgba(0,0,0,.3), 0 1px 3px rgba(0,0,0,.22);
}

/* Current-page indicator: solid gold fill instead of a background
   tint, so it's unmistakably "you are here" while staying the
   exact same size/shape as every other button in the bar. */
.nav > a[style*="rgba(255,255,255,.12)"],
.nav > a.active{
  background:var(--gold) !important;
  color:var(--navy) !important;
  box-shadow:0 2px 0 rgba(0,0,0,.28), 0 4px 10px rgba(0,0,0,.28) !important;
}
.nav > a[style*="rgba(255,255,255,.12)"]:hover,
.nav > a.active:hover{
  filter:brightness(1.08);
  box-shadow:0 2px 0 rgba(0,0,0,.28), 0 4px 10px rgba(0,0,0,.28) !important;
}

/* משימות — keeps its gold identity (it's the item that needs daily
   attention) but is now the same size as every other bar button. */
.nav-tasks{
  background:linear-gradient(135deg,var(--gold-light),var(--gold)) !important;
  color:var(--navy) !important;
}
.nav-tasks:hover{ filter:brightness(1.1); }
.nav-tasks.nav-tasks-current{
  background:linear-gradient(135deg,var(--gold),var(--gold-light)) !important;
  box-shadow:0 2px 8px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.5) !important;
}

/* יציאה — now a direct child of the second .nav row, styled to
   match every other bar button exactly. */
.nav > button.btn-ghost{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:40px;
  padding:0 16px !important;
  font-size:.86rem !important;
  font-weight:700 !important;
  border-radius:9px !important;
  color:var(--navy) !important;
  background:#f2efe4 !important;
  border:none !important;
  box-shadow:0 2px 0 rgba(0,0,0,.3), 0 3px 8px rgba(0,0,0,.28), 0 1px 0 rgba(255,255,255,.5) inset !important;
}
.nav > button.btn-ghost:hover{
  background:#fffdf7 !important;
  box-shadow:0 3px 0 rgba(0,0,0,.3), 0 8px 16px rgba(0,0,0,.32), 0 1px 0 rgba(255,255,255,.6) inset !important;
}


/* ============================================================
   אנימציית לחיצה עדינה ומשעשעת - מופעלת (ע"י auth.js) על כל כפתור
   בכל מקום באפליקציה, לאחר שהלחיצה כבר נרשמה בהצלחה (ולא דרך
   :active/:hover עם transform, כדי לא לחזור על באג הקליקים בדסקטופ).
   ============================================================ */
@keyframes bsdBtnPop{
  0%{ transform:scale(1); }
  35%{ transform:scale(.93); }
  65%{ transform:scale(1.035); }
  100%{ transform:scale(1); }
}
.bsd-btn-pop{
  animation:bsdBtnPop .32s cubic-bezier(.34,1.56,.64,1);
}

/* כפתורי פעולה - גודל נוח ללחיצה (מינימום 44px גובה) */
.btn, .login-card button, .period-btn{
  min-height:44px;
  touch-action:manipulation;
}

/* ============================================================
   3D BUTTON SYSTEM — every .btn across the app gets a tactile,
   professional "raised" look: subtle depth at rest, lifts higher
   with a deepening shadow on hover (so it's unmistakable the
   cursor is over something clickable), and presses down on
   click for real tactile feedback. Background colors defined
   per-page (.btn-primary/.btn-ghost) are untouched — this layer
   only adds depth, motion and a glossy sheen on top of them.
   ============================================================ */
button, .btn{
  position:relative;
  overflow:hidden;
  box-shadow:
    0 1px 0 rgba(255,255,255,.25) inset,
    0 -2px 4px rgba(0,0,0,.12) inset,
    0 3px 0 rgba(14,27,52,.22),
    0 6px 14px rgba(14,27,52,.16);
  transform:translateY(0);
  transition:transform .16s cubic-bezier(.34,1.56,.64,1), box-shadow .16s ease, filter .16s ease;
  will-change:transform;
}
button:hover, .btn:hover{
  transform:translateY(-3px);
  filter:brightness(1.04);
  box-shadow:
    0 1px 0 rgba(255,255,255,.3) inset,
    0 -2px 4px rgba(0,0,0,.12) inset,
    0 5px 0 rgba(14,27,52,.22),
    0 12px 22px rgba(14,27,52,.22);
}
button:active, .btn:active{
  transform:translateY(1px);
  filter:brightness(.98);
  box-shadow:
    0 1px 0 rgba(255,255,255,.18) inset,
    0 -1px 2px rgba(0,0,0,.14) inset,
    0 1px 0 rgba(14,27,52,.22),
    0 2px 5px rgba(14,27,52,.15);
}
button:disabled, .btn:disabled{
  opacity:.55; cursor:not-allowed; transform:none !important; filter:none !important;
  box-shadow:0 1px 0 rgba(14,27,52,.15) !important;
}
.btn-ghost{
  box-shadow:
    0 1px 0 rgba(255,255,255,.5) inset,
    0 2px 0 rgba(0,0,0,.06),
    0 4px 10px rgba(0,0,0,.08);
}
.btn-ghost:hover{
  box-shadow:
    0 1px 0 rgba(255,255,255,.5) inset,
    0 4px 0 rgba(0,0,0,.06),
    0 10px 18px rgba(0,0,0,.12);
}
.btn-ghost:active{
  box-shadow:
    0 1px 0 rgba(255,255,255,.4) inset,
    0 1px 0 rgba(0,0,0,.06),
    0 2px 4px rgba(0,0,0,.08);
}
/* Small icon/row-action buttons (circular ✏️🗑️📄 etc.) get a lighter version
   of the same depth so they match the same design language without
   overpowering a dense table row. */
.row-actions button{
  box-shadow:0 2px 0 rgba(0,0,0,.12), 0 3px 6px rgba(0,0,0,.10);
  transition:transform .14s cubic-bezier(.34,1.56,.64,1), box-shadow .14s ease;
}
.row-actions button:hover{
  box-shadow:0 3px 0 rgba(0,0,0,.14), 0 7px 12px rgba(0,0,0,.16);
}
.row-actions button:active{
  box-shadow:0 1px 0 rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.1);
}
/* Segmented toggle controls (יומי/שבועי/חודשי style) and filter chips —
   flatter depth since they sit inside an already-raised panel. */
.seg button.active, .agent-chip.active{
  box-shadow:0 2px 5px rgba(14,27,52,.25) inset, 0 1px 0 rgba(255,255,255,.15);
}
.agent-chip{
  box-shadow:0 1px 0 rgba(0,0,0,.04), 0 2px 4px rgba(0,0,0,.05);
  transition:transform .14s cubic-bezier(.34,1.56,.64,1), box-shadow .14s ease, border-color .14s ease;
}
.agent-chip:hover{ transform:translateY(-1px); box-shadow:0 3px 8px rgba(0,0,0,.1); }
.kpi-card{
  box-shadow:0 4px 14px rgba(0,0,0,.06), 0 1px 0 rgba(255,255,255,.6) inset;
}


/* חלונות קופצים - תמיד נכנסים למסך, נגללים, וכפתורי שמירה/ביטול תמיד נגישים */
.overlay{
  padding:0;
  align-items:stretch;
}
.modal{
  max-width:100%;
  width:100%;
  height:100%;
  max-height:100%;
  border-radius:0;
  display:flex;
  flex-direction:column;
  padding:20px 16px 0;
}
.modal > form, .modal > div:not(.modal-actions):not(.agr-note):not(.type-toggle):not(.thread){ overflow-y:auto; flex:1; padding-bottom:16px; }
.modal > .agr-note, .modal > .type-toggle, .modal > .thread{ flex:none; }
.modal-actions{
  position:sticky;
  bottom:0;
  background:#fff;
  padding:12px 0;
  margin-top:0;
  border-top:1px solid #eee;
  z-index:5;
}

@media (min-width: 640px){
  .overlay{ padding:40px 20px; align-items:flex-start; }
  .modal{
    max-width:640px;
    height:auto;
    max-height:calc(100vh - 80px);
    border-radius:14px;
    padding:28px;
    overflow-y:auto;
  }
  /* On desktop the modal itself is the single scroll container (fixed max-height,
     overflow-y:auto above) — so its children shouldn't also compete for flex-grow
     space the way they need to on mobile (height:100%). Letting a flex:1 + its own
     overflow-y:auto child sit inside an auto-sized flex parent is exactly the classic
     flexbox trap that can collapse it to a sliver — this sidesteps that entirely by
     giving every child (form, and any extra info panels like the match's participants/
     history) its natural content height instead. */
  .modal > form, .modal > div:not(.modal-actions){ padding-bottom:0; flex:none; overflow-y:visible; }
}

/* טפסים - עמודה אחת בסלולרי */
@media (max-width: 700px){
  .form-grid{ grid-template-columns:1fr !important; }
  .form-grid .full{ grid-column:1 !important; }
  .form-grid .section-h{ grid-column:1 !important; }
  .filters{ flex-direction:column; }
  .filters input, .filters select{ width:100%; min-width:0; }
  .toolbar{ flex-direction:column; align-items:stretch !important; }
  .add-btns{ flex-direction:column; }
  .add-btns .btn{ width:100%; }
  .wrap{ padding:16px !important; }
}

/* טבלאות - הופכות לכרטיסים בסלולרי, נגללות בעדינות אם יש טבלה שלא ניתנת להמרה */
@media (max-width: 700px){
  table thead{ display:none; }
  table, table tbody, table tr, table td{ display:block; width:100%; }
  table{ border-radius:12px; }
  table tr{
    margin-bottom:12px;
    border:1px solid #eee;
    border-radius:12px;
    padding:8px 0;
    background:#fff;
  }
  table td{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    padding:8px 14px;
    border-bottom:1px solid #f5f3ec;
    text-align:right;
  }
  table td:last-child{ border-bottom:none; }
  table td::before{
    content:attr(data-label);
    font-weight:700;
    color:var(--navy);
    font-size:.75rem;
    flex-shrink:0;
  }
  table td.row-actions{ justify-content:flex-start; flex-wrap:wrap; gap:10px; width:100%; box-sizing:border-box; }
  table td.row-actions::before{ content:''; }
}
@media (max-width: 400px){
  table td.row-actions button,
  .row-actions button{ width:34px !important; height:34px !important; padding:5px 6px !important; }
}

/* מניעת גלילה אופקית מיותרת של כל העמוד */
html, body{ overflow-x:hidden; max-width:100%; }
.wrap{ max-width:100%; }

/* לוח בקרה - כרטיסי KPI קטנים יותר במסך צר מאוד */
@media (max-width: 400px){
  .kpi-grid{ grid-template-columns:repeat(2,1fr) !important; }
  .kpi .num{ font-size:1.5rem !important; }
}

/* מסך כניסה - שוליים נוחים גם במסך הכי צר (360px) */
@media (max-width: 380px){
  .login-card{ padding:28px 20px; }
}

/* ============================================================
   הבהוב עמום בטעינה — כל שורה בטבלה (tbody tr) וכל כרטיס עגול
   (.card, .sf-card) שנטענים לדף מקבלים דהייה עדינה של 200ms
   במקום להופיע בבת אחת. משותף לכל הדפים שמחוברים לגיליון הזה.
   ============================================================ */
@keyframes bsdRowFadeIn{
  from{ opacity:0; transform:translateY(4px); }
  to{ opacity:1; transform:translateY(0); }
}
tbody tr:not(.empty-row),
.sf-card,
.card{
  /* fill-mode "backwards" (NOT "both") on purpose: "both" would leave the
     keyframe's transform:translateY(0) permanently applied to the row even
     after the 0.2s animation finishes, which turns the row into a CSS
     "containing block" for any position:fixed descendant inside it (e.g.
     the ⋮ row-actions menu in businesses.html/leads.html) - that silently
     broke the menu's fixed-to-viewport positioning, making it render far
     off-screen. "backwards" keeps the identical fade-in look but drops the
     transform once the animation ends, exactly like the row never had one. */
  animation:bsdRowFadeIn .2s ease-out backwards;
}
@media (prefers-reduced-motion: reduce){
  tbody tr, .sf-card, .card{ animation:none; }
}

/* ============================================================
   מצב טעינה על כפתור פעולה (ר' bsdSetButtonLoading ב-js/auth.js) -
   ספינר קטן + טקסט, במקום שהכפתור פשוט "ישתתק" עד שהשרת מסיים.
   ============================================================ */
.btn-loading{ cursor:wait !important; opacity:.85; pointer-events:none; display:inline-flex; align-items:center; gap:8px; justify-content:center; }
.btn-spinner{
  display:inline-block; width:14px; height:14px; flex:0 0 auto;
  border:2px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%;
  animation:bsdSpin .6s linear infinite;
}
.btn-ghost .btn-spinner{ border-color:rgba(14,27,52,.25); border-top-color:var(--navy); }
@keyframes bsdSpin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
  .btn-spinner{ animation:none; }
}