@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

:root {
  --primary: #2563eb;
  --primary-dark: #1d4ed8;
  --primary-hover: #1d4ed8;
  --primary-soft: #eff6ff;
  --bg: #f5f6fa;
  --surface: #ffffff;
  --surface-muted: #f8fafc;
  --sidebar-bg: #111827;
  --sidebar-text: #cbd5e1;
  --sidebar-active: #2563eb;
  --border: #e5e7eb;
  --border-light: #f1f5f9;
  --text: #1f2937;
  --text-light: #6b7280;
  --text-muted: #9ca3af;
  --danger: #dc2626;
  --danger-soft: #fef2f2;
  --success: #16a34a;
  --success-soft: #f0fdf4;
  --warning: #d97706;
  --warning-soft: #fffbeb;
  --info: #2563eb;
  --info-soft: #eff6ff;
  --teal: #14b8a6;
  --teal-dark: #0d9488;
  --radius: 10px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12);
  --sidebar-width: 250px;
  --header-height: 64px;
  /* צבעי סטטוס וגוון מסגרת/פס-שורה שנלקחו במדויק מהעיצוב של המערכת הישנה (אזור הזמנות) */
  --status-attention: rgb(225, 75, 75);
  --status-unpaid: rgb(217, 130, 15);
  --status-closed: rgb(31, 157, 99);
  --status-void: rgb(107, 114, 128);
  --table-accent: rgb(72, 149, 239);
  --table-header-bg: rgb(244, 246, 251);
  --table-header-border: rgb(232, 236, 245);
  --row-avatar-bg: rgb(213, 0, 249);
}

* { box-sizing: border-box; }

/* מונע מדפדפני טלפון לפרש לחיצות חוזרות/מהירות על כפתורים כמחוות זום - בלי זה כל כפתור
   שנלחץ כמה פעמים ברצף (כמו + לכמות) עלול לגרום למסך להתמקד/להתקרב בטעות */
button { touch-action: manipulation; }

/* overflow-x על html (לא על body!) - על body זה שובר position: sticky של אלמנטים בעמוד
   (הופך את body לקונטיינר גלילה נפרד מה-viewport, ואז sticky כבר לא נדבק לראש המסך
   האמיתי) בעיקר ב-Safari. אותה "רשת ביטחון" נגד גלילה צידה, בלי לשבור sticky */
html {
  overflow-x: hidden;
}

body {
  margin: 0;
  font-family: 'Plus Jakarta Sans', 'Segoe UI', Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  direction: rtl;
}

/* ---------- מסך התחברות ---------- */
.login-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1e293b, #2563eb);
}

.login-card {
  background: white;
  padding: 40px;
  border-radius: var(--radius);
  box-shadow: 0 20px 50px rgba(0,0,0,0.25);
  width: 360px;
  max-width: 92vw;
  box-sizing: border-box;
  text-align: center;
}

.login-card h1 {
  font-size: 22px;
  margin-bottom: 4px;
}

.login-logo {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  background: white;
  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
  margin-bottom: 12px;
}

.login-card p {
  color: var(--text-light);
  font-size: 14px;
  margin-top: 0;
  margin-bottom: 24px;
}

.forgot-password-link {
  display: block;
  margin-top: 16px;
  font-size: 13px;
  color: var(--primary);
  text-decoration: none;
}
.forgot-password-link:hover { text-decoration: underline; }

/* כפתור "חזרה לקטלוג" בעמוד ההתחברות - הקטלוג פתוח לצפייה גם בלי התחברות (ר.
   getPortalViewerTier ב-portal.routes.js), אז מבקר שהגיע למסך הזה בטעות או שינה דעתו
   צריך דרך ברורה לחזור אליו בלי למלא/לשלוח את הטופס */
.login-back-btn {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: 10px;
  padding: 11px;
  background: white;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s;
}
.login-back-btn:hover { background: #f3f4f6; }

.field {
  text-align: right;
  margin-bottom: 16px;
}

.field label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--text);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  outline: none;
  transition: border-color .15s;
  font-family: inherit;
  background: white;
}

.field textarea { resize: vertical; min-height: 60px; }

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--primary);
}

.field-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.field-checkbox input { width: auto; }
.field-checkbox label { font-size: 13px; font-weight: 600; color: var(--text-light); margin: 0; }

/* רשימת checkbox-ים גוללת לבחירה מרובה (ר' js/checkbox-list.js) */
.checkbox-list {
  max-height: 160px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 6px 10px;
  margin-bottom: 16px;
}
.checkbox-list-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 13px; }
.checkbox-list-row input { width: auto; }
.checkbox-list-empty { font-size: 13px; color: var(--text-light); padding: 6px 0; }

.btn-primary {
  width: 100%;
  padding: 11px;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
}

.btn-primary:hover { background: var(--primary-dark); }
.btn-primary:disabled { background: #93c5fd; cursor: not-allowed; }

.error-box {
  background: #fef2f2;
  color: var(--danger);
  border: 1px solid #fecaca;
  padding: 10px;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 16px;
  display: none;
}

.success-box {
  background: #f0fdf4;
  color: #15803d;
  border: 1px solid #bbf7d0;
  padding: 10px;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 16px;
}

/* ---------- Layout כללי (אחרי התחברות) ---------- */
.app-layout {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: 220px;
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
  padding: 20px 0;
  flex-shrink: 0;
}

.sidebar .logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 700;
  color: white;
  padding: 0 20px 20px;
  border-bottom: 1px solid #1f2937;
  margin-bottom: 10px;
}
/* לוגו AllGoods - רקע לבן עגול תמיד מתחת לתמונה, כדי שהרקע הלבן של קובץ התמונה עצמו
   ייראה כמו "מדליה" מכוונת ולא כריבוע לבן מקרי, על כל רקע (כהה כאן, אבל גם בהיר בדפי
   ההתחברות/הרשמה למטה) - ר' .logo-badge, אותה קלאס בדיוק בכל מקום שהלוגו מופיע */
.logo-badge {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  background: white;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  flex-shrink: 0;
}

.sidebar nav a {
  display: block;
  padding: 12px 20px;
  color: var(--sidebar-text);
  text-decoration: none;
  font-size: 14px;
  border-right: 3px solid transparent;
}

