/* =======================
   Vars + Base
======================= */
:root{
  --bg:#f6f7fb; --card:#fff; --ink:#0f172a; --muted:#6b7280; --ring:#e5e7eb;
  --shadow:0 10px 30px rgba(0,0,0,.08); --radius:16px; --primary:#0ea5e9;
  --success:#10b981; --warn:#f59e0b; --danger:#ef4444; --ready:#22c55e;
  --paid:#8b5cf6; --delivered:#06b6d4;

  --order-items-visible: 3;
  --order-item-row: 26px;
}

*{ box-sizing:border-box }
html,body{ height:100%; margin:0 }

html{
  background:
    radial-gradient(900px 500px at 85% -5%, #c7d2fe33 0%, transparent 60%),
    radial-gradient(700px 420px at 10% -10%, #93c5fd33 0%, transparent 65%),
    radial-gradient(900px 520px at 50% 110%, #bbf7d033 0%, transparent 60%),
    linear-gradient(180deg, #3977a0 0%, #e0bdbd 35%, #1373d3 100%);
  background-attachment: fixed;
}

body{
  font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;
  color: var(--ink);
  background: transparent !important;
}

.visually-hidden{
  position:absolute!important; inset:auto auto auto -9999px!important;
  width:1px; height:1px; overflow:hidden
}

/* =======================
   Wrapper
======================= */
.wrap{
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 14px;
  max-width:1300px; margin:18px auto; padding:0 14px;
}

.edge-to-edge .wrap{
  width: 100% !important;
  max-width:none !important;
  margin:0 !important;
  padding-inline:18px !important;
  padding-block:14px;
  box-sizing:border-box;
  display:grid;
  grid-template-rows:auto auto 1fr;
  gap:14px;
}

@supports (min-height: 100dvh){ .wrap{ min-height: 100dvh; } }

html, body{
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-x: none;
}

.wrap, .topbar, .tb-row, .dock, .summary, .cols, .col, .col > div:last-child{
  min-width: 0 !important;
  overflow-x: clip !important;
}

/* =======================
   Topbar base
======================= */
.topbar{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between;
  background: rgba(141, 143, 142, 0.85);
  border:1px solid var(--ring);
  border-radius:var(--radius);
  padding:12px 14px;
  box-shadow:var(--shadow);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.topbar.pro{
  position:sticky; top:0; z-index:1000; display:grid; gap:10px;
  background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.78)) !important;
  border:1px solid var(--ring);
  border-radius:20px; padding:12px 14px; box-shadow:var(--shadow);
}

/* =======================
   NEO HEADER
======================= */
.neo-header{ position:sticky; top:0; z-index:1000; isolation:isolate; }
.neo-header .neo-bg{
  position:absolute; inset:-8px 0 0 0; z-index:-1;
  background:
    radial-gradient(1200px 500px at 85% -10%, #a5b4fc3a 0%, transparent 60%),
    radial-gradient(900px 500px at 15% -20%, #7dd3fc3a 0%, transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.72));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--ring);
}
.neo-row{
  display:grid;
  grid-template-columns: auto 1fr auto;  /* Brand | Search | Actions (בשמאל) */
  gap:12px; align-items:center; padding:10px 14px;
}

/* Brand + clock under the title */
.neo-brand{ display:flex; align-items:flex-start; gap:10px; min-width:0 }
.neo-logo{
  width:44px; height:44px; border-radius:14px; display:grid; place-items:center; font-size:20px;
  background: conic-gradient(from 180deg at 50% 50%, #fff, #dbeafe, #fff);
  border:1px solid var(--ring);
}
.neo-brand-txt h1{ margin:0; font-size:22px; line-height:1.2; }
.neo-brand-txt .sub{ font-size:12px; color:var(--muted); margin-top:2px }
.clock.under-title{ margin-top:6px; text-align:start }
.clock.under-title .time{ font-size:1.2rem; font-weight:800 }
.clock.under-title .date{ font-size:.88rem; opacity:.8 }

/* Search */
.neo-search{ position:relative; display:flex; align-items:center; }
.neo-search .i{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2; position:absolute; inset-inline-end:12px; pointer-events:none; opacity:.7; }
.neo-search-input{
  width:min(72vw, 720px);
  padding:12px 40px 12px 40px; /* מקום לאייקון ול-X */
  border:1px solid var(--ring); border-radius:999px; background:#fff;
  box-shadow:0 6px 18px rgba(15,23,42,.06);
}
.neo-clear{
  position:absolute; inset-block:0; inset-inline-start:8px;
  display:grid; place-items:center; padding:0 6px; border:0; background:transparent; cursor:pointer;
  z-index:3; opacity:0; pointer-events:none; transition:opacity .15s ease;
}
.neo-clear .i{ width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2; opacity:.65; }
.neo-clear.show{ opacity:1; pointer-events:auto; }

/* Actions (בקו השמאלי) */
.neo-actions{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-start; }
.actions-sep{ width:1px; height:24px; background:linear-gradient(180deg,#e7eaf1,transparent,#e7eaf1); margin-inline:6px; opacity:.9; }

/* mini clock (לשימוש כללי אם יש) */
.topbar .clock.mini{ margin-inline-start:auto; text-align:end }
.topbar .clock.mini .time{ font-size:1.6rem }
.topbar .clock.mini .date{ font-size:.9rem; opacity:.8 }

/* Responsive */
@media (max-width: 1060px){
  .neo-row{ grid-template-columns: 1fr; gap:10px; }
  .neo-search-input{ width:100%; }
}
@media (max-width: 680px){
  .neo-brand-txt h1{ font-size:18px }
  .neo-logo{ width:40px; height:40px }
}

/* =======================
   Controls & Buttons
======================= */
.controls{ display:flex; flex-wrap:wrap; gap:8px; align-items:center }
.btn{
  border:1px solid var(--ring);
  padding:10px 14px; border-radius:12px; cursor:pointer; font-weight:700;
  background:#fff; color:#0f172a; box-shadow:var(--shadow);
  transition: transform .04s ease, filter .15s ease;
}
.btn:hover{ filter:brightness(1.02) }
.btn:active{ transform:translateY(1px) }
.btn.primary{ background:linear-gradient(180deg,#38bdf8,#0ea5e9); border-color:transparent; color:#fff }
.btn.success{ background:var(--success); color:#fff; border-color:transparent }
.btn.danger{ background:#fee2e2; border-color:#fecaca; color:#991b1b }
.btn.ghost{ background:#ffffff; border-color:var(--ring) }
.btn.deliver{ background:var(--delivered); color:#fff; border-color:transparent }

.i-btn{
  position:relative; display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:12px; border:1px solid var(--ring);
  background:#fff; cursor:pointer; font-weight:800;
  box-shadow:0 6px 18px rgba(15,23,42,.06);
  transition:transform .06s ease, filter .15s ease;
}
.i-btn:hover{ filter:brightness(1.02) }
.i-btn:active{ transform:translateY(1px) }
.i-btn.ghost{ background:#f9fafb }
.i-btn.toggle.on{ background:var(--success); color:#fff; border-color:transparent }
.i-btn .i{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:0 0 auto }
.i-btn .badge{
  position:absolute; inset-block-start:-6px; inset-inline-start:-6px;
  background:#10b981; color:#fff; border-radius:999px; font-size:10px; padding:2px 6px; font-weight:900;
}
.i-btn .pill{ margin-inline-start:4px; background:#111827; color:#fff; border-radius:999px; font-size:10px; padding:2px 6px; font-weight:900 }

.userbox, .userbox.pro{ display:flex; align-items:center; gap:8px }
.user-badge{
  display:none; align-items:center; gap:8px; background:#f3f4f6; border:1px solid var(--ring);
  padding:6px 10px; border-radius:999px; font-weight:800;
}
.user-badge.show{ display:inline-flex }
.user-badge .dot{ width:8px; height:8px; border-radius:999px; background:var(--muted) }
.user-badge .dot-on{ background:var(--success) }
.btn-logout{
  background:#fff; color:var(--danger); border:1px solid var(--danger);
  border-radius:12px; padding:6px 10px; font-weight:800; cursor:pointer;
}

/* =======================
   Columns
======================= */
.cols{
  display:grid;
  grid-template-columns:repeat(5, minmax(0,1fr));
  gap:14px;
  margin-top:14px;
  height:100%;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden !important;
}
@media (max-width:1440px){ .cols{ grid-template-columns:repeat(4,1fr) } }
@media (max-width:1200px){ .cols{ grid-template-columns:repeat(3,1fr) } }
@media (max-width:900px){  .cols{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:680px){  .cols{ grid-template-columns:1fr } }

.col,.summary .card,.order{
  background:rgba(255,255,255,0.82);
  border:1px solid var(--ring);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

.col{ padding:12px; display:flex; flex-direction:column; min-height:0 }
.col-title{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  margin:4px 0 14px; font-size:22px; font-weight:900; color:#1e3a8a;
  text-transform:uppercase; letter-spacing:1px;
  border-bottom:3px solid #38bdf8; padding-bottom:6px;
}
.col-title .badge{
  background:linear-gradient(135deg, #38bdf8, #0ea5e9);
  color:#fff; border-radius:999px; padding:6px 12px; font-size:13px; font-weight:600; border:none;
  min-width:40px; text-align:center; box-shadow:0 2px 6px rgba(0,0,0,0.15);
}
.status-new .dot{ background:var(--primary) }
.status-preparing .dot{ background:var(--warn) }
.status-ready .dot{ background:var(--ready) }
.status-delivered .dot{ background:var(--delivered) }
.status-paid .dot{ background:var(--paid) }
.dot{ width:10px; height:10px; border-radius:999px; display:inline-block; margin-inline-start:6px }

.col > div:last-child{
  flex:1 1 0;
  min-height:0;
  overflow:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}

/* =======================
   Order Card
======================= */
.order{
  border-radius:14px; padding:10px; margin-bottom:10px;
  box-shadow:0 6px 18px rgba(15,23,42,.06);
  transition:transform .06s ease, box-shadow .15s ease;
  border-left:6px solid transparent;
}
.order:hover{ transform:translateY(-1px); box-shadow:0 10px 24px rgba(15,23,42,.1) }

.order .head.head-kv{ padding-bottom:6px }
.order .head .kv{
  display:grid;
  grid-template-columns: max-content 1fr;
  column-gap:10px; row-gap:6px; align-items:center;
}

/* ===== הדגשה + פורמט "KEY : VALUE" בשורה ===== */
.order .head .kv .k{
  font-size:18px; font-weight:900; white-space:nowrap;
}
.order .head .kv .k::after{ content:" :" }
.order .head .kv .v{
  font-size:20px; font-weight:900; line-height:1.3; color:#0b1220;
}

/* התאמה למסכים קטנים */
@media (max-width: 680px){
  .order .head .kv .k{ font-size:16px }
  .order .head .kv .v{ font-size:18px }
}

.order .meta{ font-size:16px; color:var(--muted) }
.order .items{ margin-top:6px; color:#0b1220; max-height:none !important; overflow:visible !important; padding-inline-end:0 !important; }
.order .items div{ padding:4px 0; border-bottom:1px dashed #eef2f7; line-height: var(--order-item-row) }
.order .actions{ display:flex; gap:6px; flex-wrap:wrap; margin-top:8px }
.order .actions .btn{ padding:8px 10px; border-radius:10px }

.note{ margin-top:6px; padding:8px 10px; border-radius:10px; font-size:13px; line-height:1.4;
  border:1px dashed #d6dbe3; background:#f8fafc; color:#0f172a }
.order-note{ border-color:#93c5fd; background:#eff6ff }
.item-note{ border-color:#fde68a; background:#fefce8 }

.order.status-new{ border-left-color:#0ea5e9; background:#f0f9ff }
.order.status-preparing{ border-left-color:#f59e0b; background:#fff7ed }
.order.status-ready{ border-left-color:#22c55e; background:#f0fdf4 }
.order.status-delivered{ border-left-color:#a78bfa; background:#f5f3ff }
.order.status-paid{ border-left-color:#64748b; background:#f8fafc }
@keyframes flashPulse{0%{box-shadow:0 0 0 0 rgba(56,189,248,.9)}70%{box-shadow:0 0 0 16px rgba(56,189,248,0)}100%{box-shadow:0 0 0 0 rgba(56,189,248,0)}}
.order.flash{ animation:flashPulse 1s ease-out 0s infinite }
@media (prefers-reduced-motion:reduce){ .order.flash{ animation-duration:2.5s } }

/* =======================
   Summary
======================= */
.summary{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; margin-top:12px
}
.summary .card{ display:flex; align-items:center; justify-content:space-between; padding:12px; border-radius:14px }
.summary .title{ font-weight:900; color:var(--ink) }
.summary .right{ text-align:end }
.summary .amt{ font-size:20px; font-weight:900 }
.summary .sub{ font-size:12px; color:var(--muted) }
.summary .paid .amt{ color:var(--paid) }
.summary .deliv .amt{ color:var(--delivered) }

/* =======================
   Clock (generic big)
======================= */
.clock{ display:flex; flex-direction:column; justify-content:center; margin-inline-start:auto; padding-inline:12px; text-align:end; line-height:1.1 }
.clock .time{ font-size:2.4rem; font-weight:800; letter-spacing:.5px }
.clock .date{ font-size:1rem; opacity:.8 }
@media (max-width:720px){
  .clock .time{ font-size:1.8rem }
  .clock .date{ font-size:.9rem }
}

/* =======================
   Toast
======================= */
.toast{
  position:fixed; inset-inline-end:16px; inset-block-end:16px;
  background:linear-gradient(180deg,#10b981,#059669);
  color:#fff; padding:12px 14px; border-radius:14px; box-shadow:var(--shadow);
  display:none; z-index:9999; font-weight:900; min-width:200px; text-align:center
}
:is(button,select,input):focus-visible{ outline:none; box-shadow:0 0 0 4px rgba(14,165,233,.25) }

/* =======================
   Login
======================= */
.hidden{ display:none!important }
.login-backdrop{
  position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:2000;
  background:
    radial-gradient(1000px 700px at 80% -10%, #a5b4fc40 0%, transparent 60%),
    radial-gradient(900px 600px at 15% 10%,  #7dd3fc40 0%, transparent 60%),
    radial-gradient(900px 620px at 50% 110%, #86efac40 0%, transparent 65%),
    linear-gradient(160deg, #eef2ff 0%, #f0f9ff 45%, #f7fee7 100%);
}
.login-card{
  width:min(92vw,440px);
  background:rgba(255,255,255,0.78);
  border:1px solid #e8eef6; border-radius:18px;
  box-shadow:0 18px 50px rgba(15,23,42,.10);
  padding:22px 20px;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  animation:login-pop .18s ease-out both;
}
@keyframes login-pop{ from{ transform:translateY(10px) scale(.98); opacity:0 } to{ transform:translateY(0) scale(1); opacity:1 } }
.login-head{ display:flex; align-items:center; gap:10px; margin-bottom:10px }
.login-head .logo{ width:40px; height:40px; border-radius:12px; display:grid; place-items:center; font-size:18px; background:linear-gradient(180deg,#eef2ff,#e0e7ff); border:1px solid #e5e7eb }
.login-card h2{ margin:0 0 8px; font-size:22px }
.login-card p{ margin:0 0 14px; color:#546e7a }
.login-card .row{ display:flex; flex-direction:column; gap:6px; margin-bottom:10px }
.login-card input{ padding:10px 12px; border:1px solid #e6e9f2; border-radius:12px; font-size:15px; background:#ffffffcc }
.login-card .actions{ display:flex; gap:8px; margin-top:6px; align-items:center }
#authMsg{ color:#d32f2f; font-weight:700; min-height:18px }
.login-foot{ display:flex; justify-content:space-between; align-items:center; margin-top:8px; color:#607d8b; font-size:13px }

/* =======================
   Scrollbars
======================= */
.col > div:last-child::-webkit-scrollbar{ width:8px }
.col > div:last-child::-webkit-scrollbar-thumb{ background:#cbd5e1; border-radius:8px }

/* =======================
   Responsive columns (explicit)
======================= */
@media (min-width:1440px){
  .wrap{ padding:18px; gap:16px }
  .cols{ grid-template-columns: repeat(5, minmax(0,1fr)) !important; }
}
@media (min-width:1200px) and (max-width:1439px){
  .cols{ grid-template-columns: repeat(4, minmax(0,1fr)) !important; }
}
@media (min-width:820px) and (max-width:1199px){
  .cols{ grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
}
@media (min-width:681px) and (max-width:819px){
  .cols{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}
@media (max-width:680px){
  .cols{ grid-template-columns: 1fr !important; }
}

/* =======================
   Mobile quirks
======================= */
@media (max-width: 920px){
  html{ background-attachment: scroll !important; }
}

/* Safety */
.cols, .col, .col > div:last-child{ min-height: 0 !important; }
img, svg, canvas, video{ max-width:100%; height:auto; }
.dock{ min-width:0; }
.dock > *{ min-width:0; }

/* ביטול גלילה פנימית בפריטי הזמנה */
.order .items::-webkit-scrollbar{ display: none !important; width: 0 !important; }
.order .items::-webkit-scrollbar-thumb{ background: transparent !important; }

/* מצב הכפתור "השתק" – תמיד גלוי, אבל מושבת כשאין צלצול */
#btnStopAlarmTop[disabled] { opacity: .45; cursor: not-allowed; }
#btnStopAlarmTop.active { background:#fee2e2; border-color:#fecaca; color:#991b1b; }


/* Email + logout + status network left side */
/* אזור הפעולות בהדר */
.neo-actions{ display:flex; align-items:center; gap:8px }

/* סדר התצוגה (RTL): פריטים עם order גבוה יותר יופיעו יותר שמאלה */
#btnStopAlarmTop{ order:98 }              /* קודם משמאל: השתק */
#userBadge, #btnLogoutTop{ order:99 }     /* אחרי השתק: אימייל + יציאה */

/* עידון ויזואלי לתגית האימייל */
.neo-actions .user-badge{
  display:inline-flex; align-items:center; gap:8px;
  background:#f3f4f6; border:1px solid var(--ring);
  padding:6px 10px; border-radius:999px; font-weight:800;
}
.neo-actions .user-badge .dot{ width:8px; height:8px; border-radius:999px; background:#10b981 }
.btn-logout{ background:#fff; color:#ef4444; border:1px solid #fecaca; border-radius:12px; padding:6px 10px; font-weight:800 }


/* d */
/* ===== Mobile-Safe: מציג UI במקום רקע בלבד (תיקון fixed+blur) ===== */
@media (max-width: 920px), (pointer: coarse) {
  /* 1) אל תשתמש ב-fixed למובייל (מונע באג ציור) */
  html {
    background-attachment: scroll !important;
    background-size: cover !important;
    background-position: center top !important;
  }

  /* 2) בטל blur\backdrop שיכול לגרום לשכבות "להיעלם" במובייל */
  .topbar,
  .topbar.pro,
  .dock,
  .summary .card,
  .col,
  .order,
  .login-backdrop,
  .login-card {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* 3) נעילת פריסת העמוד – שלא תקרוס */
  .wrap {
    display: grid !important;
    grid-template-rows: auto auto 1fr !important;
    min-height: 100dvh !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 12px 14px !important;
  }

  /* 4) גלילה אנכית בלבד – בלי זחילה לצדדים */
  html, body, .wrap, .cols, .col, .col > div:last-child {
    overflow-x: hidden !important;
  }

  /* 5) הביטחוניים – שלא יסתירו שכבות אחרות */
  .topbar.pro { position: sticky; top: 0; z-index: 1000; }
  .summary    { z-index: 1; }
}

/* אם נשאר לך כלל שמכריח width:100vw – ודא שהוא מוחלף ל-100% */
.edge-to-edge .wrap { width: 100% !important; }



/* ===== Desktop-only blur & fixed background ===== */
@media (min-width: 921px) and (pointer: fine) {
  /* פרלקסה נעימה רק בדסקטופ */
  html{
    background-attachment: fixed !important;
    background-size: cover !important;
    background-position: center top !important;
  }

  /* החזרת ה-blur לכרטיסים/הדר וכו' רק בדסקטופ */
  .topbar,
  .topbar.pro,
  .dock,
  .summary .card,
  .col,
  .order,
  .login-backdrop,
  .login-card{
    backdrop-filter: blur(10px) saturate(1.1);
    -webkit-backdrop-filter: blur(10px) saturate(1.1);
  }
}


/* 
 */
 /*  */

 /* === HOTFIX: Mobile/Tablet layout + search clear + header order === */

/* 0) אל תתן לרכיבי-פנים לחתוך לרוחב (RTL + grid עלול להיעלם) */
.wrap, .topbar, .tb-row, .dock, .summary, .cols, .col, .col > div:last-child{
  overflow-x: visible !important;   /* היה clip → עלול לחתוך את כל המסך */
}

/* 1) רק הדף עצמו חוסם גלילה אופקית; שאר המכולות לא חותכות */
html, body{ overflow-x: hidden !important; }

/* 2) מובייל/טאבלט: בטל blur, width מלא, וגובה יציב לרשת העמודות */
@media (max-width: 920px), (pointer: coarse){
  /* רקע ללא fixed (כבר אצלך), והבטחת פריסה */
  html{
    background-attachment: scroll !important;
    background-size: cover !important;
    background-position: center top !important;
  }

  .wrap{
    display:grid !important;
    grid-template-rows:auto auto 1fr !important;
    min-height: 100svh !important;
    width:100% !important;
    margin:0 auto !important;
    padding:12px 14px !important;
  }

  /* רשת העמודות לא תקרוס, גובה אוטומטי, ורוחב מלא */
  .cols{
    height:auto !important;
    grid-auto-rows:minmax(0,auto) !important;
    width:100% !important;
  }
  .col{ min-width:0 !important; }
  .neo-row, .neo-search, .neo-search-input{ width:100% !important; }

  /* מבטל blur שגורם ל״העלמות״ בשכבות בניידים */
  .topbar, .topbar.pro, .dock, .summary .card, .col, .order, .login-backdrop, .login-card{
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }
}

/* 3) החזרת blur + fixed רק בדסקטופ */
@media (min-width: 921px) and (pointer: fine){
  html{
    background-attachment: fixed !important;
    background-size: cover !important;
    background-position: center top !important;
  }
  .topbar, .topbar.pro, .dock, .summary .card, .col, .order, .login-backdrop, .login-card{
    backdrop-filter: blur(10px) saturate(1.1);
    -webkit-backdrop-filter: blur(10px) saturate(1.1);
  }
}

/* 4) כפתור ה-X המובנה של input[type=search] לא ישלוט; נשתמש בשלנו */
.neo-search-input::-webkit-search-cancel-button{ -webkit-appearance:none; appearance:none; }
.neo-search-input::-ms-clear{ display:none; width:0; height:0; }

/* הגדלת אזור לחיצה ל-X שלנו במובייל */
@media (max-width:920px){
  .neo-clear{ inset-inline-start:4px; padding:0 10px; }
}

/* 5) הבטחה שהרקע של ההדר לא תופס קליקים בשום מצב */
.neo-header .neo-bg{ pointer-events:none; }

/* 6) סדר הכפתורים: "השתק" ואז אימייל + יציאה בצד שמאל (RTL) */
.neo-actions{ flex-wrap:nowrap; }
#btnStopAlarmTop{ order:98; }
#userBadge{ order:99; }
#btnLogoutTop{ order:100; }

/* 7) ביטחוני: רכיבי עמודה לעולם לא יחנקו בגובה */
.cols, .col, .col > div:last-child{ min-height:0 !important; }


/* טאבלט ומובייל עמודות */

/* =========================================================================
   MOBILE & TABLET LAYOUT — columns reimagined (desktop stays the same)
   הדבק בסוף הקובץ כדי שיעקוף חוקים קודמים
===========================================================================*/

/* ===== Tablet: שתי עמודות קריאות ===== */
@media (min-width: 681px) and (max-width: 1024px){
  .cols{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
    overflow-x: hidden !important; /* טבלט לא מחליקים אופקית */
  }
}

/* ===== Mobile: כל עמודה = מסך מלא, מחליקים ביניהן ===== */
@media (max-width: 680px){
  /* הופכים את מכולת העמודות לקרוסלה נוחה */
  .cols{
    display: flex !important;
    gap: 10px !important;
    overflow-x: auto !important;           /* לעקוף את hidden/clip הקודם */
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding-bottom: 8px;
  }

  /* כל עמודה בגודל מסך (פחות ריווח פנימי) */
  .col{
    flex: 0 0 calc(100vw - 32px);
    max-width: calc(100vw - 32px);
    min-width: calc(100vw - 32px);
    scroll-snap-align: start;
    border-radius: 18px;
    padding: 12px;
  }

  /* כותרת הסטטוס דביקה בראש המסך לשמירה על הקשר */
  .col-title{
    position: sticky;
    top: 0;
    z-index: 5;
    margin: -12px -12px 10px;      /* מותח את הכותרת לרוחב הכרטיס */
    padding: 10px 12px;
    border-bottom: none;
    background: rgba(255,255,255,0.92);
    backdrop-filter: saturate(1.05);
    -webkit-backdrop-filter: saturate(1.05);
    box-shadow: 0 8px 16px rgba(15,23,42,.06);
  }
  .col-title .badge{ transform: translateY(-1px); }

  /* כרטיס הזמנה קריא יותר בנייד */
  .order{
    margin: 10px 0;
    padding: 12px;
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(15,23,42,.08);
  }

  /* KEY : VALUE בשורה אחת (כפי שביקשת) */
  .order .head .kv{
    grid-template-columns: 1fr !important;  /* במקום "מפתח | ערך" בעמודות */
    row-gap: 8px;
  }
  .order .head .kv .k,
  .order .head .kv .v{
    display: inline;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.4;
  }
  .order .head .kv .k::after{
    content: " :";
    margin-inline: 4px;
  }

  .order .meta{ font-size: 14px; }
  .order .items div{ line-height: 1.6; }
  .order .actions .btn{ padding: 10px 12px; font-size: 14px; }

  /* שיפור גלילה — להסתיר פס גלילה אופקי */
  .cols::-webkit-scrollbar{ height: 6px }
  .cols::-webkit-scrollbar-thumb{ background: #cbd5e1; border-radius: 999px }
}

/* ===== אייקונים קטנים לכותרות הסטטוסים במובייל (קוסמטי בלבד) ===== */
@media (max-width: 680px){
  .status-new     .dot{ background: var(--primary) }
  .status-preparing .dot{ background: var(--warn) }
  .status-ready     .dot{ background: var(--ready) }
  .status-delivered .dot{ background: var(--delivered) }
  .status-paid      .dot{ background: var(--paid) }
}

/* =========================================================================
   MOBILE & TABLET LAYOUT (Desktop stays as-is)
   הדבק בסוף הקובץ
===========================================================================*/

/* ===== Mobile: עמודה אחת, גלילה אנכית; כרטיסים עם סווייפ שמאלה/ימינה ===== */
@media (max-width: 680px){
  .cols{
    display: block !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    gap: 0 !important;
  }
  .col{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-bottom: 14px;
  }

  /* כותרת סטטוס דביקה ונקייה */
  .col-title{
    position: sticky;
    top: 0;
    z-index: 5;
    margin: -12px -12px 10px;   /* מותח לרוחב הכרטיס */
    padding: 10px 12px;
    background: rgba(255,255,255,0.95);
    border-bottom: none;
    box-shadow: 0 8px 16px rgba(15,23,42,.06);
  }

  /* כרטיס: מוכן לאנימציית סווייפ; pan-y שומר על גלילה אנכית */
  .order{
    transition: transform .15s ease;
    touch-action: pan-y;
    will-change: transform;
    margin: 10px 0;
    padding: 12px;
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(15,23,42,.08);
  }
  .order.swiping{ transition: none; }

  /* KEY:VALUE בשורה אחת – נשאר כמו שביקשת */
  .order .head .kv{
    grid-template-columns: 1fr !important;
    row-gap: 8px;
  }
  .order .head .kv .k,
  .order .head .kv .v{
    display: inline;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.4;
  }
  .order .head .kv .k::after{ content: " :"; margin-inline: 4px; }
}

/* ===== Tablet: 2 עמודות בפריים, גרירה אופקית חושפת עוד 2 ===== */
@media (min-width: 681px) and (max-width: 1024px){
  .cols{
    display: flex !important;
    gap: 14px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding-bottom: 8px;
  }

  /* כל עמודה תופסת ~חצי מסך; נצמדים להתחלה בכל זוג */
  .col{
    flex: 0 0 calc(50vw - 28px);
    max-width: calc(50vw - 28px);
    scroll-snap-align: none;
  }
  .col:nth-child(odd){ scroll-snap-align: start; } /* נקודת סנאפ על כל זוג */
}


/*  */
/* ============================================================
   Phone + Tablet: שתי עמודות קבועות (50%–50%) במסילת עמודות
   גלילה אופקית בין עמודות, גלילה אנכית בתוך כל עמודה
   (חל על כל מסכים עד 1024px — גם מובייל וגם טאבלט)
============================================================ */
@media (max-width: 1024px){

  /* הופך את הגריד למסילה אופקית */
  .cols{
    display: flex !important;
    grid-template-columns: none !important;
    gap: 14px !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;

    scroll-snap-type: x mandatory;
    padding-bottom: 8px;
  }

  /* כל עמודה = חצי מסך פחות המרווחים, כך שתמיד ייכנסו 2 */
  .col{
    flex: 0 0 calc(50vw - 28px) !important;
    max-width: calc(50vw - 28px) !important;
    min-width: 280px; /* ביטוח למסכים צרים מאוד */
    scroll-snap-align: start;
    margin: 0; /* מבטל מרווחים מהגריד הישן */
  }

  /* גלילה אנכית של ההזמנות בתוך העמודה */
  .col > div:last-child{
    overflow: auto !important;
    max-height: none !important;
    -webkit-overflow-scrolling: touch;
  }

  /* כותרת סטטוס דביקה בראש כל עמודה */
  .col-title{
    position: sticky;
    top: 0;
    z-index: 2;
    margin: -12px -12px 8px;
    padding: 10px 12px;
    background: rgba(255,255,255,0.96);
    box-shadow: 0 8px 16px rgba(15,23,42,.06);
    border-bottom: 0;
  }

  /* כרטיסים קומפקטיים ונעימים למגע */
  .order{
    margin: 10px 0;
    padding: 12px;
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(15,23,42,.08);
    transition: transform .12s ease;
    touch-action: pan-y; /* מחוות אנכיות בתוך העמודה */
  }
  .order:active{ transform: translateY(1px); }

  /* Key : Value באותה שורה (אם עדיין לא עשית) */
  .order .head .kv{
    grid-template-columns: 1fr !important;
    row-gap: 8px;
  }
  .order .head .kv .k,
  .order .head .kv .v{
    display: inline;
    font-weight: 800;
    line-height: 1.4;
  }
  .order .head .kv .k::after{ content: " :"; margin-inline: 4px; }
}

/* שיפור חוויית גרירה במסילה */
.cols{ overscroll-behavior-x: contain; }



/* גרסת מובייל בלבד */
/* ============================================================
   📱 טלפון בלבד (<=680px): כותרת מסודרת, חיפוש לא יגלוש,
   כפתורים מיושרים, וטיפוגרפיה קטנה יותר בכרטיסים
============================================================ */
@media (max-width: 680px){

  /* --- HEADER (neo-header) --- */
  .neo-row{
    grid-template-columns: 1fr !important;    /* עמודה אחת */
    gap: 10px !important;
    padding: 10px 10px !important;
  }

  .neo-brand{
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  .neo-brand-txt h1{
    font-size: 18px !important;
    margin: 0;
  }
  .neo-brand-txt .sub{
    font-size: 12px !important;
    margin-top: 2px;
  }

  /* שעון מתחת לכותרת, מיושר מרכז */
  .clock.under-title{
    margin-top: 4px;
    text-align: center !important;
  }
  .clock.under-title .time{ font-size: 1.1rem !important; }
  .clock.under-title .date{ font-size: .82rem !important; }

  /* שדה חיפוש — 100% רוחב, לא גולש מהכרטיס */
  .neo-search{
    width: 100% !important;
    overflow: hidden;                 /* מונע גלישה של הצל/רדיוס */
  }
  .neo-search-input{
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 10px 38px !important;    /* מקום לאייקון ול-X */
    font-size: 14px !important;
  }
  .neo-search .i{ inset-inline-end: 10px !important; }
  .neo-clear{ inset-inline-start: 6px !important; }

  /* פס הכפתורים – שורה מסודרת במרכז, עם שבירה נקייה */
  .neo-actions{
    width: 100%;
    justify-content: center !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
  }
  .neo-actions .i-btn,
  .neo-actions .btn,
  .neo-actions .i-select,
  .neo-actions select{
    padding: 8px 10px !important;
    border-radius: 12px !important;
  }

  /* שומרים על הסדר הרצוי (ימין→שמאל ב-RTL) */
  #btnStopAlarmTop{ order: 97; }
  #userBadge{ order: 98; }
  #btnLogoutTop{ order: 99; }

  /* --- כרטיסי הזמנה (קטן ונוח למסך קטן) --- */
  .order{
    padding: 10px !important;
    border-radius: 12px !important;
  }
  .order .head .kv .k{
    font-size: 14px !important;
    font-weight: 800 !important;
  }
  .order .head .kv .v{
    font-size: 16px !important;
    font-weight: 900 !important;
  }
  .order .meta{ font-size: 14px !important; }
  .order .items div{
    font-size: 14px !important;
    line-height: 22px !important;
  }

  /* תגיות קטנות יותר בכותרות העמודות */
  .col-title{ font-size: 18px !important; }
  .col-title .badge{ padding: 4px 10px !important; font-size: 12px !important; }
}

/* ביטוח נגד גלישה אופקית במובייל */
@media (max-width: 680px){
  html, body, .wrap, .neo-header, .summary, .cols{
    overflow-x: hidden !important;
  }
}


/*  */
/* ============================================================
   📱 מובייל (≤680px): עמודה אחת לכל מסך + גלילה אופקית בין עמודות,
   ובתוך כל עמודה גלילה אנכית לכרטיסים
============================================================ */
@media (max-width: 680px){

  /* מכולת העמודות הופכת לקרוסלה אופקית */
  .cols{
    display: flex !important;
    gap: 14px !important;
    overflow-x: auto !important;   /* גלילה ימינה/שמאלה בין העמודות */
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory; /* סנאפ לעמודה הבאה */
    scroll-padding-inline: 14px;   /* יישור לסנאפ מול הריווח */
    padding-bottom: 8px;
    touch-action: pan-x;           /* מחזק גלילה אופקית במכולת העמודות */
  }

  /* עמודה אחת בדיוק לרוחב המסך (עם התחשבות בריווחים) */
  .col{
    flex: 0 0 calc(100% - 28px) !important;
    max-width: calc(100% - 28px) !important;
    scroll-snap-align: start;
    height: var(--mobile-col-h, 70vh) !important; /* גובה קבוע כדי שהרשימה הפנימית תגלול */
    overflow: hidden; /* שלא יווצרו סרגלים כפולים */
  }

  /* הכותרת של כל עמודה נשארת למעלה בעת גלילה אנכית */
  .col-title{
    position: sticky; top: 0; z-index: 1;
    margin: 0 0 6px 0 !important;
    padding: 10px 8px !important;
    background: rgba(255,255,255,.92);
    border-bottom-width: 2px;
  }

  /* הגוף הפנימי של העמודה – גולל אנכית את הכרטיסים */
  .col > div:last-child{
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto !important;     /* גלילה למעלה/למטה בתוך העמודה */
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;              /* מונע קונפליקט עם הגלילה האופקית של .cols */
  }

  /* טיפוגרפיה מעט קטנה יותר במובייל (רק לכרטיסים) */
  .order{ padding: 10px !important; border-radius: 12px !important; }
  .order .head .kv .k{ font-size: 14px !important; font-weight: 800 !important; }
  .order .head .kv .v{ font-size: 16px !important; font-weight: 900 !important; }
  .order .meta{ font-size: 14px !important; }
  .order .items div{ font-size: 14px !important; line-height: 22px !important; }

  /* ביטוח נגד גלישה אופקית של כל הדף */
  html, body, .wrap{ overflow-x: hidden !important; }
}

/* הקטנת סך הכל לשולם ונמסר ולא שום גרסת מובייל */
/* =========================================================
   📱 מובייל: סיכומים קומפקטיים (פחות גובה מתחת להדר)
   לא נוגע בדסקטופ/טאבלט
========================================================= */
@media (max-width: 680px){
  .summary{
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 8px !important;
    margin-top: 6px !important;
  }
  .summary .card{
    padding: 8px 10px !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,.9);
    box-shadow: 0 6px 18px rgba(15,23,42,.06);
    min-height: auto !important;
  }
  .summary .title{
    font-size: 12px !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;
  }
  .summary .amt{
    font-size: 12px !important;
    line-height: 1.1 !important;
    font-weight: 900 !important;
  }
  /* מסתירים את שורת "הזמנות X" כדי לחסוך מקום */
  .summary .sub{
    display: none !important;
  }
}

/* ===== Order card: KEY : VALUE באותה שורה ===== */
.order .head .kv{
  display: grid !important;
  grid-template-columns: max-content 1fr !important; /* key | value */
  column-gap: 8px;
  row-gap: 4px;
  align-items: center;
  min-width: 0;
}
.order .head .kv .k{
  white-space: nowrap;
  font-weight: 900;
  font-size: 16px;
  direction: rtl;
}
.order .head .kv .k::after{
  content: "\00A0:\00A0"; /* רווח, נקודתיים, רווח */
}
.order .head .kv .v{
  white-space: nowrap;         /* לא לרדת שורה */
  overflow: hidden;            /* אם ארוך מדי – לקצר */
  text-overflow: ellipsis;     /* … */
  font-weight: 900;
  font-size: 16px;
  min-width: 0;
  justify-self: start;
}

/* מובייל – טיפה קטן יותר */
@media (max-width: 680px){
  .order .head .kv .k{ font-size: 14px; }
  .order .head .kv .v{ font-size: 14px; }
}



/*  */

/* ===== Mobile-only: Compact header ===== */
@media (max-width: 680px){

  /* מסגרת וריווח כללי של ההדר */
  .neo-header .neo-bg{ inset:-4px 0 0 0; }
  .neo-row{
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 8px 10px !important;
  }

  /* לוגו + טקסטים */
  .neo-logo{
    width: 32px; height: 32px; border-radius: 10px; font-size: 16px;
  }
  .neo-brand-txt h1{
    font-size: 16px; line-height: 1.2; margin: 0;
  }
  .neo-brand-txt .sub{
    font-size: 11px; margin-top: 1px;
  }

  /* שעון מתחת לכותרת – מצמצמים גובה */
  .clock.under-title{ margin-top: 4px; }
  .clock.under-title .time{ font-size: 14px; font-weight: 800; }
  .clock.under-title .date{ display: none; } /* שורה שנייה מוסתרת כדי לחסוך גובה */

  /* חיפוש – קטן ומותאם למסך */
  .neo-search{ min-width: 0; }
  .neo-search-input{
    width: 100% !important;
    padding: 10px 36px 10px 36px !important;
    font-size: 14px;
    border-radius: 18px;
  }
  .neo-search .i{ width: 16px; height: 16px; inset-inline-end: 10px; }
  .neo-clear{ inset-inline-start: 6px; }
  .neo-clear .i{ width: 14px; height: 14px; }

  /* כפתורים ופעולות – קומפקטי ורוחב אחד, עם גלילה אופקית אם צריך */
  .neo-actions{
    gap: 6px;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    padding-block: 2px;
  }
  .btn, .i-btn{
    padding: 6px 8px !important;
    border-radius: 10px !important;
    font-weight: 800;
  }
  .i-btn .i{ width: 16px; height: 16px; }
  .i-btn .badge{
    inset-block-start: -4px; inset-inline-start: -4px;
    font-size: 9px; padding: 1px 5px;
  }
  .langSel, .i-select{
    height: 32px; padding: 4px 8px; font-size: 13px;
  }

  /* תגית אימייל + יציאה – קטנים יותר */
  .neo-actions .user-badge{
    padding: 4px 8px; font-size: 12px; border-radius: 999px;
  }
  .btn-logout{ padding: 4px 8px; font-size: 12px; }
}

.order .actions .btn:nth-child(1){ /* כפתור ראשון - ההדפסה (אם שמים תמיד ראשון) */
  background: #fff;
  border: 1px dashed #cbd5e1;
}
.order .actions .btn:nth-child(1):hover{
  filter: none;
  background: #f8fafc;
}


/* new for la[tops screen 14" ... */

/* ===== Laptop sweet spot (14") — override ===== */

/* 0) אל תאפשר חיתוך לרוחב בתוך רכיבי הפנים */
.wrap, .topbar, .tb-row, .dock, .summary, .cols, .col, .col > div:last-child {
  overflow-x: visible !important;
}

/* 1) פריסת עמודות אדפטיבית לכולם (desktop default) */
.cols{
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
  gap: 14px !important;
  height: auto !important;
}

/* 2) ברייקפוינט ללפטופ: 1280–1439px → 3 עמודות יציבות יותר */
@media (min-width: 1280px) and (max-width: 1439px){
  .cols{
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  }
}

/* 3) ברייקפוינט ביניים: 1024–1279px → 2 עמודות, פחות ריווח/פונטים */
@media (min-width: 1024px) and (max-width: 1279px){
  .cols{
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }
  .col{ padding: 10px !important; }
  .col-title{ font-size: 20px !important; padding-bottom: 4px !important; }
  .order{ padding: 10px !important; }
  .order .head .kv .k,
  .order .head .kv .v{ font-size: 15px !important; }
}

/* 4) מונעים גלילה אופקית ברמת הדף בלבד (לא בתוך רכיבים) */
html, body{ overflow-x: hidden !important; }

/* 5) גובה תוכן העמודות — גלילה אנכית נקייה */
.col > div:last-child{
  overflow-y: auto !important;
  overflow-x: hidden !important;
  max-height: none !important;
  -webkit-overflow-scrolling: touch;
}

/* 6) sticky/blur עדין במסכים בינוניים — פחות עומס גרפי */
@media (min-width: 1024px) and (max-width: 1439px){
  .topbar, .topbar.pro, .dock, .summary .card, .col, .order{
    backdrop-filter: blur(6px) saturate(1.05) !important;
    -webkit-backdrop-filter: blur(6px) saturate(1.05) !important;
  }
  .neo-header .neo-bg{ inset: -6px 0 0 0 !important; }
}

/* 7) שדה החיפוש לא יגלוש בלפטופ */
@media (min-width: 1024px) and (max-width: 1439px){
  .neo-search-input{
    width: min(62vw, 640px) !important;
    max-width: 100% !important;
  }
}

/* 8) בטיחות טיפוגרפית בלפטופ: טיפה קטנים יותר */
@media (min-width: 1024px) and (max-width: 1439px){
  .clock .time{ font-size: 2.0rem !important; }
  .clock .date{ font-size: .95rem !important; }
  .summary .amt{ font-size: 18px !important; }
}


/* new view test */

/* ============== HEADER COMPACT LAYOUT ============== */

/* ההדר כולו נמוך ונקי */
.neo-row{
  grid-template-columns: 1fr auto !important;  /* (ימין) מותג/חיפוש | (שמאל) פעולות+סטטוסים */
  align-items: center;
  gap: 10px !important;
  padding: 8px 12px !important;
}

/* גודל לוגו/כותרת קטן יותר */
.neo-logo{ width:34px; height:34px; border-radius:10px; font-size:16px; }
.neo-brand-txt h1{ font-size:18px; margin:0; }
.neo-brand-txt .sub{ font-size:11px; margin-top:1px; }

/* חיפוש קטן יותר, לא גולש */
.neo-search{ min-width: 0; }
.neo-search-input{
  width: min(46vw, 520px) !important;  /* היה ענק בלפטופ */
  padding: 8px 34px !important;
  font-size: 14px !important;
  border-radius: 18px !important;
  box-shadow: 0 4px 12px rgba(15,23,42,.06);
}
.neo-search .i{ width:16px; height:16px; inset-inline-end:10px; }
.neo-clear{ inset-inline-start:6px; }

/* פעולות: שורה אחת, ריווח קטן, ללא שבירה ברירת מחדל */
.neo-actions{
  display:flex; align-items:center; gap:6px !important;
  flex-wrap: nowrap !important; overflow: visible;
}
.neo-actions .btn, .neo-actions .i-btn, .neo-actions select{
  padding: 6px 9px !important; border-radius: 10px !important; font-weight: 800 !important;
}

/* סדר מוצע (RTL): הפעמון/השתקה ➜ ייצוא/הורדה ➜ רענון ➜ סל מחיקה ➜ שפה ➜ תגית אימייל ➜ יציאה */
#btnStopAlarmTop{ order:10 }
#btnExport, #btnDownload { order:20 }      /* אם קיימים אצלך */
#btnRefresh{ order:30 }
#btnDelete{ order:40 }
.langSel, .i-select{ order:50 }
#userBadge{ order:60 }
#btnLogoutTop{ order:70 }

/* תגית אימייל קטנה */
.neo-actions .user-badge{ padding:4px 8px; font-size:12px; }

/* ============== STATUS PILLS IN HEADER ============== */

/* מכולה לסטטוסים בצד השמאלי של ההדר */
/* ===== STATUS PILLS IN HEADER (2 בלבד) ===== */
/* ===== STATUS PILLS WITH ORDERS & SUM ===== */
.neo-stats{
  display:flex; align-items:center; gap:10px; flex-wrap:nowrap;
  margin-inline-start:12px;
}

.stat-pill{
  display:flex; flex-direction:column; align-items:flex-start;
  padding:6px 12px; border-radius:12px;
  background:#fff; border:1px solid var(--ring);
  box-shadow:0 4px 12px rgba(15,23,42,.06);
  min-width:120px;
}

.stat-pill .top{
  display:flex; align-items:center; gap:6px; font-size:13px; font-weight:800;
}

.stat-pill .dot{ width:10px; height:10px; border-radius:50% }
.stat-paid   .dot{ background: var(--paid) }               /* ירוק/סגול לפי משתנה */
.stat-deliv-unpaid .dot{ background: var(--danger) }       /* אדום */

.stat-pill .count{
  font-size:12px; font-weight:700; color:var(--muted);
}

.stat-pill .sum{
  font-size:14px; font-weight:900; color:#0f172a;
}


/* ============== SUMMARY STRIP NARROW ============== */

/* מצמצם את כרטיסי הסיכום בשורה שמתחת להדר, או מסתיר אותם בדסקטופ כי עוברים להדר */
@media (min-width: 1024px){
  .summary{ display:none !important; }  /* עוברים לסטטוסים בהדר */
}

/* אם רוצים לשמור — שיהיו נמוכים וקומפקטיים */
@media (max-width: 1023px){
  .summary{
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap:8px !important; margin-top:6px !important;
  }
  .summary .card{ padding:8px 10px !important; border-radius:12px !important; }
  .summary .title{ font-size:12px !important; }
  .summary .amt{ font-size:13px !important; }
  .summary .sub{ display:none !important; }
}

/* ============== עידון כללי באזור הלמעלה ============== */
.neo-header .neo-bg{ inset:-4px 0 0 0; }            /* פחות גובה רקע */
.topbar, .topbar.pro{ padding:10px 12px !important; }

/*  */
/* ===== Header compact: title+clock | actions(+search) ===== */
.neo-row{
  grid-template-columns: 1fr auto !important;  /* ימין: מותג/כותרת/שעון | שמאל: פעולות+חיפוש */
  align-items: center;
  gap: 10px !important;
  padding: 8px 12px !important;
}

/* כותרת + שעון דקים */
.neo-brand{ align-items: center; gap:10px; }
.neo-brand-txt h1{ font-size:18px !important; margin:0; line-height:1.2; }
.neo-brand-txt .sub{ display:none; } /* חוסכים גובה */
.clock.under-title{
  margin:0; text-align:start;
}
.clock.under-title .time{ font-size:1rem !important; font-weight:800; letter-spacing:.3px; }
.clock.under-title .date{ display:none !important; } /* בדסקטופ לא צריך תאריך */

/* פעולות בשורה אחת – גם החיפוש בתוכן */
.neo-actions{
  display:flex; align-items:center; gap:6px !important;
  flex-wrap:nowrap !important; overflow:visible;
}

/* חיפוש קטן ועדין */
.neo-search{ position:relative; display:flex; align-items:center; }
.neo-search-input{
  width:min(32vw, 340px) !important;   /* היה גדול מדי */
  max-width:100% !important;
  padding:7px 30px 7px 30px !important;
  font-size:13px !important;
  border-radius:16px !important;
  border:1px solid var(--ring);
  box-shadow:0 3px 10px rgba(15,23,42,.05);
}
.neo-search .i{ width:14px; height:14px; inset-inline-end:10px; opacity:.7; }
.neo-clear{ inset-inline-start:6px; }
.neo-search-input::-webkit-search-cancel-button{ -webkit-appearance:none; appearance:none; }

/* סדר בתוך שורת הכפתורים (RTL): קודם כפתורים, בסוף חיפוש */
#btnStopAlarmTop{ order:10 }
#btnRefreshTop{ order:20 }
#btnCsv{ order:30 }
#btnClearFilters{ order:40 }
#btnReindex{ order:50 }
#btnClearAllTop{ order:60 }
#userBadge{ order:90 }
#btnLogoutTop{ order:95 }
.neo-search{ order:99 } /* החיפוש תמיד אחרון בשורה */

/* pills של הסטטוסים נשארים צמודים לכפתורים אך קומפקטיים */
.neo-stats{ order:80; gap:6px !important; margin-inline-start:8px; }
.stat-pill{
  padding:6px 10px !important; border-radius:12px !important;
}
.stat-pill .top{ font-size:12px !important; gap:6px; }
.stat-pill .count{ font-size:11px !important; color:var(--muted); }
.stat-pill .sum{ font-size:12px !important; font-weight:900; }

/* מובייל: החיפוש נשבר לשורה מתחת לכפתורים */
@media (max-width:680px){
  .neo-row{ grid-template-columns:1fr !important; }
  .neo-actions{ flex-wrap:wrap !important; justify-content:center; }
  .neo-search{ order:100; width:100% !important; }
  .neo-search-input{ width:100% !important; }
  .clock.under-title{ text-align:center !important; margin-top:4px; }
  .clock.under-title .time{ font-size:0.95rem !important; }
}

/* ==== Columns never collapse (desktop & laptop) ==== */
.cols{
  /* תן למסילה גובה אמיתי */
  min-height: calc(100svh - 140px) !important; /* אם גבוה מדי/נמוך – כוון את המס' */
  height: auto !important;
  overflow-y: visible !important;
}

.col{
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;   /* קריטי! */
}

.col-title{
  flex: 0 0 auto;
}

.col > div:last-child{
  /* הגוף שבו הכרטיסים */
  flex: 1 1 auto !important;
  min-height: 200px !important;   /* ביטוח: שלא יהיה 0 */
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
}

/* אם יש לך כלל שהפך .cols לפלקס מתחת ל־1024px, ודא שבדסקטופ היא GRid */
@media (min-width: 1025px){
  .cols{
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(300px,1fr)) !important;
    gap: 14px !important;
  }
}

/*  */
/* ===== Brand block polish (no HTML changes) ===== */
.neo-brand{
  display:flex; align-items:center; gap:10px;
}

/* לוגו כוס קפה עם הילה */
.neo-logo{
  width:40px; height:40px; border-radius:12px;
  display:grid; place-items:center; font-size:18px;
  background: conic-gradient(from 180deg at 50% 50%, #ffffff, #dbeafe, #ffffff);
  border:1px solid var(--ring);
  box-shadow: 0 10px 24px rgba(15,23,42,.10);
}

/* כותרת מודגשת עם גרדיינט וטאץ' מודרני */
#title{
  margin:0;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: .2px;
  font-size: clamp(18px, 2.2vw, 28px);
  /* טקסט-גרדיינט */
  background: linear-gradient(92deg, #0ea5e9 0%, #8b5cf6 45%, #22c55e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 1px 0 rgba(255,255,255,.35); /* הבלטה עדינה על רקע בהיר */
  position: relative;
  display: inline-block;
}

/* פס דקורטיבי מתחת לכותרת */
#title::after{
  content:"";
  display:block;
  height:4px;
  margin-top:6px;
  border-radius:999px;
  background: linear-gradient(90deg, #0ea5e9, #8b5cf6 50%, #22c55e);
  box-shadow: 0 6px 18px rgba(14,165,233,.25);
}

/* התאמת פונטים לפי שפה (לא דורש שינוי HTML) */
html[lang="he"] #title{
  font-family: "Heebo", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
html[lang="ar"] #title{
  font-family: "Tajawal", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
html[lang="en"] #title{
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* קומפקטיות בהדר */
.neo-brand-txt{ min-width:0 }
@media (max-width:680px){
  .neo-brand{ gap:8px; }
  .neo-logo{ width:36px; height:36px; font-size:16px; }
  #title{ font-size: clamp(16px, 5vw, 22px); }
  #title::after{ height:3px; margin-top:5px; }
}

/* השעון תמיד אחרי logout */
#btnLogoutTop { order: 90; }
.neo-actions .clock { order: 91; }

/* קצת קומפקטי */
.neo-actions .clock{
  margin-inline-start: 12px;
  text-align: center;
}
.neo-actions .clock .time{
  font-size: 1rem;
  font-weight: 700;
}
.neo-actions .clock .date{
  font-size: .8rem;
  opacity: .7;
}

/* צורה חדשה להיידיר */

/* =========================================================
   HEADER PRO: כפתורים גדולים, סטטוסים מודגשים, קונטרסט גבוה
   הדבק בסוף הקובץ כדי שיעקוף חוקים קודמים
========================================================= */

/* ---------- גדלים בסיסיים להדר ---------- */
:root{
  --hdr-btn-h: 38px;          /* גובה הכפתורים */
  --hdr-btn-px: 12px;         /* ריווח אופקי */
  --hdr-btn-radius: 14px;     /* רדיוס */
  --hdr-font: 13.5px;         /* גודל פונט בכפתור */
  --hdr-strong-shadow: 0 8px 24px rgba(15,23,42,.12);
  --hdr-soft-shadow:   0 4px 14px rgba(15,23,42,.10);
}

/* ---------- כפתורי פעולה (i-btn / btn) ---------- */
.neo-actions .i-btn,
.neo-actions .btn{
  height: var(--hdr-btn-h) !important;
  padding: 0 var(--hdr-btn-px) !important;
  border-radius: var(--hdr-btn-radius) !important;
  font-weight: 800 !important;
  font-size: var(--hdr-font) !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center; gap: 8px;
  border: 1px solid #dbe3ef !important;
  background: linear-gradient(180deg,#ffffff,#f7f9fc) !important;
  box-shadow: var(--hdr-soft-shadow) !important;
  transition: transform .04s ease, box-shadow .15s ease, filter .15s ease;
}
.neo-actions .i-btn .i,
.neo-actions .btn .i{ width:18px; height:18px; stroke-width:2.2; }

.neo-actions .i-btn:hover,
.neo-actions .btn:hover{
  filter: brightness(1.02);
  box-shadow: var(--hdr-strong-shadow) !important;
}
.neo-actions .i-btn:active,
.neo-actions .btn:active{ transform: translateY(1px); }

/* וריאנטים */
.neo-actions .btn.primary{
  background: linear-gradient(180deg,#38bdf8,#0ea5e9) !important;
  border-color: transparent !important; color:#fff !important;
}
.neo-actions .btn.danger,
.neo-actions .i-btn.danger{
  background: linear-gradient(180deg,#fee2e2,#fecaca) !important;
  border-color:#fca5a5 !important; color:#7f1d1d !important;
}
.neo-actions .btn-logout{
  background: linear-gradient(180deg,#fff,#f8fafc) !important;
  border-color:#fecaca !important; color:#ef4444 !important;
  box-shadow: var(--hdr-soft-shadow) !important;
}

/* נגישות focus */
.neo-actions :is(.i-btn,.btn):focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(14,165,233,.28), var(--hdr-strong-shadow) !important;
}

/* ---------- סטטוס־פילס: שולם / נמסר־לא־שולם ---------- */
.neo-stats{
  display:flex; align-items:stretch; gap:10px;
}

.stat-pill{
  display:grid; grid-template-rows:auto auto auto;
  align-content:center;
  min-width: 160px;
  padding: 10px 12px !important;
  border-radius: 16px !important;
  border: 1px solid #dbe3ef;
  background: linear-gradient(145deg,#ffffff 0%, #f5f9ff 100%);
  box-shadow: 0 8px 24px rgba(15,23,42,.10), inset 0 1px 0 rgba(255,255,255,.6);
}

.stat-pill .top{
  display:flex; align-items:center; gap:8px;
  font-weight:900; letter-spacing:.2px;
  font-size: 10px;
}
.stat-pill .dot{
  width:10px; height:10px; border-radius:999px; display:inline-block;
  box-shadow: 0 0 0 3px rgba(0,0,0,.04) inset;
}
.stat-pill .count{ margin-top:6px; font-size:12px; color:#475569; }
.stat-pill .sum{
  margin-top:2px; font-size:15px; font-weight:900;
}

/* שולם = סגול-טורקיז, נמסר־לא־שולם = כחול-כתום */
.stat-paid{
  border-color:#e9ddff;
  background: linear-gradient(180deg,#faf7ff,#f3f7ff);
}
.stat-paid .dot{ background:#8b5cf6; }
.stat-paid .top .label-paid{
  background: linear-gradient(90deg,#8b5cf6,#06b6d4);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.stat-deliv-unpaid{
  border-color:#e3eefc;
  background: linear-gradient(180deg,#fff7ed 0%, #f1f9ff 100%);
}
.stat-deliv-unpaid .dot{ background:#f59e0b; }
.stat-deliv-unpaid .top .label-du{
  background: linear-gradient(90deg,#0ea5e9,#f59e0b);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* מבליטים את המספרים */
#hdrPaidOrders, #hdrPaidTotal,
#hdrDUOrders, #hdrDUTotal{ font-variant-numeric: tabular-nums; }

/* ---------- שעון קטן בהדר (ליד יציאה) ---------- */
.neo-actions .clock{
  display:grid; align-content:center; justify-items:center;
  padding: 0 8px;
  height: var(--hdr-btn-h);
  border-radius: var(--hdr-btn-radius);
  background: linear-gradient(180deg,#ffffff,#f7f9fc);
  border: 1px solid #e5e9f2;
  box-shadow: var(--hdr-soft-shadow);
}
.neo-actions .clock .time{ font-size: 4rem; font-weight: 800; letter-spacing:.3px; }
.neo-actions .clock .date{ font-size: .8rem; opacity:.7; }

/* סדר בתוך השורה: יציאה ואז שעון */
#btnLogoutTop{ order: 98; }
.neo-actions .clock{ order: 99; }

/* ---------- חיפוש קומפקטי אבל קריא ---------- */
.neo-search-input{
  height: var(--hdr-btn-h) !important;
  padding: 0 34px !important;
  font-size: 13.5px !important;
  border-radius: var(--hdr-btn-radius) !important;
  border: 1px solid #dbe3ef !important;
  background:#fff !important;
  box-shadow: var(--hdr-soft-shadow) !important;
}

/* ---------- מובייל: התאמות ---------- */
@media (max-width: 680px){
  :root{
    --hdr-btn-h: 34px;
    --hdr-btn-px: 10px;
    --hdr-btn-radius: 12px;
    --hdr-font: 12.5px;
  }
  .stat-pill{ min-width: 46vw; }
  .neo-actions{ gap:8px !important; flex-wrap:wrap !important; justify-content:center; }
}


/* ===== סטטוסים מודגשים גדולים ===== */
.neo-stats{
  display:flex; align-items:stretch; gap:16px;
}

.stat-pill{
  flex:0 0 auto;
  min-width: 200px;          /* יותר רחב */
  padding:16px 18px !important;
  border-radius:20px !important;
  border:2px solid #dbe3ef;
  background: linear-gradient(145deg,#ffffff 0%, #f0f4ff 100%);
  box-shadow:0 10px 28px rgba(15,23,42,.12), inset 0 2px 0 rgba(255,255,255,.7);
  text-align:center;
}

.stat-pill .top{
  display:flex; justify-content:center; align-items:center; gap:10px;
  font-size:18px; font-weight:900; letter-spacing:.3px;
}

.stat-pill .dot{
  width:14px; height:14px; border-radius:999px; flex-shrink:0;
}

.stat-pill .count{
  margin-top:10px;
  font-size:15px; font-weight:600;
  color:#334155;
}
.stat-pill .sum{
  margin-top:4px;
  font-size:20px; font-weight:900;
  color:#111827;
}

/* וריאנטים */
.stat-paid{
  border-color:#c4b5fd;
  background: linear-gradient(180deg,#ede9fe 0%, #f3f7ff 100%);
}
.stat-paid .dot{ background:#7c3aed; }
.stat-paid .top .label-paid{
  background: linear-gradient(90deg,#7c3aed,#06b6d4);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.stat-deliv-unpaid{
  border-color:#fcd34d;
  background: linear-gradient(180deg,#fef3c7 0%, #fefce8 100%);
}
.stat-deliv-unpaid .dot{ background:#f59e0b; }
.stat-deliv-unpaid .top .label-du{
  background: linear-gradient(90deg,#0ea5e9,#f59e0b);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* מספרים תמיד קריאים */
#hdrPaidOrders, #hdrPaidTotal,
#hdrDUOrders, #hdrDUTotal{
  font-variant-numeric: tabular-nums;
}

/* גלילה בכרטיסים בלבד */
/* הגוף הכללי – בלי גלילה אנכית */
html, body{
  height: 100%;
  overflow: hidden;   /* אין scroll לכל הדף */
}

/* העטיפה */
.wrap{
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

/* ההדר – גובה אוטומטי, לא גולל */
.neo-header{
  flex: 0 0 auto;
  z-index: 10;
}

/* העמודות – תופסות את כל השאר וגוללות פנימית */
.cols{
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}

/* כל עמודה */
.col{
  display: flex;
  flex-direction: column;
  min-height: 0; /* חובה כדי שהילדים לא יגלשו */
}

/* הכותרת של כל עמודה */
.col-title{
  flex: 0 0 auto;
}

/* האזור של הכרטיסים בכל עמודה */
.col > div:last-child{
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;  /* קריטי כדי לא לקרוס */
  padding: 4px;
}

/* שעון */
/* השעון לא משפיע על פריסת ההדר */
.neo-actions .clock{
  flex: 0 0 auto;          /* אל תתן לו להתכווץ/להתרחב */
  width: 10.5ch;           /* רוחב קבוע לכל 08:08:08 (התאם אם צריך) */
  white-space: nowrap;     /* בלי ירידת שורה */
}

/* הספרות לא “רוקדות” – אותו רוחב לכל ספרה */
.neo-actions .clock .time{
  font-variant-numeric: tabular-nums;   /* אם הפונט תומך */
  font-feature-settings: "tnum" 1, "zero" 1;
  display: inline-block;
  min-width: 8ch;                        /* ביטוח נוסף */
  text-align: center;
}

/* אופציה: אם הפונט לא תומך ב-tnum, שימוש במונוספייס רק לשעה */
@supports not (font-variant-numeric: tabular-nums){
  .neo-actions .clock .time{
    font-family: ui-monospace, "SFMono-Regular", "Roboto Mono", Menlo, monospace;
    letter-spacing: .2px;
  }
}

/*  */
#soundToggleTop .i {
  display: inline-block !important;
  opacity: 0.9;
  transition: opacity .2s;
}
#soundToggleTop.on .i {
  opacity: 1; /* לא נעלם במצב ON */
}


#soundToggleTop .badge {
  font-size: 11px;
  font-weight: 800;
  background: #10b981; /* ירוק ל־ON */
  color: #fff;
  border-radius: 999px;
  padding: 2px 6px;
}
#soundToggleTop.off .badge {
  background: #ef4444; /* אדום ל־OFF */
  color: #fff;
}


/* ===== גרסה למובייל בלבד ===== */

/* ===== Mobile-only: גלילה אנכית רגילה + כל העמודות נראות ===== */
@media (max-width: 680px){
  /* אין עיגול בהדר במובייל */
  .neo-header{
    border-radius: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
  }
  .neo-header .neo-bg{ display:block !important; } /* אם ביטלת קודם */

  /* החזר גלילה אנכית לדף (ייתכן שנחסם קודם) */
  html, body{
    height: auto !important;
    min-height: 100dvh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  /* עטיפה לא חוסמת גלילה */
  .wrap{
    height: auto !important;
    min-height: 100dvh !important;
    overflow: visible !important;
  }

  /* עמודות: ביטול קרוסלה/גלילה אופקית → פריסה אנכית */
  .cols{
    display: block !important;           /* היה flex/קרוסלה – מבטלים */
    grid-template-columns: none !important;
    height: auto !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
    scroll-snap-type: none !important;
    -webkit-overflow-scrolling: auto !important;
    padding-bottom: 0 !important;
  }

  /* כל עמודה תופסת 100% רוחב ונערמת אנכית */
  .col{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-bottom: 14px !important;
    scroll-snap-align: none !important;  /* לא צריך סנאפ */
  }

  /* רשימת הכרטיסים בתוך כל עמודה – גלילה פנימית אם צריך או פשוט אנכית */
  .col > div:last-child{
    max-height: none !important;         /* שלא ייחתך גובה */
    overflow-y: visible !important;      /* רואים הכל, גלילה בדף עצמו */
    overflow-x: hidden !important;
    min-height: 0 !important;
  }

  /* ביטול כל גלילה אופקית שנשארה בטעות */
  .cols, .col, .neo-row, .neo-actions{
    overflow-x: hidden !important;
  }
}

/*  */
/* ===== Mobile pager buttons (≤680px) ===== */
@media (max-width: 680px){
  /* מקום לכפתורים בתחתית */
  .cols{ padding-bottom: 66px !important; }

  .cols-pager{
    position: fixed;
    inset-inline: 0;
    bottom: max(12px, env(safe-area-inset-bottom));
    display: flex;
    justify-content: center;
    gap: 10px;
    z-index: 1200;
    pointer-events: none; /* כפתורים בלבד קליקים */
  }

  .cols-pager .cols-nav-btn{
    pointer-events: auto;
    width: 44px; height: 44px;
    border-radius: 999px;
    border: 1px solid var(--ring);
    background: #fff;
    box-shadow: var(--shadow);
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 900; cursor: pointer;
  }
  .cols-pager .cols-nav-btn[disabled]{ opacity: .4; cursor: not-allowed; }
}

/* ==== MOBILE (≤680px): עמודות אופקיות RTL במסילה אחת ==== */
@media (max-width: 680px){
  /* שהדף לא יגלול לרוחב */
  html, body{
    height: auto !important;
    min-height: 100dvh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  /* המסילה של העמודות */
  .cols{
    display: flex !important;
    flex-direction: row-reverse !important;  /* העמודה הראשונה בצד ימין */
    gap: 12px !important;
    overflow-x: auto !important;             /* גלילה ימינה/שמאלה */
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    scroll-padding-inline: 12px !important;
    padding: 0 12px 10px !important;
    overscroll-behavior-x: contain !important;
  }

  /* כל עמודה = “שקופית” ברוחב מסך (עם ריווח) */
  .col{
    flex: 0 0 calc(100vw - 32px) !important;
    max-width: calc(100vw - 32px) !important;
    min-width: calc(100vw - 32px) !important;
    scroll-snap-align: start !important;
    margin: 0 !important;
    border-radius: 18px;
  }

  /* בתוך כל עמודה – גלילה אנכית של הכרטיסים */
  .col > div:last-child{
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y;
  }
}

/* ==== Viewport מתחת להידר — גובה מלא ==== */
:root{
  --hdr-h: 64px;          /* ברירת מחדל אם ה-JS לא רץ */
  --summary-h: 0px;       /* יתעדכן אוטומטית אם יש summary */
  --safe-top: max(env(safe-area-inset-top), 0px);
}

/* המכולה הראשית מתחת להידר (למשל .cols) ממלאת את כל הגובה הפנוי */
.fill-under-header,
.cols{
  /* גובה כל המסך פחות ההידר (ופחות summary אם יש) */
  height: calc(100dvh - var(--hdr-h) - var(--summary-h)) !important;
  min-height: calc(100dvh - var(--hdr-h) - var(--summary-h)) !important;

  /* כדי שהגלילה תהיה רק באזור התוכן */
  overflow-y: auto !important;
  overflow-x: hidden !important;
  min-width: 0 !important;
}

/* אם במובייל הגדרת לעמודות גובה קבוע – מבטלים ומצמדים למסך */
@media (max-width:680px){
  .col{
    height: calc(100dvh - var(--hdr-h) - var(--summary-h)) !important;
    max-height: calc(100dvh - var(--hdr-h) - var(--summary-h)) !important;
    min-height: 0 !important;
  }
  .col > div:last-child{
    overflow-y: auto !important;
    min-height: 0 !important;
  }
}

/* ההידר נשאר דבוק למעלה ולא תופס קליקים */
.neo-header{
  position: sticky !important;
  top: 0; z-index: 1000;
}
.neo-header .neo-bg{ pointer-events: none; }

/* ==== MOBILE HEADER COMPACT (≤680px) — title + buttons + status pills ==== */
@media (max-width: 680px){

  /* פריסת שורה אחת ונמוכה */
  .neo-row{
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 8px 10px !important;
  }

  /* לוגו + כותרת */
  .neo-logo{
    width: 30px; height: 30px; border-radius: 10px !important; font-size: 10px;
  }
  .neo-brand-txt h1, #title{
    font-size: 14px !important; line-height: 1.2 !important; margin: 0 !important;
  }
  .neo-brand-txt .sub, .clock.under-title .date{ display: none !important; }
  .clock.under-title{ margin-top: 2px !important; text-align: center !important; }
  .clock.under-title .time{ font-size: .65rem !important; font-weight: 800 !important; }

  /* כפתורי פעולה */
  .neo-actions{
    justify-content: center !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
  }
  .neo-actions :is(.btn, .i-btn){
    height: 32px !important;
    padding: 0 10px !important;
    border-radius: 10px !important;
    font-size: 12.5px !important;
    font-weight: 800 !important;
  }
  .neo-actions :is(.btn, .i-btn) .i{ width: 16px; height: 16px; }
  .neo-actions .user-badge, .neo-actions .btn-logout{
    padding: 4px 8px !important; font-size: 12px !important; border-radius: 999px !important;
  }

  /* חיפוש — קטן ומלא רוחב כשנשבר שורה */
  .neo-search{ order: 100; width: 100% !important; }
  .neo-search-input{
    height: 30px !important;
    width: 100% !important;
    padding: 0 34px !important;
    font-size: 13px !important;
    border-radius: 12px !important;
  }
  .neo-search .i{ width: 14px; height: 14px; inset-inline-end: 10px; }
  .neo-clear{ inset-inline-start: 6px; }

  /* סטטוסים בהדר (שולם / נמסר-לא-שולם) — pills קומפקטיים ונגללים לרוחב אם צריך */
  .neo-stats{
    order: 80;
    display: flex !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    padding-block: 2px;
  }
  .stat-pill{
    min-width: 44vw;
    padding: 8px 10px !important;
    border-radius: 12px !important;
    border-width: 1px !important;
    text-align: start;
  }
  .stat-pill .top{ font-size: 12px !important; gap: 6px !important; }
  .stat-pill .dot{ width: 8px; height: 8px; }
  .stat-pill .count{ font-size: 11px !important; }
  .stat-pill .sum{
    font-size: 14px !important; font-weight: 900 !important;
    font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
  }

  /* רקע ההדר קצת צמוד יותר */
  .neo-header .neo-bg{ inset: -2px 0 0 0 !important; }
}