.sidebar nav a:hover { background: #1f2937; }
.sidebar nav a.active {
  background: #1f2937;
  color: white;
  border-right-color: var(--sidebar-active);
}

/* ---------- קטגוריות-על (ראשי/ניהול/תפעול) - כותרת בלבד, לא לחיצה, כמו בתוכנה הקודמת ---------- */
.nav-section { margin-bottom: 4px; }
.nav-section-title {
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
  padding: 14px 20px 6px;
  letter-spacing: .3px;
}

.nav-item-icon { font-size: 18px; width: 24px; text-align: center; flex-shrink: 0; }

/* כפתור תפריט אחיד - כל פריט בתפריט הצד (שטוח, בלי קטגוריות-על/קבוצות מתקפלות, ר'
   renderSidebar) הוא כפתור מעוגל עם אייקון */
.nav-standalone {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255,255,255,.04);
  color: var(--sidebar-text);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  border-right: 3px solid transparent;
}
.nav-standalone:hover { background: #1f2937; }
.nav-standalone.active { background: #1f2937; color: white; border-right-color: var(--sidebar-active); }

/* פריט תפריט "מודגש" - כפתור ריבועי ירוק בולט (למשל "אתר המכירות") שמובחן משאר פריטי התפריט */
.nav-standalone-featured {
  margin: 8px 14px 14px;
  padding: 12px 14px;
  border-radius: 10px;
  background: #16a34a;
  color: white;
  font-weight: 700;
  border-right: none;
}
.nav-standalone-featured .nav-item-icon { font-size: 16px; }
.nav-standalone-featured:hover { background: #15803d; }
.nav-standalone-featured.active { background: #15803d; color: white; border-right: none; }

/* ---------- קבוצות תפריט מתקפלות ---------- */
.nav-group-title {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  color: var(--sidebar-text);
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-align: right;
  font-family: inherit;
}

.nav-group-label { flex: 1; }

.nav-group-title:hover { background: #1f2937; color: white; }

.nav-group-arrow {
  font-size: 10px;
  transition: transform .15s;
  color: #64748b;
}

.nav-group.open .nav-group-arrow { transform: rotate(180deg); }

.nav-group-items {
  display: none;
  flex-direction: column;
}

.nav-group.open .nav-group-items { display: flex; }

.nav-group-items a { padding-right: 48px; font-size: 13px; }

/* ---------- פס צפייה בתור משתמש אחר ---------- */
.impersonation-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: #fbbf24;
  color: #78350f;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}

.impersonation-banner button {
  background: #f97316;
  color: white;
  border: none;
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.impersonation-banner button:hover { background: #ea580c; }

/* ---------- כפתור "צפייה בתור" בטבלת משתמשים ---------- */
.icon-btn.impersonate { background: #eff6ff; color: var(--primary); }

.main {
  flex: 1;
  min-width: 0; /* בלי זה, פריט flex לא מתכווץ מתחת לרוחב התוכן הפנימי שלו (כמו טבלה רחבה) -
                   וכל הדף (כולל הסיידבר) נדחף הצידה וגורם לגלילה אופקית של המסך כולו */
  padding: 24px 32px;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.topbar h1 { font-size: 22px; margin: 0; }

.user-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
}

.avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
}

.logout-link {
  color: var(--text-light);
  text-decoration: none;
  font-size: 13px;
}

/* ---------- כרטיס תוכן ---------- */
.card {
  background: white;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.card-header h2 { font-size: 16px; margin: 0; }

.btn-add {
  background: rgba(3, 181, 98, 0.15);
  color: rgb(3, 181, 98);
  border: none;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  box-sizing: border-box;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

th {
  text-align: right;
  padding: 9px 12px;
  color: rgb(1, 1, 1);
  font-weight: 600;
  background: var(--table-header-bg);
  border-bottom: 1px solid var(--table-header-border);
  border-left: 1px solid var(--table-header-border);
  font-size: 12px;
}

/* עוטף את תוכן הכותרת (טקסט + סמלי מיון/סינון, ר' attachColumnFilter ב-grid-tools.js) בתוך
   flex row משלו - במתכוון לא display:flex על ה-th עצמו, ששובר את פריסת הטבלה (הופך כל
   כותרת לשורה נפרדת במקום עמודה). כך הסמלים תמיד נשארים בשורה אחת מול הכותרת, גם כשטקסט
   הכותרת ארוך מספיק כדי להישבר לשתי שורות (למשל "מספר קבלה") */
.gt-th-row { display: flex; align-items: center; justify-content: flex-start; gap: 4px; }

td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--table-header-border);
  border-left: 1px solid var(--table-header-border);
}

/* צ'קבוקסים (בחירת שורות, תפריטי סינון/עמודות) בצבע המותג במקום הכחול הכהה של ברירת
   המחדל של הדפדפן - accent-color נתמך בכל הדפדפנים המודרניים ולא דורש reset מלא של
   ה-appearance כדי להיראות מסודר */
input[type="checkbox"] { accent-color: var(--primary); }

tbody tr:nth-child(even) td { background: rgba(72, 149, 239, 0.035); }
tr:hover td { background: #dbeafe; }
tbody tr.clickable-row { cursor: pointer; touch-action: manipulation; }

/* הדגשה זמנית (3 שניות, ר' highlightRowById בעמודי רשימה) לשורה שהמשתמש הגיע אליה מקישור
   חיצוני (למשל לחיצה על הזמנה/תשלום בדוח לקוח) - עוזר לזהות אותה בתוך רשימה ארוכה */
tbody tr.gt-row-highlight-flash td { background: #bfdbfe !important; }

/* רוחב עמודות בטבלת הזמנות - כל עמודה מכוילת בדיוק לתוכן שלה: מספיק רחבה כדי שהערך
   הטיפוסי/המקסימלי שלה ייכנס בשורה אחת בלי להישבר, לא רחבה יותר מהצורך */
/* # / שעת הזמנה / שעת סיום הוסרו מהטבלה לגמרי - האינדקסים כאן מתאימים למבנה העמודות
   החדש (ר' orders.html) */
#ordersTable th:nth-child(1), #ordersTable td:nth-child(1) { width: 90px; white-space: nowrap; } /* יוצר ההזמנה - "ארז הראל" בשורה אחת */
#ordersTable th:nth-child(3), #ordersTable td:nth-child(3) { width: 88px; white-space: nowrap; } /* תאריך - בדיוק לפורמט התאריך */
#ordersTable th:nth-child(4), #ordersTable td:nth-child(4) { min-width: 150px; } /* לקוח */
#ordersTable th:nth-child(5), #ordersTable td:nth-child(5) { min-width: 130px; } /* סניף */
#ordersTable th:nth-child(6), #ordersTable td:nth-child(6) { width: 108px; white-space: nowrap; } /* סה"כ כולל מע"מ - עד 999,999 ש"ח */
#ordersTable th:nth-child(7), #ordersTable td:nth-child(7) { width: 100px; white-space: nowrap; } /* רווח - עד 99,999 ש"ח */
#ordersTable th:nth-child(8), #ordersTable td:nth-child(8) { min-width: 135px; } /* סטטוס הזמנה - כל סוגי הסטטוס בשורה אחת */

#ordersTable th:nth-child(2), #ordersTable td:nth-child(2),   /* מספר הזמנה משלוח */
#ordersTable th:nth-child(9), #ordersTable td:nth-child(9),   /* מספר חשבונית */
#ordersTable th:nth-child(10), #ordersTable td:nth-child(10), /* מספר קבלה */
#ordersTable th:nth-child(13), #ordersTable td:nth-child(13) { /* חזרות */
  width: 70px;
  white-space: normal;
}

.actions-cell { display: flex; gap: 8px; }

.icon-btn {
  border: none;
  background: #f3f4f6;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
}

.icon-btn.delete { background: #fef2f2; color: var(--danger); }
.icon-btn.edit { background: #eff6ff; color: var(--primary); }
.icon-btn.toggle-visibility { width: auto; height: auto; padding: 5px 10px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.icon-btn.toggle-visibility.shown { background: #ecfdf5; color: #059669; }
.icon-btn.toggle-visibility.hidden { background: #f3f4f6; color: #6b7280; }

/* שומר את המקום של כפתור פעולה שלא מוצג בשורה מסוימת (למשל מחיקה, שמותרת רק בסטטוס מסוים) -
   כדי שכפתורי הפעולות האחרים לא "יזוזו" בין שורות ותהיה שורה ישרה בעמודת הפעולות */
.icon-btn-placeholder { display: inline-block; width: 30px; height: 30px; }

.empty-state {
  text-align: center;
  padding: 40px;
  color: var(--text-light);
  font-size: 14px;
}

/* ---------- מודל (חלון קופץ) ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  display: none;
  align-items: center;
  justify-content: center;
  /* גבוה מספיק כדי לעלות תמיד מעל סרגל הניווט התחתון של הפורטל במובייל (z-index עד 178) -
     אבל נמוך מהלייטבוקס להגדלת תמונה (3000) והטוסט (4000), שצריכים להישאר מעל המודל עצמו */
  z-index: 200;
}

.modal-overlay.open { display: flex; }

.modal-box {
  position: relative;
  background: white;
  border-radius: var(--radius);
  padding: 24px;
  width: 380px;
  max-width: 90vw;
  max-height: 90vh;
  overflow-y: auto;
}

/* ---------- Toast (js/ui/toast.js) - החלפה עקבית ל-alert() הגולמי של הדפדפן ---------- */
.ui-toast-stack {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 500;
  align-items: center;
  pointer-events: none;
}
.ui-toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: var(--radius-md);
  background: var(--text);
  color: white;
  font-size: 13px;
  font-weight: 600;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .2s ease, transform .2s ease;
  max-width: min(90vw, 420px);
  pointer-events: auto;
}
.ui-toast.show { opacity: 1; transform: translateY(0); }
.ui-toast.ui-toast-success { background: var(--success); }
.ui-toast.ui-toast-error { background: var(--danger); }
.ui-toast.ui-toast-warning { background: var(--warning); color: white; }
.ui-toast.ui-toast-info { background: var(--info); }

.modal-box.wide {
  width: 560px;
  max-height: 85vh;
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
/* בלי זה, עמודת grid לא מתכווצת מתחת לרוחב-התוכן-המינימלי של השדה שבתוכה (בעיקר
   input[type=date], שיש לו רוחב מינימלי גדול יחסית) - אותה מלכודת בדיוק כמו flex item
   רגיל, רק שב-grid ברירת המחדל היא min-width:auto ולא 0 */
.field-row > .field { min-width: 0; }

/* כרטיס פרטים מצומצם (כגון "פרטי הזמנה") - צפוף יותר, תואם לעיצוב התוכנה הקודמת */
.compact-form { padding: 12px 16px; }
.compact-form .card-header { margin-bottom: 8px; }
.compact-form .card-header h2 { font-size: 14px; }
.compact-form .field-row { gap: 10px; margin-bottom: 6px; }
.compact-form .field { margin-bottom: 6px; }
.compact-form .field label { margin-bottom: 3px; font-size: 16px; }
.compact-form .field input,
.compact-form .field select,
.compact-form .field textarea { padding: 6px 8px; font-size: 16px; border-radius: 6px; }
.compact-form .field textarea { min-height: 36px; }

/* שורת שדות אחת צפופה (כמו "פרטי הזמנה" בתוכנה הקודמת) - שדות ברוחב טבעי, לא נמתחים */
.field-inline-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
}
.field-inline-row .field-narrow {
  flex: 1 1 110px;
  max-width: 150px;
  margin-bottom: 0;
}
.field-inline-row .field-narrow-wide {
  flex: 2 1 180px;
  max-width: 240px;
}

.order-datetime-label {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.order-datetime-label .dt-label {
  font-size: 17px;
  color: var(--text-light);
  font-weight: 600;
}
.order-datetime-label .dt-value-input {
  border: none;
  background: transparent;
  font-size: 19px;
  font-weight: 700;
  color: var(--text);
  padding: 0;
  text-align: left;
  width: 150px;
  cursor: pointer;
}
.order-datetime-label .dt-value-input:focus { outline: none; }

.table-wrapper { overflow-x: auto; }

/* מתג הפעלה/כיבוי (למשל "חזרות" בהזמנה) */
.toggle-switch-row { display: flex; align-items: center; gap: 8px; height: 34px; }
.toggle-switch { position: relative; display: inline-block; width: 38px; height: 20px; flex-shrink: 0; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute; inset: 0; cursor: pointer;
  background-color: #d1d5db; border-radius: 20px; transition: background-color .15s;
}
.toggle-slider:before {
  content: ""; position: absolute; height: 14px; width: 14px; left: 3px; bottom: 3px;
  background-color: white; border-radius: 50%; transition: transform .15s;
}
.toggle-switch input:checked + .toggle-slider { background-color: var(--danger); }
.toggle-switch input:checked + .toggle-slider:before { transform: translateX(18px); }
#hasReturnsLabel { font-size: 13px; font-weight: 600; color: var(--text-light); }
#hasReturnsLabel.active { color: var(--danger); }

/* סרגל הוספת פריט להזמנה (חיפוש מוצר + סינון לפי קבוצה + הוספה) */
.add-item-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.add-item-toolbar #addItemGroupFilter {
  padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 16px; background: white;
}
.add-item-search-wrap { position: relative; width: 480px; max-width: 100%; min-width: 0; }
.add-item-search-wrap input {
  width: 100%; padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 16px;
  font-family: inherit; outline: none; box-sizing: border-box;
}
.add-item-search-wrap input:focus { border-color: var(--primary); }
.add-item-dropdown {
  display: none; position: absolute; top: calc(100% + 4px); right: 0; left: 0; z-index: 30;
  background: white; border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12); max-height: 260px; overflow-y: auto;
}
.add-item-dropdown.open { display: block; }
.add-item-dropdown .add-item-option {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px; cursor: pointer; font-size: 13px;
  border-bottom: 1px solid #f1f5f9; touch-action: manipulation;
}
.add-item-dropdown .add-item-option:last-child { border-bottom: none; }
.add-item-dropdown .add-item-option:hover { background: #eff6ff; }
.add-item-dropdown .add-item-option.selected { background: #dbeafe; }
.add-item-dropdown .add-item-name { flex: 1; font-weight: 600; }
.add-item-dropdown .add-item-barcode { color: var(--primary); font-size: 11px; }
.add-item-dropdown .add-item-price { color: var(--text-light); font-size: 12px; white-space: nowrap; }
.add-item-dropdown .add-item-empty { padding: 12px; text-align: center; color: var(--text-light); font-size: 13px; }

.modal-box h3 { margin-top: 0; font-size: 17px; }

.form-section-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--primary);
  border-top: 1px solid var(--border);
  margin: 18px 0 12px;
  padding-top: 14px;
}
.form-section-title:first-of-type { border-top: none; margin-top: 6px; padding-top: 0; }

.modal-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

/* טבלת מפתח-ערך גנרית לפירוט מלא בתוך פופ-אפ (למשל: פירוט שורת יומן ביקורת, פירוט שורת הזמנה בטלפון) */
.detail-modal-table { width: 100%; border-collapse: collapse; }
.detail-modal-table td { padding: 6px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.detail-modal-table td:first-child { font-weight: 600; color: var(--text-light); white-space: nowrap; width: 1%; }

/* תיבת חיפוש מוצר + רשימת תוצאות נפתחת - משמש בכמה מסכי סקירה/ניהול (ייבוא תמונות, חיבור
   ווריאציות, הוספת מוצר קיים לווריאציה) */
.import-review-stats { display: flex; gap: 20px; margin-bottom: 16px; font-size: 14px; color: var(--text-light); }
.import-review-stats strong { color: var(--text); font-size: 16px; }
.import-search-input { padding: 7px 9px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; font-family: inherit; width: 100%; }
.import-search-results {
  display: none; position: absolute; top: 100%; right: 0; left: 0; z-index: 20;
  background: white; border: 1px solid var(--border); border-radius: 8px; margin-top: 2px;
  max-height: 180px; overflow-y: auto; box-shadow: 0 4px 12px rgba(0,0,0,.1);
}
.import-search-results.open { display: block; }
.import-search-result-row { padding: 7px 10px; font-size: 12.5px; cursor: pointer; }
.import-search-result-row:hover { background: #f3f4f6; }

/* רשימה נפתחת עם חיפוש (js/searchable-select.js) - עוטפת <select> רגיל בתיבת טקסט + פאנל
   תוצאות מסונן, בלי לשנות את עיצוב/רוחב השדה המקורי (יורשת ממנו דרך .field select וכו') */
.searchable-select-wrap { position: relative; }
.searchable-select-wrap .searchable-select-native {
  position: absolute; opacity: 0; pointer-events: none; height: 1px; width: 1px; overflow: hidden;
}
.searchable-select-input {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 10px center;
  background-size: 14px;
  padding-left: 32px !important;
}
.searchable-select-input:disabled { background-color: var(--bg); cursor: not-allowed; }
.searchable-select-dropdown {
  display: none; position: absolute; top: calc(100% + 4px); right: 0; left: 0; z-index: 30;
  background: white; border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12); max-height: 260px; overflow-y: auto;
}
.searchable-select-dropdown.open { display: block; }
.searchable-select-option {
  padding: 8px 12px; cursor: pointer; font-size: 13px; border-bottom: 1px solid #f1f5f9;
}
.searchable-select-option:last-child { border-bottom: none; }
.searchable-select-option:hover, .searchable-select-option.highlight { background: #eff6ff; }
.searchable-select-option.selected { background: #dbeafe; font-weight: 600; }
.searchable-select-empty { padding: 12px; text-align: center; color: var(--text-light); font-size: 13px; }

.btn-secondary {
  flex: 1;
  padding: 10px;
  background: #f3f4f6;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
}

.modal-actions .btn-primary { flex: 1; }

/* ---------- שדה נעול (readonly) בתוך מודל ---------- */
.field input:disabled,
.field input[readonly] {
  background: #f3f4f6;
  color: var(--text-light);
  cursor: not-allowed;
}

.modal-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.modal-header-row h3 { margin: 0; display: flex; align-items: center; gap: 6px; }
.modal-header-row .info-icon {
  width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid var(--text-light); color: var(--text-light);
  font-size: 11px; display: inline-flex; align-items: center; justify-content: center;
}
.modal-close-x {
  border: none; background: none; font-size: 20px; line-height: 1;
  color: var(--text-light); cursor: pointer; padding: 0 4px;
}

.btn-teal { background: var(--teal); }
.btn-teal:hover { background: var(--teal-dark); }

.btn-danger { background: var(--danger); }
.btn-danger:hover { background: #b91c1c; }

/* ---------- פס כלים מעל טבלה (ייצוא/רענון/עמודות) ---------- */
/* flex-start (לא flex-end!) - במסמך RTL, flex-end על ציר-שורה מצמיד לצד שמאל, לא ימין
   כמו שאפשר לחשוב; הכפתורים היו יושבים עם רווח מת בצד ימין במקום צמודים אליו */
.toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.btn-toolbar {
  background: rgb(232, 244, 255);
  color: rgb(72, 149, 239);
  border: none;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  box-sizing: border-box;
  gap: 6px;
  text-decoration: none;
}

.btn-toolbar:hover { background: #dbeafe; }

/* גרסה אדמומה לכפתורי טולבר "מסכני" (כמו נקה מסננים) - אותו כפתור pill, צבע אחר */
.btn-toolbar.btn-toolbar-danger { background: rgba(225, 75, 75, 0.12); color: var(--status-attention); }
.btn-toolbar.btn-toolbar-danger:hover { background: rgba(225, 75, 75, 0.2); }

/* תג-אווטאר עגול קטן ליד שם יוצר הרשומה בטבלאות (הזמנות וכו') - עקבי עם .avatar (הכותרת
   העליונה) אבל קטן יותר, כדי להתאים לתוך שורת טבלה */
.row-user { display: flex; align-items: center; gap: 8px; }
.row-avatar {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--row-avatar-bg);
  box-shadow: rgba(15, 23, 42, 0.18) 1px 1px 3px 0px inset;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 11px;
}

/* ---------- פס סינון מעל הטבלה ---------- */
.filter-bar {
  display: grid;
  grid-template-columns: repeat(3, minmax(160px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.filter-bar input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  outline: none;
}

.filter-bar input:focus { border-color: var(--primary); }

/* ---------- כפתור פעולה ירוק בטבלת מחירון ---------- */
.icon-btn.add-price {
  background: var(--success);
  color: white;
  font-weight: 700;
}

/* ---------- עימוד ---------- */
.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
  flex-wrap: wrap;
  gap: 10px;
}

.pagination-info {
  font-size: 13px;
  color: var(--text-light);
  display: flex;
  align-items: center;
  gap: 8px;
}

.pagination-info select {
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
}

.pagination-pages {
  display: flex;
  align-items: center;
  gap: 4px;
}

.page-btn {
  min-width: 30px;
  height: 30px;
  padding: 0 6px;
  border: 1px solid var(--border);
  background: white;
  border-radius: 5px;
  font-size: 13px;
  cursor: pointer;
  color: var(--text);
}

.page-btn:hover { background: #f3f4f6; }
.page-btn.active { background: var(--table-accent); color: white; border-color: var(--table-accent); }
.page-btn:disabled { color: #d1d5db; cursor: not-allowed; }

/* ---------- תגיות סטטוס ---------- */
.status-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  /* התג עצמו נשאר בשורה אחת גם כשהעמודה מצומצמת ומאפשרת לכותרת להישבר (ר' #ordersTable
     th/td:nth-child) - רק הטקסט הרגיל בכותרת נשבר, לא תוכן התג עצמו */
  white-space: nowrap;
}

.status-open { background: #eff6ff; color: var(--primary); }
/* תגיות מלאות (רקע צבע מלא + טקסט לבן), בדיוק כמו במערכת הישנה - במקום הרקע הבהיר/טקסט
   צבעוני הקודם. "נארזה ולא שולם" (status-unpaid, כתום) הופרד מ"נארזה ושולם" (status-closed,
   ירוק) כדי שיהיה ברור בהבטה חטופה אם הזמנה סגורה כבר שולמה או לא - בדיוק כמו שם */
.status-closed { background: var(--status-closed); color: white; }
.status-unpaid { background: var(--status-unpaid); color: white; }
.status-cancelled { background: var(--status-void); color: white; }
.status-attention { background: var(--status-attention); color: white; }
.status-void { background: var(--status-void); color: white; }

/* שדה בחירת הסטטוס בעריכת הזמנה נצבע לפי הסטטוס הנבחר (מסגרת + רקע עדין) - כדי שיהיה
   ברור בהבטה חטופה גם כשהתפריט סגור, באותה שפת צבעים בדיוק כמו תגיות הסטטוס בטבלה */
#statusSelect.status-select-attention { border-color: var(--status-attention); background: rgba(225, 75, 75, 0.08); color: var(--status-attention); font-weight: 600; }
#statusSelect.status-select-unpaid { border-color: var(--status-unpaid); background: rgba(217, 130, 15, 0.08); color: var(--status-unpaid); font-weight: 600; }
#statusSelect.status-select-closed { border-color: var(--status-closed); background: rgba(31, 157, 99, 0.08); color: var(--status-closed); font-weight: 600; }
#statusSelect.status-select-void { border-color: var(--status-void); background: rgba(107, 114, 128, 0.08); color: var(--status-void); font-weight: 600; }

body.hide-admin-columns .admin-only-column { display: none !important; }

/* סימון תאים ב-Ctrl+קליק (כמו באקסל) וסרגל הסיכום הקבוע בתחתית המסך - בכל טבלאות המערכת */
td.gt-selected-cell { background: #dbeafe !important; }
.gt-selection-bar {
  display: none;
  position: fixed;
  bottom: 0;
  right: 220px;
  left: 0;
  z-index: 500;
  background: #1f2937;
  color: white;
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, .18);
}
.gt-selection-bar.open { display: block; }

/* סימון שורות פריט ב-Ctrl+קליק (כמו באקסל) ושורת הסיכום שמופיעה מתחתן */
tr.selected-row td { background: #dbeafe !important; }
.selection-summary {
  background: #eff6ff;
  color: var(--primary);
  font-weight: 600;
  font-size: 13px;
  padding: 8px 14px;
  border-radius: 8px;
  margin-bottom: 12px;
}

/* ---------- כרטיס עריכת הזמנה ---------- */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.link-back {
  color: var(--text-light);
  text-decoration: none;
  font-size: 13px;
}

.page-header-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* כל הכפתורים בסרגל הזה באותו גובה/ריפוד/גופן, בלי קשר לצבע שלהם */
.page-header-toolbar > a,
.page-header-toolbar > button,
.page-header-toolbar .btn-toolbar,
.page-header-toolbar .btn-add {
  height: 34px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px;
  white-space: nowrap;
}

.btn-back-orders { background: rgba(213, 0, 249, 0.12); color: var(--row-avatar-bg); }
.btn-back-orders:hover { background: rgba(213, 0, 249, 0.2); }


.items-table input, .items-table select {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  outline: none;
}

.items-table td { padding: 8px; }
.items-table .line-total { font-weight: 600; white-space: nowrap; }
.items-table .row-number { text-align: center; color: var(--text-light); font-size: 13px; }
.items-table .item-barcode { font-size: 12px; color: var(--text-light); white-space: nowrap; }
.items-table input:disabled { background: #f3f4f6; color: var(--text-light); cursor: not-allowed; }

/* מחיר מכירה/ליחידה/כולל מע"מ הם שדות תצוגה בלבד (לא ניתנים לעריכה ישירה, רק דרך מודל עריכת
   מחיר) - מוצגים כטקסט פשוט וברור בתוך השורה, בלי מסגרת/רקע של תיבת קלט, לשיפור הקריאות */
.items-table .item-base-price:disabled,
.items-table .item-price:disabled,
.items-table .item-price-vat:disabled {
  background: transparent;
  border: none;
  text-align: center;
  color: var(--text);
  font-weight: 600;
  cursor: default;
  padding: 7px 2px;
}

.qty-stepper {
  display: flex;
  align-items: stretch;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}

.qty-stepper .item-qty {
  text-align: center;
  padding: 8px 4px;
  border: none;
  border-right: 1px solid var(--border);
  border-left: 1px solid var(--border);
  border-radius: 0;
  flex: 1;
  min-width: 60px;
  font-size: 14px;
}

.qty-btn {
  width: 26px;
  height: 34px;
  flex-shrink: 0;
  border: none;
  background: #eff6ff;
  color: var(--primary);
  border-radius: 0;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
}

.qty-btn:hover { background: #dbeafe; }

.qty-btn.active { background: var(--danger); color: white; }
.qty-btn.active:hover { background: #dc2626; }

.product-cell { display: flex; align-items: center; gap: 6px; touch-action: manipulation; }
/* שם המוצר בשורה אחת מלאה בלי שבירה - בדיוק כמו שאר הטבלה, מי שרוצה לראות מוצר
   עם שם ארוך גולל את העמוד לצד (table-wrapper { overflow-x: auto }, מוגדר למעלה) */
.product-cell .product-name-text {
  flex: 1;
  white-space: nowrap;
}

/* שדה הערה לכל פריט - בלי min-width הוא נדחק כמעט לאפס באותה מגבלת table-layout:auto */
.item-note { min-width: 140px; }

/* שורת פריט שהוכנסה במינוס (החזרת לקוח) - מסומנת בבירור באדום */
tr.is-return-row td { background: #fef2f2 !important; }
tr.is-return-row .line-total { color: var(--danger); font-weight: 700; }
tr.is-return-row .item-qty { color: var(--danger); font-weight: 700; }
/* "נאסף"/"דרוש איסוף" - מוצג מתחת לבורר הכמות בשורת החזרה, לחיץ לשינוי הבחירה (ר' order-edit.html) */
.return-status-tag {
  font-size: 11px; font-weight: 700; color: var(--danger); text-align: center;
  margin-top: 4px; cursor: pointer; text-decoration: underline;
}

/* שורת הזמנה עם חזרות מהלקוח (ברשימת ההזמנות) - צבע אדמדם בהיר */
tr.has-returns-row td { background: #fef2f2 !important; }
tr.has-returns-row:hover td { background: #fee2e2 !important; }

.totals-box {
  display: flex;
  justify-content: flex-end;
  gap: 32px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.totals-box .totals-item { text-align: left; }
.totals-box .totals-label { font-size: 12px; color: var(--text-light); }
.totals-box .totals-value { font-size: 18px; font-weight: 700; }

/* שורת סיכום בתחתית טבלת פריטי ההזמנה (tfoot, order-edit.html) - בדיוק כמו במערכת הישנה:
   הסכומים מוצגים כשורה מודגשת בתוך הטבלה עצמה, לא בתיבה נפרדת מתחתיה (זה משתמש בכיתות
   totals-label/totals-value המשותפות, אבל בלי העטיפה .totals-box של תיבת הסיכום הנפרדת) */
.items-totals-row td { background: var(--table-header-bg); border-top: 2px solid var(--table-header-border); border-bottom: none; padding: 10px 12px; }
.items-totals-row .totals-cell { text-align: center; }
.items-totals-row .totals-label { font-size: 11px; color: var(--text-light); }
.items-totals-row .totals-value { font-size: 15px; font-weight: 700; color: var(--text); white-space: nowrap; }

.form-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-start;
  margin-top: 20px;
}

.form-actions .btn-primary, .form-actions .btn-secondary { width: auto; padding: 10px 24px; }

.autosave-status {
  display: none;
  align-self: center;
  margin-inline-end: auto;
  font-size: 12px;
  color: var(--text-light);
}
.autosave-status.error {
  color: var(--danger);
  font-weight: 700;
  background: #fef2f2;
  padding: 4px 10px;
  border-radius: 6px;
}

/* ---------- תג תפקיד צבעוני ---------- */
.role-badge {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  color: white;
}

/* ---------- מטריצת הרשאות ---------- */
.permissions-table th, .permissions-table td { text-align: center; }
.permissions-table th:last-child, .permissions-table td:last-child { text-align: right; }
.permissions-table input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; }

.role-toolbar {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.role-toolbar .field { margin-bottom: 0; min-width: 220px; }
.role-toolbar .icon-btn { width: 38px; height: 38px; font-size: 15px; }

/* ---------- GridTools: ייצוא / עמודות / סינון לפי עמודה ---------- */
.gt-popover-wrap { position: relative; display: inline-block; }

.gt-popover {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  background: white;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  z-index: 100;
  min-width: 180px;
  padding: 8px;
}

.gt-popover.open { display: block; }

.gt-export-menu.open, .gt-columns-menu.open { display: flex; flex-direction: column; gap: 2px; }

.gt-export-menu button {
  display: flex;
  align-items: center;
  gap: 8px;
  border: none;
  background: none;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  text-align: right;
  width: 100%;
}

.gt-export-menu button:hover, .gt-columns-menu label:hover { background: #f3f4f6; }

.gt-col-check {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
}

.gt-col-check input { width: auto; margin: 0; }

th .gt-th-filter { position: static; flex-shrink: 0; }

/* סמל הסינון (▽) בכותרת העמודה, ותפריט הסינון הנפתח שלו - מוצג תמיד, גם בדסקטופ וגם
   בטלפון (הטבלה עצמה מוצגת בשני המקרים, עם גלילה צידה בטלפון - ר' table-wrapper) */

.gt-filter-icon.active { color: var(--primary); font-weight: 700; }

.gt-sort-icon {
  border: none;
  background: none;
  color: var(--text-light);
  cursor: pointer;
  font-size: 10px;
  padding: 2px;
  vertical-align: middle;
  margin-left: 2px;
}
.gt-sort-icon.active { color: var(--primary); font-weight: 700; }

.gt-filter-menu {
  left: auto;
  right: 0;
  min-width: 220px;
  max-width: 260px;
}

.gt-filter-search {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  margin-bottom: 6px;
  outline: none;
}

.gt-filter-list {
  max-height: 220px;
  overflow-y: auto;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 4px 0;
  margin-bottom: 8px;
}

.gt-filter-actions { display: flex; gap: 8px; }
.gt-filter-actions button { flex: 1; width: auto; padding: 7px; font-size: 12px; }

th { position: relative; white-space: nowrap; }
/* flex-start, לא flex-end - ר' ההסבר ליד .toolbar למעלה */
.grid-toolbar { display: flex; align-items: center; justify-content: flex-start; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.gt-toolbar-search {
  padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px;
  font-family: inherit; width: 220px; max-width: 100%; margin-left: auto;
}

/* ---------- ווריאציות מוצר (רשימת שורות במודל הניהול, כולל מחיר אופציונלי לכל ווריאציה) ---------- */
.variation-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  padding: 6px 10px;
  margin-bottom: 6px;
  font-size: 13px;
}
.variation-row-name-input {
  flex: 1;
  min-width: 0;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: inherit;
  font-size: 13px;
  color: var(--primary-dark);
  background: #fff;
}
.variation-row-price {
  width: 130px;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: inherit;
  font-size: 12.5px;
  text-align: center;
}
.variation-row-delete {
  background: none;
  border: none;
  color: var(--danger);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  padding: 0;
  flex-shrink: 0;
}
.variation-empty { color: var(--text-light); font-size: 13px; }

.field-hint { color: var(--text-light); font-size: 12.5px; margin: -4px 0 12px; line-height: 1.5; }

/* ---------- שורה מתרחבת של תתי-קבוצות (מסך קבוצות מוצרים) ---------- */
.subgroup-visibility-select {
  width: 190px;
  flex-shrink: 0;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: inherit;
  font-size: 12.5px;
  background: #fff;
}
.subgroup-detail-row > td { background: #f8fafc; padding: 14px 20px; border-top: none; }
.subgroup-panel-inner .variations-list-scroll,
.subgroup-panel { max-width: 640px; }
.subgroup-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13.5px;
  margin-bottom: 10px;
}
.subgroup-panel-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 15px;
  color: var(--text-light);
}
.subgroup-panel-mobile {
  margin: 0 0 12px;
  padding: 12px;
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 10px;
}

/* ---------- כותרת עמודה עם מיון + סינון מול השרת (מסך מחירון) ---------- */
.plh-col-head { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.plh-filter-select {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 400;
  background: #fff;
}

/* ---------- מודל ניהול ווריאציות: כרטיס "הוספת ווריאציה" מקובץ, ורשימת הקיימות גוללת בנפרד ---------- */
.variations-add-card {
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 14px 4px;
  margin-bottom: 16px;
}
.variations-add-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0;
  color: var(--text-light);
  font-size: 12px;
}
.variations-add-divider::before, .variations-add-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
.variations-list-scroll {
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px;
  margin-bottom: 14px;
}
.variations-list-scroll .variation-row:last-child { margin-bottom: 0; }

/* ---------- שורת מחיר אישי ללקוח, לכל ווריאציה בנפרד (מסך מחירון) ---------- */
.price-variation-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 8px;
}
.price-variation-row-name { flex: 0 0 110px; font-size: 13px; color: var(--primary-dark); font-weight: 600; }
.price-variation-row-price {
  flex: 1;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: inherit;
  font-size: 12.5px;
  text-align: center;
}
.variation-chip-barcode { color: var(--text-light); font-size: 11px; }

.variation-pick-btn {
  display: block;
  width: 100%;
  text-align: right;
  padding: 10px 14px;
  margin-bottom: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: white;
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
}
.variation-pick-btn:hover { background: #f3f4f6; border-color: var(--primary); }

.item-variation-badge {
  font-size: 11px;
  color: var(--primary-dark);
  font-weight: 700;
  margin-top: 2px;
}

/* ---------- לוח בקרה ---------- */
.dashboard-hero { margin-bottom: 20px; }
.dashboard-hero h2 { font-size: 26px; margin: 0 0 4px; }
.dashboard-hero p { margin: 0; color: var(--text-light); font-size: 14px; }

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.dashboard-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  text-decoration: none;
  color: var(--text);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .15s, transform .15s;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dashboard-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.dashboard-card-icon {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  border-radius: var(--radius-md);
  background: var(--primary-soft);
}
.dashboard-card-value { font-size: 26px; font-weight: 700; }
.dashboard-card-label { font-size: 13px; color: var(--text-light); }

/* ---------- App Card: רכיב widget אחיד ללוח הבקרה (ולשימוש עתידי בשאר המסכים) ---------- */
.dashboard-widgets {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
  align-items: start;
}
@media (max-width: 960px) {
  .dashboard-widgets { grid-template-columns: 1fr; }
}
.app-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.app-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border-light);
}
.app-card-header h3 { margin: 0; font-size: 15px; }
.app-card-header p { margin: 2px 0 0; font-size: 12px; color: var(--text-light); }
.app-card-body { padding: 8px 18px 18px; }

.recent-orders-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-light);
  text-decoration: none;
  color: var(--text);
}
.recent-orders-row:last-child { border-bottom: none; }
.recent-orders-row:hover { background: var(--surface-muted); margin: 0 -18px; padding-inline: 18px; }
.recent-orders-main { display: flex; flex-direction: column; gap: 2px; }
.recent-orders-customer { font-weight: 600; font-size: 13px; }
.recent-orders-meta { font-size: 12px; color: var(--text-light); }
.recent-orders-total { font-weight: 700; font-size: 13px; color: var(--primary); white-space: nowrap; }

.quick-actions-list { display: flex; flex-direction: column; gap: 8px; }
.quick-action-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  transition: background .12s, border-color .12s;
}
.quick-action-btn:hover { background: var(--primary-soft); border-color: var(--primary); }
.quick-action-icon { font-size: 16px; }

/* ---------- GridTools: עימוד (בתחתית כל טבלה במערכת) ---------- */
/* מקובעת (position: sticky) לתחתית המסך תמיד - כדי שכפתורי הדפדוף/גודל העמוד יישארו
   נגישים גם בגלילה, בלי צורך לגלול עד ממש סוף הטבלה. רקע אטום כדי שלא "יראו דרכה" שורות
   שגוללות מתחתיה */
.gt-pagination-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-light);
  position: sticky;
  bottom: 0;
  background: white;
  z-index: 5;
}
.gt-pagination-size { display: flex; align-items: center; gap: 8px; }
.gt-pagination-size select {
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  background: white;
}
.gt-pagination-controls { display: flex; align-items: center; gap: 6px; }
.gt-pagination-controls .btn-toolbar { padding: 6px 12px; font-size: 12px; }
.gt-pagination-controls .btn-toolbar:disabled { opacity: .45; cursor: not-allowed; }
/* מקור הגלישה האופקית "רפאים" שתוקנה ב-js/api.js (resetHorizontalScroll) אותר בסוף: לא
   הסיידבר בכלל - אלה כפתורי העימוד (ראשון/הקודם/מספרי עמוד/הבא/אחרון + תיבת "שורות
   לעמוד") שביחד רחבים מדי למסך צר ולא נשברו לשורה נוספת (רק ה-bar החיצוני "ידע" להיעטף,
   לא ה-controls עצמם) - התיקון האמיתי הוא כאן, לא רק הפצ'-אפ הגלובלי */
@media (max-width: 860px) {
  /* flex-start (לא flex-end) בציר-הצולב כאן משמעו "ימין" ב-RTL - אותה מלכודת בדיוק כמו
     justify-content: flex-end שגרמה לבאג המקורי, רק על align-items הפעם */
  .gt-pagination-bar { flex-direction: column; align-items: flex-start; }
  .gt-pagination-controls { flex-wrap: wrap; justify-content: flex-start; }
  .gt-pagination-controls [data-act="first"], .gt-pagination-controls [data-act="last"] { display: none; }

  /* שדות בטור אחד בטלפון, לא זה-לצד-זה - כמה מסכים (למשל דוח לקוח) מגדירים
     grid-template-columns כ-style מוטבע עם רוחב מינימלי קבוע לעמודה (כמו
     minmax(160px,1fr) כפול 4 עמודות) שלא מתכווץ מתחת לזה לעולם - !important כדי לנצח
     את ה-inline style עצמו, לא רק ספציפיות רגילה */
  .field-row { grid-template-columns: 1fr !important; }
}

/* ---------- תפריט צד כתפריט "המבורגר" בטלפון ---------- */
.sidebar-hamburger-btn {
  display: none;
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 300;
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 10px;
  background: var(--sidebar-bg);
  color: white;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
}
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.5);
  z-index: 170;
}
.sidebar-backdrop.open { display: block; }

/* ברירת מחדל (מסך רגיל) - התווית/תצוגה הכפולה של מחיר מוצגת רק בטלפון (הכללים בתוך
   ה-media query שמתחת הופכים את זה כשהמסך צר) - חייב לבוא לפני ה-media query, אחרת
   הכלל הזה (ללא תנאי) מנצח את זה שבתוך ה-media query בגלל סדר ההופעה בקובץ */
.order-items-mobile-label { display: none; }
.order-items-price-combo {
  display: none;
  font-size: 12px;
  line-height: 1.6;
}
.order-items-price-combo .price-combo-list { color: var(--text-light); }
.order-items-price-combo .price-combo-customer { font-weight: 700; color: var(--primary); }

@media (max-width: 860px) {
  .app-layout { display: block; }
  .sidebar-hamburger-btn { display: flex; }
  .sidebar {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 260px;
    max-width: 82vw;
    transform: translateX(100%);
    transition: transform .25s ease;
    z-index: 180;
    overflow-y: auto;
  }
  .sidebar.open { transform: translateX(0); }
  .sidebar .logo { padding-top: 56px; }
  .main {
    width: 100%;
    padding: 64px 16px 24px; /* מקום לכפתור ההמבורגר הצף מעל התוכן */
  }
  .topbar { flex-wrap: wrap; gap: 10px; }
  .impersonation-banner { margin-top: 54px; } /* לא להיחבא מתחת לפס ה"בית" */

  /* סרגל הוספת פריט להזמנה (חיפוש/סינון/קטלוג) - בטלפון כל שדה מקבל שורה מלאה משלו
     במקום להצטופף זה לצד זה, כדי שלא יידחקו מעבר לרוחב המסך */
  .card-header { flex-wrap: wrap; }
  #recalcPromoBtn { width: 100%; order: 1; }
  .add-item-toolbar { width: 100%; flex-direction: column; align-items: stretch; order: 2; }
  .add-item-toolbar #addItemGroupFilter { width: 100%; }
  .add-item-search-wrap { width: 100%; }
  /* מתחת ל-16px, ספארי באייפון מזהה מיקוד על שדה טקסט כ"קשה לקריאה" ומגדיל (מזום) את
     כל המסך אוטומטית - מ-16px ומעלה ההתנהגות הזו לא מופעלת. זה קורה כאן כי הקוד ממקד
     את שדה החיפוש הזה מחדש אחרי כל הוספת מוצר, כדי לאפשר הוספה נוחה של כמה מוצרים ברצף */
  .add-item-search-wrap input { font-size: 16px; }

  /* המדיניות הכללית של המערכת: כל רשימה/טבלה נשארת טבלה גם בטלפון (עם גלילה צידה דרך
     table-wrapper{overflow-x:auto}), לא הופכת לכרטיסים - חזרה מפורשת מ"מצב כרטיסים" שהיה
     קודם. אין כאן יותר צורך בהחלפת display בין טבלה לכרטיסים - .orders-card-list/.gt-card-list
     נשארים במצב display:none הבסיסי שלהם (מוגדר בהמשך הקובץ) בכל רוחב מסך */

  /* עכשיו כשהטבלה עצמה (לא כרטיסים) מוצגת גם בטלפון, סמל הסינון (▽) הרגיל בכל כותרת עמודה
     נשאר מוצג בטלפון בדיוק כמו בדסקטופ (מוגדר למעלה בקובץ, בלי override פה) - אין יותר
     כפתור "מסננים" מרוכז נפרד (.gt-mobile-bar) לצד זה */

  /* ---------- טבלת פריטי הזמנה (order-edit.html) - כל שורה הופכת לכרטיס עצמאי, בלי
     לגעת ב-DOM/JS בכלל (אותם inputs/event listeners בדיוק) - רק שינוי CSS של איך אותם
     תאים נראים ומסודרים. שדות משניים (מס' שורה, ברקוד, מחיר גולמי לפני מע"מ) מוסתרים
     כי המידע העיקרי (שם מוצר, כמות, מחיר ללקוח, סה"כ, הערה) כבר על הכרטיס עצמו ---------- */
  body #itemsTable, body #itemsTable tbody, body #itemsTable tr { display: block; width: 100%; }
  #itemsTable thead, #itemsTable .row-number, #itemsTable .item-barcode,
  #itemsTable .raw-price-cell, #itemsTable .item-base-price { display: none; }
  /* מחיר מכירה בטלפון: תצוגה כפולה קומפקטית (מחירון/ללקוח) שהוגדרה בעבר אך מעולם לא
     הופעלה בפועל (חסרה בדיוק ה"הפעלה" הזו) - זה השלב שסוגר את הפער */
  body #itemsTable .order-items-price-combo { display: block; }
  #itemsTable tbody tr {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px;
    margin-bottom: 10px;
  }
  #itemsTable td { display: block; padding: 0 !important; border: none !important; }
  #itemsTable .qty-cell, #itemsTable .price-cell, #itemsTable .line-total, #itemsTable .note-cell {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }

  /* ---------- מטריצת הרשאות (permissions.html) - כל שורת מודול הופכת לכרטיס, עם שם
     המודול (העמודה האחרונה בטבלה) קופץ להיות הכותרת הראשונה של הכרטיס (order:-1) ---------- */
  #permissionsTable, #permissionsTable tbody, #permissionsTable tr { display: block; width: 100%; }
  #permissionsTable thead { display: none; }
  #permissionsTable tbody tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px;
    margin-bottom: 10px;
  }
  #permissionsTable td { display: flex; align-items: center; gap: 6px; padding: 0 !important; border: none !important; font-size: 13px; }
  #permissionsTable td:last-child { order: -1; width: 100%; font-weight: 700; font-size: 15px; margin-bottom: 4px; }
  #permissionsTable td::before { color: var(--text-light); }
  #permissionsTable td:nth-child(1)::before { content: 'קריאה'; }
  #permissionsTable td:nth-child(2)::before { content: 'הוספה'; }
  #permissionsTable td:nth-child(3)::before { content: 'עדכון'; }
  #permissionsTable td:nth-child(4)::before { content: 'מחיקה'; }
  #permissionsTable td:nth-child(5)::before { content: 'ייצוא'; }
  #itemsTable .qty-cell::before { content: 'כמות'; font-size: 12px; color: var(--text-light); font-weight: 600; }
  #itemsTable .line-total::before { content: 'סה"כ'; font-size: 12px; color: var(--text-light); font-weight: 600; }
  #itemsTable .line-total { font-size: 15px; }
  #itemsTable .note-cell .item-note { flex: 1; }
  #itemsTable .actions-cell { display: flex; justify-content: flex-end; }
  #itemsTable tfoot, #itemsTable tfoot tr { display: block; width: 100%; }
  #itemsTable tfoot td:not(.totals-cell) { display: none; }
  #itemsTable tfoot td.totals-cell { display: block; width: 100%; }
  .items-totals-row { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; margin-top: 6px; }
  .items-totals-row .totals-cell { display: flex; justify-content: space-between; padding: 4px 0 !important; }
  .items-totals-row .totals-label { font-size: 13px; color: var(--text-light); }
  .items-totals-row .totals-value { font-size: 14px; font-weight: 700; }
}

/* רשימת כרטיסים חלופית לטבלת ההזמנות בטלפון - כל הזמנה כרטיס עצמאי עם הפרטים העיקריים
   וגישה מהירה לפעולות (הדפסה/עריכה/מחיקה), ולחיצה על גוף הכרטיס פותחת את אותו פופ-אפ
   פירוט מלא שמשמש גם את הטבלה עצמה במסך רגיל - אין צורך בגלילה צידה בטלפון בכלל */
.orders-card-list { display: none; flex-direction: column; gap: 6px; }
.order-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 10px;
  cursor: pointer;
}
.order-card.has-returns-row { border-color: var(--status-attention); }
.order-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 3px; }
.order-card-id { font-size: 12px; color: var(--text-light); font-weight: 600; }
.order-card-customer { font-size: 15px; font-weight: 700; margin-bottom: 1px; }
.order-card-meta { font-size: 12px; color: var(--text-light); margin-bottom: 5px; }
.order-card-bottom { display: flex; justify-content: space-between; align-items: center; }
.order-card-total { font-size: 15px; font-weight: 700; color: var(--primary); }
.order-card-actions { display: flex; gap: 4px; }
.order-card-actions .icon-btn { width: 28px; height: 28px; }

/* ---------- GridTools.renderCardList - כרטיס גנרי לכל מסך רשימה שמשתמש ברכיב הטבלה
   המשותף (customers/products/price-list וכו') - אותה שפה חזותית כמו .order-card.
   display:none חייב לבוא כאן, לפני ה-media query שמעל שמפעיל flex בטלפון - אחרת (כמו
   שקרה בפועל) הכלל הזה, שמאוחר יותר בקובץ, מנצח את ה-flex בגלל סדר הופעה זהה-ספציפיות */
.gt-card-list { display: none; flex-direction: column; gap: 6px; }
.gt-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 10px;
  cursor: pointer;
}
.gt-card-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 2px; }
.gt-card-title { font-size: 15px; font-weight: 700; }
.gt-card-subtitle { font-size: 12px; color: var(--text-light); margin-bottom: 5px; }
.gt-card-bottom { display: flex; justify-content: space-between; align-items: center; }
.gt-card-amount { font-size: 14px; font-weight: 700; color: var(--primary); }
.gt-card-actions { display: flex; gap: 4px; }
.gt-card-actions .icon-btn { width: 28px; height: 28px; }
.gt-card-with-image { display: flex; gap: 10px; align-items: flex-start; }
.gt-card-with-image .gt-card-content { flex: 1; min-width: 0; }
.gt-card-image { width: 44px; height: 44px; border-radius: var(--radius-sm); object-fit: contain; background: var(--surface-muted); flex-shrink: 0; }
.gt-card-image-empty { background: var(--surface-muted); }

/* ---------- סרגל חיפוש + מסננים אחיד (js/grid-tools.js: registerMobileFilter) - נבנה
   אוטומטית מעל כל טבלה/רשימת-כרטיסים שיש לה לפחות סינון עמודה אחד רשום. מוצג רק בטלפון
   (ר' המדיה קוורי בהמשך הקובץ) - בדסקטופ ממשיכים להשתמש בסמל ▽ הרגיל בכל כותרת עמודה
   (attachColumnFilter), בדיוק כמו שהיה ---------- */
.gt-mobile-bar { display: none; gap: 8px; margin-bottom: 12px; }
.gt-mobile-search {
  flex: 1;
  min-width: 0;
  max-width: 320px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 14px;
  font-family: inherit;
  background: var(--surface);
}
.gt-mobile-filter-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.gt-mobile-filter-btn:hover { background: var(--primary-soft); border-color: var(--primary); }
.gt-mobile-filter-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--primary);
  color: white;
  font-size: 11px;
  font-weight: 700;
}
@media (min-width: 861px) {
  .gt-mf-drawer { width: 480px; max-width: 90vw; border-radius: 16px; margin-bottom: 40px; }
}

/* התפריט הנפתח (bottom sheet) עצמו לא תלוי ברוחב מסך - ייבנה רק בטלפון בפועל (הכפתור
   שפותח אותו מוסתר בדסקטופ), אבל אין סיבה לנעול את זה גם ב-CSS בנוסף */
.gt-mf-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .5);
  z-index: 400;
  align-items: flex-end;
  justify-content: center;
}
.gt-mf-overlay.open { display: flex; }
.gt-mf-drawer {
  background: var(--surface);
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  border-radius: 16px 16px 0 0;
  padding: 16px;
}
.gt-mf-drawer-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.gt-mf-drawer-header h3 { margin: 0; font-size: 16px; }
/* אקורדיון סגור כברירת מחדל - שדה אחד פתוח בכל פעם, לא כל רשימות הערכים גלולות זו מתחת
   לזו בבת אחת */
.gt-mf-group { border-bottom: 1px solid var(--border-light); }
.gt-mf-group:last-child { border-bottom: none; }
.gt-mf-group-title {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 2px;
  border: none;
  background: none;
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  color: var(--text);
  cursor: pointer;
  text-align: right;
}
.gt-mf-group-count { color: var(--primary); font-weight: 700; font-size: 11px; }
.gt-mf-group-arrow { margin-right: auto; color: var(--text-light); font-size: 10px; transition: transform .15s; }
.gt-mf-group.open .gt-mf-group-arrow { transform: rotate(180deg); }
.gt-mf-group-body { display: none; padding: 0 2px 8px; }
.gt-mf-group.open .gt-mf-group-body { display: block; }
.gt-mf-group-search {
  width: 100%;
  padding: 5px 8px;
  margin-bottom: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-family: inherit;
}
.gt-mf-options { display: flex; flex-direction: column; gap: 1px; max-height: 180px; overflow-y: auto; }
.gt-mf-select-all { font-weight: 700; border-bottom: 1px solid var(--border-light); margin-bottom: 3px; padding-bottom: 6px; }
.gt-mf-drawer-actions { display: flex; gap: 10px; margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--border-light); }
.gt-mf-drawer-actions button { flex: 1; }

/* =====================================================================
   שפת עיצוב אחידה לכפתורים בכל המערכת: כולם "פיל" (פינות מעוגלות מלא), אותו גופן/משקל/מעבר.
   מוגדר בסוף הקובץ בכוונה - מנצח כללי כפתורים ישנים ומפוזרים למעלה (אותה ספציפיות)
   ===================================================================== */
.btn-primary, .btn-secondary, .btn-add, .btn-toolbar, .btn-teal, .btn-danger {
  font-family: inherit;
  font-weight: 600;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s, color .15s;
  box-sizing: border-box;
  text-decoration: none;
}
.btn-primary, .btn-secondary, .btn-teal, .btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  padding: 8px 20px;
  font-size: 14px;
}
.btn-secondary { background: rgb(232, 244, 255); color: rgb(72, 149, 239); }
.btn-secondary:hover { background: #dbeafe; }
.btn-teal, .btn-danger { color: white; }

/* במובייל: כל כפתורי הניהול בכל דף (פס הכלים מעל הטבלאות) תמיד בשורה אחת בקו אחיד -
   בלי שבירה לשורה שנייה. הכפתורים מתכווצים יחד (גופן/ריווח קטנים, טקסט ארוך נחתך ב-...).
   בלי גלילה אופקית בכוונה - רשימות עמודות/סינון נפתחות כ-popover מוחלט שהיה נחתך בתוכה */
@media (max-width: 860px) {
  .toolbar, .grid-toolbar {
    flex-wrap: nowrap;
    gap: 6px;
    align-items: center;
  }
  .toolbar > .btn-toolbar, .toolbar > .btn-add, .toolbar > .btn-primary, .toolbar > .btn-secondary,
  .grid-toolbar > .btn-toolbar, .grid-toolbar > .btn-add, .grid-toolbar > .btn-primary, .grid-toolbar > .btn-secondary {
    flex: 0 1 auto;
    min-width: 0;
    width: auto;
    height: 34px;
    min-height: 34px;
    padding: 0 10px;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* חיפוש בשורת הכותרת של הכרטיס (ליד שם הרשימה, ר' customers.html) - תופס את יתרת המקום בשורה
   ומפנה את שורת הכפתורים למטה. גם הכפתורים העטופים ע"י GridTools (ייצוא/עמודות - בתוך
   .gt-popover-wrap ולא ילדים ישירים של הפס) חייבים אותה דחיסה, אחרת הטקסט שלהם נשבר לשתי שורות */
.card-header .gt-header-search { flex: 1; min-width: 0; width: auto; margin: 0 16px 0 0; }
@media (max-width: 860px) {
  .card-header .gt-header-search { margin: 0 10px 0 0; }
  .grid-toolbar .btn-toolbar, .toolbar .btn-toolbar { white-space: nowrap; }
  .grid-toolbar .gt-popover-wrap, .toolbar .gt-popover-wrap { flex: 0 0 auto; }
  .grid-toolbar .gt-popover-wrap > .btn-toolbar, .toolbar .gt-popover-wrap > .btn-toolbar {
    height: 34px; padding: 0 10px; font-size: 12px;
  }
}

/* עימוד בכל המערכת (GridTools) במובייל: "שורות לעמוד" + הקודם + מספרי עמודים + הבא תמיד בשורה
   אחת (ספירת הרשומות מתחת), הכל מכווץ - גם הכפתורים וגם ריווחים */
@media (max-width: 860px) {
  .gt-pagination-bar {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 8px;
  }
  .gt-pagination-size { flex: 0 0 auto; gap: 3px; font-size: 11px; white-space: nowrap; }
  .gt-pagination-size select { padding: 3px 4px; font-size: 12px; }
  .gt-pagination-controls { flex: 0 1 auto; flex-wrap: nowrap; justify-content: flex-end; gap: 3px; min-width: 0; }
  .gt-pagination-controls .btn-toolbar { height: 28px; padding: 0 6px; font-size: 11px; white-space: nowrap; }
  .gt-pagination-controls .pagination-pages { display: flex; flex-wrap: nowrap; gap: 2px; }
  .gt-pagination-controls .page-btn { min-width: 24px; height: 28px; padding: 0 3px; font-size: 11px; }
  .gt-pagination-info { flex: 0 0 100%; order: 3; font-size: 12px; }
}

/* ---------- מצב הטמעה (iframe בתוך מרכז WhatsApp): בלי סיידבר וכותרת עליונה ---------- */
html.embed .sidebar, html.embed .sidebar-hamburger-btn, html.embed .sidebar-backdrop, html.embed .topbar, html.embed .impersonation-banner { display: none !important; }
html.embed .main { width: 100% !important; padding: 8px 10px !important; }

/* ---------- שורה שנמכרת בהפסד (מחירון) ---------- */
tr.row-loss > td { background: #fee2e2 !important; }
tr.row-loss > td:first-child { box-shadow: inset -4px 0 0 #dc2626; }
.loss-badge { display: inline-block; margin-inline-start: 6px; background: #dc2626; color: #fff; border-radius: 999px; font-size: 11px; font-weight: 700; padding: 1px 8px; white-space: nowrap; }

/* תחתית משפטית במסכי התחברות: ממורכזת מתחת לכרטיס, בצבעים בהירים */
.login-page #legalFooter { margin: 20px auto 0 !important; border-top-color: rgba(255,255,255,.25) !important; color: #e2e8f0 !important; max-width: 92vw; }
.login-page #legalFooter a { color: #fff !important; }
@media (max-width: 480px) {
  .login-page { padding: 16px 0; }
  .login-card { padding: 28px 22px; }
}

/* ---------- חיפוש גלובלי בפס העליון ---------- */
.gs-wrap { position: relative; flex: 1; max-width: 380px; margin: 0 16px; }
.gs-input { width: 100%; box-sizing: border-box; padding: 8px 14px; border: 1px solid #d1d5db; border-radius: 20px; font-size: 14px; background: #f9fafb; }
.gs-input:focus { outline: none; border-color: #2563eb; background: #fff; }
.gs-dropdown { display: none; position: absolute; top: calc(100% + 6px); right: 0; left: 0; z-index: 3000; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.15); max-height: 70vh; overflow-y: auto; }
.gs-dropdown.open { display: block; }
.gs-title { padding: 6px 12px; font-size: 12px; color: #6b7280; background: #f3f4f6; font-weight: 600; }
.gs-row { display: block; padding: 9px 12px; color: #111827; text-decoration: none; font-size: 14px; border-bottom: 1px solid #f3f4f6; }
.gs-row:hover { background: #eff6ff; }
.gs-muted { color: #6b7280; font-size: 12px; }
.gs-empty { padding: 14px; text-align: center; color: #6b7280; font-size: 14px; }
@media (max-width: 768px) { .gs-wrap { order: 5; flex: 1 1 100%; max-width: none; margin: 0; } }

/* ---------- שיפורי מובייל למערכת הניהול ---------- */
@media (max-width: 768px) {
  /* 16px מונע מ-iOS להתקרב אוטומטית לשדה בזמן הקלדה */
  .main input:not([type="checkbox"]):not([type="radio"]), .main select, .main textarea, .modal-box input:not([type="checkbox"]):not([type="radio"]), .modal-box select, .modal-box textarea { font-size: 16px; min-height: 42px; }
  /* אזורי לחיצה נוחים לאגודל */
  .btn-primary, .btn-secondary, .btn-toolbar, .modal-actions button { min-height: 42px; padding-top: 9px; padding-bottom: 9px; }
  .logout-link, .sidebar nav a { min-height: 40px; display: flex; align-items: center; }
  .modal-box { max-height: 92vh; overflow-y: auto; }
}
.fab-new-order { display: none; }
@media (max-width: 768px) {
  .fab-new-order { display: flex; position: fixed; bottom: 18px; left: 18px; z-index: 2500; align-items: center; gap: 6px; padding: 12px 18px; border-radius: 30px; background: #2563eb; color: #fff; font-weight: 700; font-size: 15px; text-decoration: none; box-shadow: 0 6px 18px rgba(37,99,235,.45); }
}

/* ---------- כפתור הזמנה חדשה בשורה העליונה ---------- */
.topbar-new-order { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; margin: 0 14px; border-radius: 20px; background: #2563eb; color: #fff; font-weight: 700; font-size: 14px; text-decoration: none; white-space: nowrap; box-shadow: 0 2px 8px rgba(37,99,235,.35); }
.topbar-new-order:hover { background: #1d4ed8; }

/* ---------- כרטיס "דוחות" נפתח בתפריט הצד ---------- */
.nav-group-toggle { display: flex; align-items: center; cursor: pointer; }
.nav-group-arrow { margin-right: auto; transition: transform .2s; font-size: 12px; }
.nav-group.open .nav-group-arrow { transform: rotate(180deg); }
.nav-group-items { display: none; padding: 2px 0 6px; }
.nav-group.open .nav-group-items { display: block; }
.nav-sub { display: block; padding: 8px 44px 8px 12px; font-size: 13px; color: inherit; text-decoration: none; opacity: .85; border-radius: 8px; margin: 1px 0; }
.nav-sub:hover { background: rgba(255,255,255,.08); opacity: 1; }
.nav-sub.active { background: rgba(255,255,255,.14); opacity: 1; font-weight: 600; }

/* ---------- דף מרכז: ריבועים ללחיצה ---------- */
.hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; padding: 4px 0; }
.hub-tile { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 26px 16px; background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; color: #111827; text-decoration: none; box-shadow: 0 1px 3px rgba(0,0,0,.05); transition: transform .12s, box-shadow .12s, border-color .12s; }
.hub-tile:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(37,99,235,.15); border-color: #2563eb; }
.hub-tile-icon { font-size: 38px; line-height: 1; }
.hub-tile-title { font-size: 17px; font-weight: 700; }
.hub-tile-desc { font-size: 13px; color: #6b7280; }
@media (max-width: 600px) { .hub-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } .hub-tile { padding: 18px 10px; } .hub-tile-icon { font-size: 30px; } .hub-tile-title { font-size: 15px; } }

/* ---------- תפריט צף בצמוד לכפתור קטגוריה ---------- */
.nav-flyout { position: fixed; z-index: 4000; min-width: 220px; background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.22); padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.nav-flyout-item { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 8px; color: #111827; text-decoration: none; font-size: 15px; font-weight: 600; white-space: nowrap; }
.nav-flyout-item:hover { background: #eff6ff; color: #1d4ed8; }
.nav-flyout-item.active { background: #dbeafe; color: #1d4ed8; }
.nav-flyout-icon { font-size: 20px; width: 26px; text-align: center; }

/* חץ קטן בקצה השמאלי של כפתורי קטגוריה עם פופ-אפ - מצויר ב-CSS (תו גרשיים היה מתהפך בכיוון ימין-לשמאל) */
[data-flyout] { position: relative; }
.nav-badge { position: absolute; left: 32px; top: 50%; transform: translateY(-50%); background: #ef4444; color: #fff; border-radius: 10px; min-width: 18px; padding: 1px 6px; font-size: 11px; font-weight: 700; line-height: 16px; text-align: center; }
.nav-flyout-item .nav-badge { position: static; transform: none; margin-right: auto; margin-left: 0; }
.nav-flyout-arrow { position: absolute; left: 14px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); opacity: .7; }
[data-flyout]:hover .nav-flyout-arrow { opacity: 1; }

/* בחירת הזמנות לייצוא מסמכים מרובים: העמודה/תיבות הסימון מוסתרות עד לחיצה על "ייצוא מסמכים מרובים" */
.col-select { width: 36px; text-align: center; }
.col-select input, .order-card-id input { cursor: pointer; width: 16px; height: 16px; vertical-align: middle; }
#ordersTable th.col-select, #ordersTable td.col-select { display: none; }
#ordersTable.select-mode th.col-select, #ordersTable.select-mode td.col-select { display: table-cell; }
.order-card-id input { display: none; }
#ordersCardList.select-mode .order-card-id input { display: inline-block; }

/* מסך הזמנות במובייל: הכפתורים עוברים לשתי שורות (במקום שורה אחת מכווצת) כדי שהשמות לא ייחתכו */
@media (max-width: 860px) {
  .grid-toolbar.grid-toolbar-wrap { flex-wrap: wrap; row-gap: 8px; }
  .grid-toolbar.grid-toolbar-wrap > .btn-toolbar, .grid-toolbar.grid-toolbar-wrap > .btn-add,
  .grid-toolbar.grid-toolbar-wrap .gt-popover-wrap > .btn-toolbar {
    flex: 0 0 auto; overflow: visible; text-overflow: clip; white-space: nowrap;
  }
}