:root {
/* פלטה בהשראת הלוגו: כחול נייבי עמוק לפעולות עיקריות, נחושת-ברונזה כאקצנט
משני, רקע בהיר קריר (במקום הקרם החם הקודם) - נגזר ישירות מדוגמת צבע
שנלקחה מ-assets/logo-new.png */
--primary: #0b3d8f;
--primary-dark: #06254e;
--primary-light: #e3eafa;
--accent: #c97a3e;
--accent-soft: #f8e8d8;
--blob: #e7ecf5;
--danger: #c14a3a;
--warning: #d9a72b;
--success: #2f8f52;
--bg: #f4f6fa;
--bg-2: #eceff6;
--surface: #ffffff;
--border: #dce2ee;
--text: #16233d;
--text-muted: #64708a;
--radius: 16px;
--shadow-color: rgba(10,20,45,.08);
--danger-soft: #f7e2dd;
--warning-soft: #faf0d8;
--success-soft: #e3f0e6;
/* גרסאות טקסט כהות יותר לשימוש כטקסט על רקע "soft" מאותו גוון - הצבעים הרגילים
(--warning/--danger/--success/--accent) מיועדים בעיקר לרקעים מלאים/אייקונים ולא
עוברים ניגודיות טקסט תקנית (WCAG AA, 4.5:1) כשמונחים כטקסט על ה-soft שלהם - סקירת
נגישות (12.8.2026) מצאה את זה בתגיות (badge) ובתגית ה"scope" של כרטיסי הסטטיסטיקה. */
--warning-text: #8a6410;
--danger-text: #8f2e21;
--success-text: #1f6b3a;
--accent-text: #8a4a1e;
/* תפריט הצד תמיד בהיר וחם (לבן עם גוון חום עדין) - זהות מותג קבועה, בלי קשר
למצב בהיר/כהה של שאר המסך - שילוב יוקרתי של כחול נייבי (עיקרי) ונגיעות
נחושת (מסגרת/הבלטה), במקום גוון רוז-גולד קודם שנראה עמום מדי */
--sidebar-bg: #fbf7f3;
--sidebar-text: #3d2513;
--sidebar-text-muted: #7c6555;
--sidebar-active-bg: linear-gradient(120deg, #2451c4 0%, #0b3d8f 55%, #9c6b3f 100%);
--sidebar-border: #ecdfd4;
--sidebar-hover-bg: rgba(11,61,143,.08);
color-scheme: light;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--primary: #6e9ee8;
--primary-dark: #a8c4f2;
--primary-light: #1b2c4d;
--accent: #e8ad78;
--accent-soft: #3a2a1c;
--blob: #1e2740;
--danger: #e2796a;
--warning: #e8be6a;
--success: #5dbb7e;
--bg: #0b0f1a;
--bg-2: #10141f;
--surface: #151a26;
--border: #262c3d;
--text: #e7ecf7;
--text-muted: #9aa3b8;
--shadow-color: rgba(0,0,0,.4);
--danger-soft: #3a1f1e;
--warning-soft: #3a2f15;
--success-soft: #163326;
/* במצב כהה הצבעים הרגילים כבר בהירים מספיק לניגודיות תקינה על ה-soft הכהה שלהם -
אין צורך בגרסה כהה יותר, רק משתמשים באותם ערכים. */
--warning-text: #e8be6a;
--danger-text: #e2796a;
--success-text: #5dbb7e;
--accent-text: #e8ad78;
color-scheme: dark;
}
}
:root[data-theme="dark"] {
--primary: #6e9ee8;
--primary-dark: #a8c4f2;
--primary-light: #1b2c4d;
--accent: #e8ad78;
--accent-soft: #3a2a1c;
--blob: #1e2740;
--danger: #e2796a;
--warning: #e8be6a;
--success: #5dbb7e;
--bg: #0b0f1a;
--bg-2: #10141f;
--surface: #151a26;
--border: #262c3d;
--text: #e7ecf7;
--text-muted: #9aa3b8;
--shadow-color: rgba(0,0,0,.4);
--danger-soft: #3a1f1e;
--warning-soft: #3a2f15;
--success-soft: #163326;
--warning-text: #e8be6a;
--danger-text: #e2796a;
--success-text: #5dbb7e;
--accent-text: #e8ad78;
color-scheme: dark;
}
* { box-sizing: border-box; }
/* בלי זה, כל הקשה על כפתור/קישור במגע (לא רק כאן - בכל האפליקציה) מציגה הבזק אפור-כחול
שקוף-חלקית שמובנה בברירת המחדל של דפדפני מובייל (במיוחד WebKit/iOS) - ברגע שאחרי ההקשה
נפתחת חלונית/מודל, ההבזק הזה חופף לאנימציית הפתיחה ונראה כמו "הבהוב" (יהונתן, 1.9.2026,
על פתיחת פרטי חבילה בקטלוג - נשאר גם אחרי שתוקנו כל אנימציות ה-hover/pop הרלוונטיות,
כי זה לא CSS שהאפליקציה כתבה בכלל, אלא UI-כרום מובנה של הדפדפן על הקשה). מצבי ':active'
הרצויים כבר מוגדרים במפורש בכל מקום שצריך (לדוגמה .ops-chat-bubble:active).*/
html { -webkit-tap-highlight-color: transparent; }
/* עיצוב סרגל גלילה אחיד לכל אזורי הגלילה הפנימיים (סיידבר, מודלים, רשימות נגללות) -
דק ועדין, מתכהה ב-hover, נגזר ממשתני הצבע הקיימים כדי להתאים אוטומטית ל-light/dark.
לא על html/body - עמוד הרקע ממשיך לגלול מאחורי מודלים (ה-backdrop שקוף חלקית), וסרגל
מותאם עם track שקוף שם היה מציץ מבעד לרקע הכהה ונראה כמו "חור" צף. */
*:not(html):not(body) { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
*:not(html):not(body)::-webkit-scrollbar { width: 8px; height: 8px; }
*:not(html):not(body)::-webkit-scrollbar-track { background: transparent; }
*:not(html):not(body)::-webkit-scrollbar-thumb { background: var(--border); border-radius: 8px; }
*:not(html):not(body)::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
[hidden] { display: none !important; }
/* body לבדו לא מספיק - בהרבה דפדפני מובייל האלמנט שבאמת גולל אופקית הוא html
(documentElement), לא body. אם תוכן דינמי כלשהו (למשל שם לקוח/מוצר ארוך) יוצא
רחב מהמסך, html גולל אופקית וחושף אלמנטים עם position:fixed בקצה - זה הבאג
ה"קרוע" שדווח בנייד אחרי טעינת תוכן מחדש, גם בלי לגעת בתפריט הצדדי. */
html { overflow-x: hidden; max-width: 100%; }
body { transition: background-color .2s, color .2s; }
body {
margin: 0;
font-family: 'Assistant', 'Segoe UI', Tahoma, sans-serif;
background-color: var(--bg);
background-image:
radial-gradient(900px 500px at 100% -10%, var(--primary-light) 0%, transparent 60%),
radial-gradient(700px 420px at -10% 110%, var(--accent-soft) 0%, transparent 60%);
background-repeat: no-repeat;
background-attachment: fixed;
color: var(--text);
direction: rtl;
overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }
/* ===== כפתורים ===== */
.btn {
border: none;
border-radius: 999px;
padding: 10px 20px;
font-size: 15px;
font-weight: 700;
transition: opacity .15s, transform .05s;
}
.btn:active { transform: scale(0.98); }
.btn .ic { width: 14px; height: 14px; vertical-align: -2px; flex-shrink: 0; }
/* פס נחושת בצד כל כפתור במערכת - אותו עיקרון הבליטה שכבר יש בכותרות עמוד/תפריט צד,
מוחל עכשיו גם על כפתורים כדי שהמותג יהיה עקבי בכל מקום */
.btn { border-inline-start: 3px solid var(--accent); }
/* גוון קבוע ולא var(--primary)/var(--primary-dark) בכוונה - נגד דהייה במצב כהה (בדיוק
כמו ההערה המקבילה ב-.cc-face/.sw-update-toast). "פלדה כחולה מוברשת" - נבחר מתוך
סקיצה (design-lab-blue-buttons.html, 2.9.2026, 6 אפשרויות) אחרי שניסיון קודם עם
קצה בהיר-חיוור (כמו הזהב) נפסל ("מזעזע" - חיוור בכחול קורא תינוקי, לא כמו קרם-שמפניה
שעובד בזהב) - פחות רווי, יותר מאופק/מתכתי, קרוב לגוון שעון/תכשיט יוקרה. */
.btn-primary {
position: relative; overflow: hidden;
background: linear-gradient(135deg, #4a6fa5 0%, #2c4d80 45%, #16294d 100%);
color: #fff;
box-shadow: inset 0 1px 2px rgba(255,255,255,.4), inset 0 0 0 1px rgba(255,255,255,.18), 0 3px 10px rgba(22,41,77,.35);
}
.btn-primary:hover {
opacity: .92;
box-shadow: inset 0 1px 2px rgba(255,255,255,.5), inset 0 0 0 1px rgba(255,255,255,.22), 0 4px 16px rgba(201,122,62,.35);
}
/* פס ברק עדין בהובר - אותו דפוס בדיוק כמו .icon-badge::after (יהונתן, 2.9.2026: "יותר
יוקרתי... הנפשה עדינה"), לא אפקט חדש אלא שימוש חוזר במוסכמת ה"יוקרה" הקיימת. */
.btn-primary::after {
content: ""; position: absolute; inset: -60% -20% auto auto; width: 220%; height: 220%;
background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.4) 50%, transparent 58%);
transform: translateX(-130%); transition: transform .55s ease; pointer-events: none;
}
.btn-primary:hover::after { transform: translateX(25%); }
.btn-secondary { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-inline-start: 3px solid var(--accent); }
.btn-danger { background: var(--danger-soft); color: var(--danger); }
/* רקע אטום, לא שקוף - יהונתן, 2.9.2026: כפתורי "רפאים" מעל ה-watermark ברקע העמוד
נראו מטושטשים/קשים לקריאה כשה-watermark העמוס מתחתיהם "בוקע" דרך הרקע השקוף. */
.btn-ghost { background: var(--surface); color: var(--text-muted); border: 1px solid var(--border); border-inline-start: 3px solid var(--accent); }
.btn-ghost:hover { background: var(--bg-2); }
.btn-block { width: 100%; }
.btn-sm { padding: 6px 12px; font-size: 13px; }
/* בורר ספק/חברה בטופס עסקה ישירה - היה טבעת בצבע המותג הייחודי של כל חברה (בנוסף ללוגו
הצבעוני שכבר בפנים) - יהונתן (2.9.2026): "למה זה צבעוני... נראה קצת צעצועי, יש על כל
כפתור את הלוגו של אותה חברה, נראה לי מספיק ברור" - הלוגו כבר מזהה, הבחירה מתבלטת
בזהב האחיד של המותג במקום בצבע-לפי-מותג (אותו דפוס בדיוק כמו
.packages-catalog-category-tab.active). border-inline-start:none מבטל את פס הנחושת
הכללי של .btn - לא רלוונטי כאן, פיל נקי כמו טאבי הקטגוריה. */
.ds-company-btn, .ds-provider-btn {
border-inline-start: none; background: var(--surface); color: var(--text);
box-shadow: inset 0 0 0 1px var(--border); transition: all .15s;
}
.ds-company-btn.active, .ds-provider-btn.active {
color: #fff;
background: linear-gradient(135deg, #f0d9a6 0%, #c9954a 45%, #8f6a2e 100%);
box-shadow: inset 0 1px 2px rgba(255,255,255,.5), inset 0 0 0 1px rgba(255,255,255,.22), 0 3px 10px rgba(201,149,74,.35);
}
/* לשוניות סטטוס הרשמה בלקוחות - צ'יפ סינון קליל, לא כפתור פעולה מלא (ר' הערת יהונתן
על עומס חזותי במסך לקוחות) - אותה פונקציונליות בדיוק, פחות "צעקני" כשלא פעיל */
.customer-registration-tab-btn { border-radius: 999px; padding: 4px 12px; font-size: 12px; }
.customer-registration-tab-btn.btn-ghost { background: var(--bg-2); border-color: transparent; }
.customer-registration-tab-btn.btn-ghost:hover { background: var(--border); }
.bsd-bar { position: fixed; top: 16px; right: 16px; font-size: 12px; color: var(--text-muted); letter-spacing: .5px; z-index: 30; }
/* ===== מסך התחברות ===== */
/* היה גרדיאנט כחול-כהה מלא (#12469e עד כמעט שחור) עם שני "זוהרים" כתום/כחול - עוצב
כמסך-פתיחה דרמטי, בזמן ששאר האפליקציה (סיידבר/אזור ראשי) תמיד בהיר עם כחול/זהב
כנגיעות בלבד (כפתורים/אייקונים), לא כרקע מלא. יהונתן (1.9.2026, אחרי 2 ניסיונות
קודמים שרק עידנו את אותו רקע כהה): "לעבור לרקע בהיר... כחול/זהב רק כנגיעות עדינות" -
באמצעות var(--bg)/var(--sidebar-bg) הקיימים, כך שגם מצב כהה (data-theme) ממשיך
לעבוד אוטומטית בלי קוד נוסף. ה"זוהרים" הוסרו לגמרי - הם עבדו רק על רקע כהה. */
.login-screen {
min-height: 100vh;
position: relative;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
overflow: hidden;
background: linear-gradient(160deg, var(--sidebar-bg) 0%, var(--bg) 100%);
}
.login-screen::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
background-image: url('../assets/logo-watermark.png');
background-repeat: no-repeat; background-position: 108% 8%; background-size: 620px;
opacity: .12;
}
@media (max-width: 720px) {
.login-screen::before { background-position: 85% 4%; background-size: min(85vw, 460px); }
}
.login-screen .bsd-bar { color: var(--text-muted); z-index: 2; }
.login-card {
position: relative; z-index: 1;
background: var(--surface);
border-radius: 24px;
padding: 40px 32px;
width: 100%;
max-width: 380px;
overflow: hidden;
box-shadow: 0 20px 50px var(--shadow-color), 0 0 0 1px var(--border);
}
.login-card::before {
content: ""; position: absolute; inset-inline: 0; top: 0; height: 5px;
/* גוון זהב אחיד בלבד - היה מעבר כחול-לזהב (יהונתן, 1.9.2026: "לא אוהב... 2 צבעים
שמתמזגים"), אותה גזירת גוונים בדיוק כמו .icon-badge-gold, לעקביות בשפה העיצובית. */
background: linear-gradient(90deg, #f0d9a6 0%, #c9954a 45%, #8f6a2e 100%);
}
.brand { text-align: center; margin-bottom: 28px; }
.tagline { color: var(--text-muted); font-size: 14px; line-height: 1.5; margin: 12px 0 0; }
.brand-logo {
display: block; max-width: 220px; width: 100%; height: auto; margin: 0 auto;
background: #fff; border-radius: 16px;
box-shadow: 0 6px 20px var(--shadow-color), 0 0 0 1px rgba(201,122,62,.25);
}
.login-form { display: flex; flex-direction: column; gap: 16px; }
.login-form label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--text-muted); }
.login-form label.remember-me-label { flex-direction: row; align-items: center; gap: 8px; font-size: 13px; margin-top: -4px; }
.login-form input {
padding: 11px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 15px;
background: var(--surface); color: var(--text);
}
.login-form input:focus { outline: 2px solid var(--accent); border-color: transparent; }
.password-field-wrap { position: relative; display: flex; }
.password-field-wrap input { width: 100%; padding-inline-end: 40px; }
.password-toggle-btn {
position: absolute; inset-inline-end: 4px; top: 50%; transform: translateY(-50%);
background: none; border: none; cursor: pointer; font-size: 17px; padding: 6px 8px;
color: var(--text-muted); line-height: 1; border-radius: 6px;
}
.password-toggle-btn:hover { color: var(--text); background: var(--primary-light); }
.error-msg { background: var(--danger-soft); color: var(--danger); padding: 10px 12px; border-radius: 8px; font-size: 13px; }
.config-warning { margin-top: 18px; font-size: 12px; color: var(--warning); background: var(--warning-soft); padding: 10px 12px; border-radius: 8px; line-height: 1.6; }
.config-warning code { background: rgba(127,127,127,.15); padding: 1px 5px; border-radius: 4px; }
.radio-row { display: flex; flex-direction: column; gap: 8px; }
.radio-option { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; cursor: pointer; }
.radio-option input { margin-top: 3px; }
.operator-check-result { background: var(--primary-light); padding: 18px 12px; border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--primary); }
.carrier-result-label { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.carrier-result-row { display: flex; align-items: center; gap: 10px; }
.carrier-result-name { font-size: 22px; font-weight: 800; color: var(--text); }
.operator-check-balance-low { color: var(--warning); font-weight: 600; }
.operator-check-history-list { display: flex; flex-direction: column; gap: 6px; max-height: 420px; overflow-y: auto; }
.operator-check-history-empty { color: var(--text-muted); font-size: 13px; margin: 0; }
.operator-check-history-row { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 6px 8px; border-radius: 6px; background: var(--primary-light); flex-wrap: wrap; }
.operator-check-history-row .history-phone { font-weight: 600; }
.operator-check-history-row .history-carrier { color: var(--text-muted); display: inline-flex; align-items: center; gap: 4px; }
.operator-check-history-row .history-time { margin-inline-start: auto; color: var(--text-muted); font-size: 12px; }
.history-on-file { color: var(--text-muted); font-size: 12px; }
.history-row-clickable { cursor: pointer; }
.history-row-clickable:hover { background: var(--primary-light); }
.history-status { font-size: 11px; padding: 2px 8px; border-radius: 999px; font-weight: 600; }
.history-status-ok { background: var(--success-soft); color: var(--success-text); }
.history-status-mismatch { background: var(--warning-soft); color: var(--warning); }
.history-status-error { background: var(--danger-soft); color: var(--danger); }
/* ===== מעטפת אפליקציה: תפריט צד ימני ===== */
.app-shell { min-height: 100vh; display: flex; }
/* סמל הלוגו (בלי הכיתוב, רקע שקוף אמיתי) כרקע ברקע כל המערכת - מאחורי כל
התוכן (z-index שלילי), לא מפריע לקריאות כי הכרטיסים/משטחים (var(--surface))
אטומים ומכסים אותו; נראה בבירור ברווחים בין הכרטיסים ובשוליים */
.app-watermark {
position: fixed; inset: 0; z-index: -1; pointer-events: none;
background-image: url('../assets/logo-watermark.png');
background-repeat: no-repeat; background-position: center 50%; background-size: min(72vw, 620px);
opacity: .3;
}
:root[data-theme="dark"] .app-watermark { opacity: .38; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .app-watermark { opacity: .38; }
}
@media (max-width: 720px) {
.app-watermark { background-size: min(90vw, 380px); background-position: center 42%; }
}
.side-nav {
flex: none; width: 220px; display: flex; flex-direction: column; gap: 4px;
background: var(--sidebar-bg); border-inline-end: 1px solid var(--sidebar-border);
/* ריפוד תחתון + safe-area - יהונתן (2.9.2026): "תוריד קצת למטה את הגדרות המשתמש" -
בלעדיו השורה האחרונה (הגדרות משתמש) יושבת צמוד ממש לקצה התחתון של המגירה בנייד,
כמעט בלי מרווח נשימה (ולעיתים מתחת לפס המחוות של הטלפון). */
padding: 8px 14px calc(8px + env(safe-area-inset-bottom, 0)); position: sticky; top: 0; height: 100vh; height: 100dvh; overflow-y: auto;
/* overflow-x:hidden מפורש - יהונתן (2.9.2026): "תבטל את הגלילה לצדדים בתפריט". בלעדיו,
לפי מפרט ה-CSS, overflow-y:auto לבד (בלי overflow-x מוצהר) גורם ל-overflow-x לחשב
גם הוא ל-auto - וברייל המכווץ (65px) התוכן חורג ב-9px, מספיק כדי להראות סקרולבר
אופקי מיותר. hidden פשוט קוצץ את החריגה הזעירה במקום לגלול אליה. */
overflow-x: hidden;
}
.side-brand {
position: relative;
display: flex; flex-direction: column; align-items: center; gap: 6px;
padding-bottom: 6px; margin-bottom: 0;
border-bottom: 1px solid var(--sidebar-border);
}
.nav-rail-toggle {
position: absolute; left: -12px; top: 50%; transform: translateY(-50%);
width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
background: var(--surface); border: 1px solid var(--sidebar-border); color: var(--sidebar-text-muted);
cursor: pointer; box-shadow: 0 2px 6px var(--shadow-color); padding: 0;
}
.nav-rail-toggle .ic { width: 12px; height: 12px; transition: transform .15s; }
/* לוגו מלא (סמל + שם + סלוגן בתוך התמונה עצמה) */
.brand-logo-wrap {
display: inline-flex; background: #fff; border-radius: 14px; overflow: hidden;
box-shadow: 0 2px 10px var(--shadow-color), 0 0 0 1px var(--sidebar-border);
}
.brand-logo-img { display: block; width: 100%; height: auto; }
.side-brand-logo { width: 84px; }
/* גרסה צמודה למגירת הנייד בלבד - ר' ההערה ב-index.html וב-@media(max-width:720px) למטה */
.side-brand-logo-mobile { display: none; }
.side-nav .app-nav { display: flex; flex-direction: column; gap: 2px; }
.nav-group { display: flex; flex-direction: column; }
.nav-group-head {
display: flex; align-items: center; gap: 6px; width: 100%; padding: 9px 12px 5px;
background: transparent; border: none; color: var(--sidebar-text-muted);
font-size: 11px; font-weight: 800; letter-spacing: .02em; cursor: pointer;
}
.nav-chev { width: 12px; height: 12px; margin-inline-start: auto; transition: transform .15s; flex: none; }
.nav-group.open .nav-chev { transform: rotate(180deg); }
.nav-group-body { display: flex; flex-direction: column; overflow: hidden; max-height: 0; transition: max-height .2s ease; }
.nav-group.open .nav-group-body { max-height: 400px; }
/* ===== עריכת תפריט בגרירה (design-lab-5.html, "סדר אותו בעצמך") ===== */
.nav-edit-toolbar {
display: flex; flex-direction: column; gap: 8px; padding: 10px 14px; margin-bottom: 4px;
background: var(--accent-soft); border-bottom: 1px solid var(--sidebar-border);
}
.nav-edit-hint { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--sidebar-text-muted); line-height: 1.5; }
.nav-edit-actions { display: flex; gap: 6px; }
.nav-edit-actions .btn { flex: 1; justify-content: center; }
.app-nav.editing .nav-group { border: 1px dashed var(--sidebar-border); border-radius: 8px; margin-bottom: 6px; padding-bottom: 4px; }
.app-nav.editing .nav-group-body { max-height: none !important; overflow: visible; }
.app-nav.editing .nav-group-head { cursor: grab; padding-inline-end: 6px; }
.nav-grip { width: 13px; height: 13px; flex: none; opacity: .5; cursor: grab; }
.nav-group-label[contenteditable] {
cursor: text; border-radius: 4px; padding: 1px 4px; outline: none;
}
.nav-group-label[contenteditable]:focus { background: var(--surface); box-shadow: 0 0 0 1px var(--accent); }
.nav-group-del {
display: inline-flex; align-items: center; justify-content: center; margin-inline-start: auto;
width: 20px; height: 20px; border-radius: 50%; border: none; background: transparent; color: var(--sidebar-text-muted); cursor: pointer;
}
.nav-group-del:hover { background: var(--danger-soft); color: var(--danger); }
.app-nav.editing .app-nav a { cursor: grab; }
.app-nav.editing .app-nav a[draggable]:active { opacity: .5; }
.nav-addgroup {
display: flex; align-items: center; justify-content: center; gap: 6px;
border: 1px dashed var(--sidebar-border); border-radius: 8px; padding: 10px;
font-size: 12px; color: var(--sidebar-text-muted); margin-top: 4px; transition: border-color .15s, color .15s, background-color .15s;
}
.nav-addgroup.dragover { border-color: var(--accent); color: var(--accent-text, var(--text)); background: var(--accent-soft); }
.side-nav .app-nav a {
display: flex; align-items: center; gap: 10px;
padding: 5px 12px 5px 15px; border-radius: 999px; color: var(--sidebar-text-muted); font-weight: 700;
font-size: 12.5px; line-height: 1.25; border-inline-start: 3px solid transparent;
transition: background-color .15s, border-color .15s, color .15s;
}
.ic {
fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
width: 16px; height: 16px; flex-shrink: 0; vertical-align: -3px;
}
/* ===== שפת הסמלים: עיגול זהב מוברש (כלים/פעולות), כחול (זהות), מתכת עמומה (לא פעיל) =====
טבעת אור פנימית + מרקם + הבהוב-בריחוף. מכבים את כל התנועה למי שביקש פחות תנועה במערכת. */
.icon-badge {
position: relative; display: grid; place-items: center; border-radius: 50%; flex: none;
overflow: hidden; box-shadow: inset 0 1px 2px rgba(255,255,255,.5), inset 0 0 0 1px rgba(255,255,255,.22), 0 1px 3px rgba(0,0,0,.15);
padding: 0; border: none; font: inherit;
}
.icon-badge .ic { width: 55%; height: 55%; position: relative; z-index: 1; }
.icon-badge::after {
content: ""; position: absolute; inset: -60% -20% auto auto; width: 220%; height: 220%;
background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.55) 50%, transparent 58%);
transform: translateX(-130%); transition: transform .55s ease;
}
.icon-badge:hover::after { transform: translateX(25%); }
.icon-badge-gold { width: 32px; height: 32px; background: linear-gradient(135deg,#f0d9a6 0%,#c9954a 45%,#8f6a2e 100%); color: #fff; }
.icon-badge-metal { width: 24px; height: 24px; background: linear-gradient(135deg,#d8d2c4 0%,#b7ae9a 60%,#948a75 100%); color: #5c5445; }
.icon-badge-blue { width: 32px; height: 32px; background: linear-gradient(135deg,#3f6fd8 0%,#0b3d8f 100%); color: #fff; }
@media (prefers-reduced-motion: reduce) {
.icon-badge::after { transition: none; }
}
/* ===== קו זהב נמתח מתחת לכותרת עמוד, בכל כניסה למסך ===== */
.page-head h2 { position: relative; display: flex; align-items: center; gap: 12px; }
.page-head-icon { width: 34px; height: 34px; flex: none; }
.page-head h2::after {
content: ""; position: absolute; inset-inline-start: 14px; bottom: -6px; height: 2px; width: 64px;
background: linear-gradient(90deg, #f0d9a6 0%, #c9954a 45%, #8f6a2e 100%);
animation: goldStretch .5s .1s ease-out backwards;
}
@keyframes goldStretch { from { width: 0 } to { width: 64px } }
@media (prefers-reduced-motion: reduce) {
.page-head h2::after { animation: none; }
}
/* ===== בועת התפעול הצפה: נשימה איטית תמידית (זהב מוברש בולט יותר עם תנועה), וטבעת קשב חד-פעמית על הודעה חדשה ===== */
@media (prefers-reduced-motion: no-preference) {
.ops-chat-bubble { animation: opsBreathe 3.2s ease-in-out infinite; }
}
@keyframes opsBreathe { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-3px) } }
.ops-chat-bubble.ping::before {
content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--accent);
animation: opsRing 1s ease-out 1 forwards;
}
@keyframes opsRing { from { transform: scale(1); opacity: .8 } to { transform: scale(1.7); opacity: 0 } }
@media (prefers-reduced-motion: reduce) {
.ops-chat-bubble, .ops-chat-bubble.ping::before { animation: none !important; }
}
/* ===== ספריית הנפשות משלימה (מ-design-lab-5.html, "שני הליקויים שדיווחת") - כל אחת
מנפישה רק opacity/transform, תקרה של 12 שורות למניעת עומס, ומכבה עצמה תחת
prefers-reduced-motion. שני האפקטים "רצועת ספקים"/"ברק זכוכית" שהוצגו שם כבאגים
כבר תוקנו בפרודקשן אחרת (js/packagesCatalog.js + package-glass-shift למעלה) -
בכוונה לא הוחזרו לגרסה המוצעת שם, כי הגרסה הנוכחית פתרה גם בעיית FPS אמיתית. ===== */
/* כניסה מדורגת רכה - לשורות רשימה בטעינה ראשונה (לקוחות/קווים/משימות) */
@keyframes list-row-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.stagger-in { animation: list-row-in .35s cubic-bezier(.2,.8,.2,1) backwards; animation-delay: calc(min(var(--i, 0), 12) * 45ms); }
/* כניסה מהצד - לרשימה שמתחלפת אחרי סינון/חיפוש, לא לטעינה ראשונה */
@keyframes list-row-in-side { from { opacity: 0; transform: translateX(var(--slide-from, 14px)); } to { opacity: 1; transform: none; } }
.stagger-in-side { animation: list-row-in-side .3s cubic-bezier(.2,.8,.2,1) backwards; animation-delay: calc(min(var(--i, 0), 12) * 40ms); }
@media (prefers-reduced-motion: reduce) {
.stagger-in, .stagger-in-side { animation: none; }
}
/* ברק על מספר - מעבר זהב חד-פעמי על מספר משמעותי בכניסה למסך (עמלות/הכנסות) */
@keyframes number-shine-sweep { from { background-position: 200% 0; } to { background-position: -20% 0; } }
.number-shine {
background-image: linear-gradient(100deg, currentColor 35%, var(--accent-bright, #e8c27a) 50%, currentColor 65%);
background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
}
@media (prefers-reduced-motion: no-preference) {
.number-shine { animation: number-shine-sweep 1.3s ease-out 1; }
}
/* מספר שמתחדד - לערך שכבר ידוע בטעינה (למשל ספירת קווים פעילים) */
@keyframes number-blur-in { from { opacity: 0; filter: blur(6px); } to { opacity: 1; filter: blur(0); } }
.number-blur-in { animation: number-blur-in .5s ease-out backwards; }
@media (prefers-reduced-motion: reduce) {
.number-shine, .number-blur-in { animation: none; filter: none; }
}
/* כרטיס שנפתח - הגדלה עדינה של 3% ברגע הלחיצה, לפני שנפתח חלון/מעבר */
@keyframes card-pop-once { 0% { transform: scale(1); } 50% { transform: scale(1.03); } 100% { transform: scale(1); } }
.card-pop-once { animation: card-pop-once .22s ease; }
@media (prefers-reduced-motion: reduce) {
.card-pop-once { animation: none; }
}
/* קפיצת מונה - כשמספר בתגית עולה (ר' js/utils.js bumpBadge) */
@keyframes badge-tick { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
.badge-tick { animation: badge-tick .35s cubic-bezier(.3,1.4,.6,1); }
@media (prefers-reduced-motion: reduce) {
.badge-tick { animation: none; }
}
/* קיפול פנימה - לפתיחת קבוצת ניווט בתפריט הצד בלבד (לא לתוכן, אפקט חזק מדי לשימוש תדיר) */
.nav-group-body { transform-origin: top; }
@media (prefers-reduced-motion: no-preference) {
.nav-group.opening .nav-group-body { animation: nav-group-flip .3s ease-out; }
}
@keyframes nav-group-flip { from { transform: rotateX(-90deg); opacity: 0; } to { transform: rotateX(0); opacity: 1; } }
.side-nav .app-nav a:hover {
background: var(--sidebar-hover-bg); color: var(--sidebar-text); border-inline-start-color: var(--accent);
}
/* גוון זהב אחיד (כמו icon-badge-gold) - היה גרדיאנט חום-כהה שונה ("חאקי", יהונתן 2.9.2026),
לא תואם לזהב העשיר שכבר משמש בטאבי הקטגוריה/כרטיס אשראי/badges בכל שאר המערכת. */
.side-nav .app-nav a.active {
background: linear-gradient(135deg, #f0d9a6 0%, #c9954a 45%, #8f6a2e 100%);
color: #fff; border-inline-start-color: var(--accent);
box-shadow: 0 2px 8px rgba(201,149,74,.35);
}
.side-nav .app-nav a.active .icon-badge {
background: rgba(255,255,255,.22); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
}
.side-spacer { flex: 1; min-height: 4px; }
.side-user { display: flex; flex-direction: column; gap: 10px; font-size: 12px; color: var(--sidebar-text-muted); }
.side-user .btn-sm { padding: 5px 9px; font-size: 12px; }
/* ===== כלי מערכת בתחתית התפריט: 3 קבוצות (תצוגה ומכשיר / נתונים / חשבון) במקום
שורה אחת דחוסה של 7 כפתורים בלי היררכיה - כל קבוצה מופרדת בקו דק ===== */
.side-tool-groups { display: flex; flex-direction: column; gap: 8px; }
.side-tool-group {
display: flex; gap: 8px; justify-content: center; align-items: center;
padding-top: 8px; border-top: 1px solid var(--sidebar-border);
}
.side-tool-groups > .side-tool-group:first-child { padding-top: 0; border-top: none; }
.side-tool-btn { flex-shrink: 0; cursor: pointer; border: none; }
.notifications-btn {
position: relative; background: transparent; border: none; color: var(--text);
font-size: 18px; cursor: pointer; padding: 6px;
}
.notifications-btn-side {
display: flex; align-items: center; justify-content: center; gap: 7px;
width: 100%; border: 1px solid var(--sidebar-border); border-radius: 999px;
padding: 3px 14px; font-size: 12.5px; font-weight: 700; color: var(--sidebar-text);
background: transparent; transition: border-color .15s, background-color .15s;
}
.notifications-btn-side:hover { border-color: var(--accent); background: var(--sidebar-hover-bg); }
/* ===== קיפול תפריט לרייל אייקונים - דסקטופ בלבד, לא נוגע בהתנהגות הנייד ===== */
@media (min-width: 769px) {
.side-nav.rail { width: 76px; padding-inline: 10px; }
.side-nav.rail .nav-rail-toggle .ic { transform: rotate(180deg); }
.side-nav.rail .nav-group-head { display: none; }
.side-nav.rail .nav-group-body { max-height: none; overflow: visible; display: flex; flex-direction: column; gap: 6px; }
.side-nav.rail .nav-label, .side-nav.rail .user-email, .side-nav.rail #device-activator-btn, .side-nav.rail .user-menu-caption { display: none; }
.side-nav.rail .app-nav a { justify-content: center; padding-inline: 0; padding-block: 4px; }
.side-nav.rail .icon-badge { width: 32px !important; height: 32px !important; margin: 0 auto; }
.side-nav.rail .side-tool-group { flex-wrap: wrap; justify-content: center; }
.side-nav.rail #logout-btn { width: auto; padding: 6px 8px; }
/* בלי כותרת קבוצה: כל קבוצה מקבלת "כרטיס" משלה עם רקע עדין, כדי שהעין תבחין בין הקבוצות
בלי צורך בטקסט - והקבוצה עם המסך הפעיל מודגשת, כך שרואים מיד "איפה אני" גם מכווץ. */
/* var(--sidebar-hover-bg) הוא tint שקוף ב-8% בלבד - נועד להבליט עדינות בהובר על שורה
בודדת, אבל כרקע-קבוע לקבוצה שלמה הוא כמעט בלתי-נראה על גבי sidebar-bg הבהיר. התוצאה:
רק הקבוצה הפעילה (עם ה-accent-soft הבולט) נראית כמו "כרטיס" אמיתי, וכל שאר הקבוצות
נראות כמו עיגולים חופשיים בלי מסגרת - לא סימטרי (יהונתן, 1.9.2026: "מקופל זה לא
סימטרי ולא מסודר"). מסגרת קבועה במקום רקע-כמעט-שקוף נותנת לכל קבוצה את אותה "כרטיס"
ברור, בלי קשר אם היא פעילה.
*/
.side-nav.rail .nav-group {
padding: 8px 4px; margin-bottom: 6px; border-radius: var(--radius);
border: 1px solid var(--sidebar-border);
}
.side-nav.rail .nav-group:last-child { margin-bottom: 0; }
.side-nav.rail .nav-group:has(.active) { background: var(--accent-soft); border-color: transparent; }
.side-nav.rail .app-nav a { position: relative; }
.side-nav.rail .app-nav a .notifications-badge {
position: absolute; top: 0; inset-inline-end: 18px; margin: 0; z-index: 1;
}
}
/* ===== שורה עליונה: חיפוש, כלי בדיקה מהירים, התראות - הועברו מתחתית התפריט ===== */
.main-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
display: flex; align-items: center; gap: 8px; padding: 10px 24px;
background: var(--surface); border-bottom: 1px solid var(--border);
position: sticky; top: 0; z-index: 20;
}
/* היה עם logo-new.png (הבאנר הרחב, 1448x1086) דחוס ל-34px - כמעט בלתי נראה (יהונתן,
1.9.2026). הוחלף ל-logo-icon.png (הריבוע הצמוד שכבר משמש כ-favicon) וגדל מעט. */
.topbar-brand { width: 42px; height: 42px; padding: 3px; border-radius: 10px; flex: none; }
.topbar-btn {
display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px;
border: 1px solid var(--border); background: transparent; color: var(--text-muted);
font-size: 13px; font-weight: 700; cursor: pointer; transition: background-color .15s, color .15s, border-color .15s;
}
.topbar-btn:hover { background: var(--primary-light); color: var(--text); border-color: var(--primary); }
.topbar-icon-btn { position: relative; padding: 8px; }
.topbar-icon-btn .notifications-badge { position: absolute; top: 2px; left: 2px; }
.topbar-connector-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.side-user-actions .btn-ghost {
background: transparent; color: var(--sidebar-text-muted); border-color: var(--sidebar-border);
}
.side-user-actions .btn-ghost:hover { background: var(--sidebar-hover-bg); color: var(--sidebar-text); border-color: var(--accent); }
#device-activator-btn {
background: transparent; color: var(--sidebar-text-muted); border-color: var(--sidebar-border); font-size: 11.5px;
}
#device-activator-btn:hover { background: var(--sidebar-hover-bg); color: var(--sidebar-text); border-color: var(--accent); }
.notifications-badge {
position: absolute; top: -4px; left: -4px; min-width: 17px; height: 17px; padding: 0 4px;
/* צבע קבוע, לא var(--danger) - זה הופך לגוון בהיר במצב כהה ומקשה על קריאת המספר הלבן */
border-radius: 999px; background: #c14a3a; color: #fff; font-size: 10.5px; font-weight: 800;
/* inline-flex ולא flex - במקומות שדורסים position ל-static (למשל בתוך קישור ניווט),
flex רגיל הוא block-level ומותח את התג לכל רוחב ההורה במקום להישאר עיגול קטן וצמוד */
display: inline-flex; align-items: center; justify-content: center; line-height: 1;
}
.notifications-btn-side .notifications-badge { position: static; margin-inline-start: 2px; }
.app-nav a .notifications-badge { position: static; margin-inline-start: 6px; }
/* כפתור-סמל קומפקטי בראש עמוד (למשל בקשות הנחה/הזמנות ספקים ב"חנות וניהול מלאי") -
ריבועי יותר מכפתור טקסט רגיל, כדי שאייקון בודד לא ישב בתוך גלולה רחבה ומיותרת */
.icon-badge-btn { padding: 8px 14px; font-size: 17px; line-height: 1; }
/* "משימות לטיפול" הוא ספירת פריטים לטיפול, לא באמת "שגיאה/סכנה" - נחושת עדיפה על אדום חד */
#tasks-badge { background: #c97a3e; }
.notification-row { display: flex; flex-direction: column; gap: 2px; padding: 10px 4px; border-bottom: 1px solid var(--border); cursor: pointer; }
.notification-row:last-child { border-bottom: none; }
.notification-row:hover { background: var(--bg); }
.notification-row .msg { font-size: 13.5px; color: var(--text-muted); }
.notification-row .time { font-size: 11.5px; color: var(--text-muted); }
.notification-row.unread .msg { color: var(--text); font-weight: 700; }
.notification-row.unread .msg::before {
content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
background: var(--danger); margin-inline-end: 7px; vertical-align: middle;
}
.view-root { flex: 1; min-width: 0; padding: 26px 28px; max-width: 1100px; width: 100%; }
.view-root.wide { max-width: 1600px; }
/* ===== כרטיסים / פריסה כללית ===== */
.page-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; gap: 12px; flex-wrap: wrap; }
.page-head h2 {
margin: 0; font-size: 28px; font-weight: 800; letter-spacing: -.01em;
padding-inline-start: 14px;
border-inline-start: 4px solid var(--accent);
}
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; }
/* ===== טבלה אחידה: פסים מתחלפים, כותרת דביקה, הדגשה בריחוף - ר' reportTableHtml ב-utils.js ===== */
.data-table { border-collapse: separate; border-spacing: 0; }
.data-table th, .data-table td {
padding: 8px 12px; text-align: start; border-bottom: 1px solid var(--border); white-space: nowrap;
}
.data-table thead th {
position: sticky; top: 0; z-index: 1; background: var(--bg-2); color: var(--text-muted);
font-size: 12px; font-weight: 700;
}
.data-table tbody tr:nth-child(even) { background: var(--bg-2); }
.data-table tbody tr:hover { background: var(--primary-light); }
.section-title { font-size: 15px; font-weight: 700; margin: 0 0 12px; color: var(--text); }
/* עטיפה לטבלאות רחבות (מחירון/עמלות/דוחות וכו') - גלילה אופקית + רמז חזותי
(צל עדין בקצה, בצבע --border כדי שיעבוד נכון גם בהיר וגם כהה) שיש עוד תוכן
מוסתר - כדי שלא ייראה שעמודה (כמו "מחיר") נעלמה סתם במסך צר. טכניקת CSS
טהורה (בלי JS): שני gradient של "מסכה" בצבע הרקע שנעים עם הגלילה עצמה
(background-attachment: local) מבטלים את הצל בקצה שבו באמת אין עוד לגלול,
ושני gradient של "צל" קבועים ביחס לקופסה (attachment: scroll) שנשארים
גלויים כל עוד יש תוכן מוסתר באותו צד. */
.table-scroll {
overflow-x: auto;
background:
linear-gradient(to right, var(--surface) 30%, transparent),
linear-gradient(to left, var(--surface) 30%, transparent) 100% 0,
linear-gradient(to right, var(--border), transparent),
linear-gradient(to left, var(--border), transparent) 100% 0;
background-repeat: no-repeat;
background-size: 24px 100%, 24px 100%, 10px 100%, 10px 100%;
background-attachment: local, local, scroll, scroll;
}
/* טבלאות מחירון/עמלות (js/pricelist.js) + טבלאות דוחות משותפות (reportTableHtml ב-
js/utils.js, המשמשת גם את js/reports.js וגם את לשונית "מחירון מוצרים" ב-pricelist.js
שלא בנתה טבלה משלה) - קריאות בנייד בלי גלילה אופקית: מתחת ל-720px כל שורה הופכת
לכרטיס אנכי עם תווית לכל שדה, במקום טבלה רחבה שדורשת גלילה אופקית. */
@media (max-width: 720px) {
.pricelist-table, .report-table-responsive { width: 100% !important; min-width: 0 !important; }
.pricelist-table thead, .report-table-responsive thead { display: none; }
.pricelist-table, .pricelist-table tbody, .pricelist-table tr, .pricelist-table td,
.report-table-responsive, .report-table-responsive tbody, .report-table-responsive tr, .report-table-responsive td {
display: block; width: 100%;
}
.pricelist-table tr, .report-table-responsive tr {
margin-bottom: 10px; border: 1px solid var(--border); border-radius: 12px; padding: 4px 10px;
background: var(--surface);
}
.pricelist-table tbody tr:nth-child(even), .report-table-responsive tbody tr:nth-child(even) { background: var(--surface); } /* מבטל את הפסים הכהים-בהירים המתחלפים של .data-table - לא נחוץ בפריסת כרטיסים */
.pricelist-table td, .report-table-responsive td {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 7px 2px; border-bottom: 1px dotted var(--border); white-space: normal !important;
text-align: left;
}
.pricelist-table td:last-child, .report-table-responsive td:last-child { border-bottom: none; }
.pricelist-table td[data-label]::before, .report-table-responsive td[data-label]::before {
content: attr(data-label); font-weight: 700; color: var(--text-muted); font-size: 12px;
flex-shrink: 0; text-align: right;
}
.pricelist-table td:not([data-label]), .pricelist-table td[data-label=""],
.report-table-responsive td:not([data-label]), .report-table-responsive td[data-label=""] { justify-content: flex-end; }
}
.stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 14px; margin-bottom: 24px; }
.report-group-title {
font-size: 12px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em;
margin: 28px 0 12px; padding-top: 18px; border-top: 1px solid var(--border);
}
.report-group-title:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.reports-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px,1fr)); gap: 16px; align-items: start; }
.stat-card {
position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius); padding: 16px 18px;
}
.stat-card::after {
content: ""; position: absolute; inset-inline-start: 0; top: 0; height: 3px; width: 100%;
/* גוון זהב אחיד בלבד - ר' ההערה המקבילה ב-.login-card::before */
background: linear-gradient(90deg, #f0d9a6 0%, #c9954a 45%, #8f6a2e 100%); z-index: 1;
}
.stat-card .num { position: relative; z-index: 1; font-size: 26px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.stat-card .label { position: relative; z-index: 1; font-size: 13px; color: var(--text-muted); margin-top: 4px; }
.stat-card .scope {
position: relative; z-index: 1; display: inline-block; font-size: 10.5px; font-weight: 700;
color: var(--accent-text); background: var(--accent-soft); border-radius: 20px; padding: 2px 8px; margin-top: 8px;
}
.stat-card-clickable { cursor: pointer; transition: box-shadow .15s, border-color .15s; }
.stat-card-clickable:hover { border-color: var(--primary); box-shadow: 0 2px 10px rgba(0,0,0,.08); }
.stat-card-clickable.stat-card-active { border-color: var(--primary); background: var(--primary-light); }
/* ===== התראות ===== */
.alerts-list { display: flex; flex-direction: column; gap: 10px; }
.alert-card {
display: flex; align-items: center; gap: 14px;
background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px;
}
.alert-severity { width: 8px; align-self: stretch; border-radius: 4px; background: var(--border); }
.alert-severity.warning { background: var(--warning); }
.alert-severity.danger { background: var(--danger); }
.alert-card.unread { background: var(--primary-light); border-color: var(--primary); }
.alert-card.unread .alert-severity { background: var(--primary); }
.alert-body { flex: 1; display: flex; align-items: center; gap: 8px; }
.alert-title { font-weight: 600; font-size: 14px; color: var(--text-muted); }
.alert-card.unread .alert-title { font-weight: 700; color: var(--text); }
.alert-unread-badge {
flex-shrink: 0; font-size: 11px; font-weight: 700; color: #fff; background: #0b3d8f;
padding: 2px 8px; border-radius: 999px;
}
.alert-sub { font-size: 13px; color: var(--text-muted); margin-top: 2px; }
.alert-date { font-size: 13px; font-weight: 700; white-space: nowrap; }
.empty-state { text-align: center; padding: 40px 20px; color: var(--text-muted); }
#activity-list { max-height: 380px; overflow-y: auto; }
.progress-show-more { text-align: center; margin-top: 12px; }
.pagination-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px; margin-top: 16px; }
.pagination-bar .page-indicator { font-size: 13px; color: var(--text-muted); white-space: nowrap; }
/* ===== שלד טעינה (skeleton) - במקום טקסט "טוען..." ===== */
@keyframes skeleton-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
.skeleton { background: var(--border); border-radius: 6px; animation: skeleton-pulse 1.3s ease-in-out infinite; }
.skeleton-row {
display: flex; align-items: center; gap: 14px; padding: 14px 16px;
border: 1px solid var(--border); border-radius: 14px; margin-bottom: 10px;
}
.skeleton-avatar { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; }
.skeleton-lines { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.skeleton-line { height: 12px; }
.skeleton-stat { padding: 16px; }
/* ===== טבלת/רשימת לקוחות ===== */
.search-bar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.search-bar input { flex: 1; min-width: 200px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; background: var(--surface); color: var(--text); }
.search-bar select { padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; background: var(--surface); color: var(--text); }
.customer-list { display: flex; flex-direction: column; gap: 10px; }
.customer-row {
display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; background: var(--surface);
border: 1px solid var(--border); border-inline-start: 3px solid var(--accent); border-radius: 14px; padding: 14px 16px;
transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.customer-row:hover { border-color: var(--primary); border-inline-start-color: var(--accent); cursor: pointer; transform: translateY(-2px); box-shadow: 0 8px 20px var(--shadow-color); }
@media (prefers-reduced-motion: reduce) { .customer-row { transition: none; } .customer-row:hover { transform: none; } }
.customer-list.grid-view {
display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px;
}
.customer-list.grid-view .customer-row {
flex-direction: column; align-items: flex-start; text-align: start; gap: 8px;
}
.customer-list.grid-view .avatar { width: 48px; height: 48px; font-size: 17px; }
.customer-list.grid-view .customer-info { width: 100%; }
.customer-list.grid-view .pagination-bar { grid-column: 1 / -1; }
.product-thumb { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.customer-list.grid-view .product-thumb { width: 100%; height: 140px; border-radius: 10px; }
@media (max-width: 720px) {
.customer-list.grid-view { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}
.avatar {
width: 40px; height: 40px; border-radius: 50%;
background: linear-gradient(135deg,#f0d9a6 0%,#c9954a 45%,#8f6a2e 100%); color: #fff;
box-shadow: inset 0 1px 2px rgba(255,255,255,.5), inset 0 0 0 1px rgba(255,255,255,.22);
display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0;
}
.avatar .ic { width: 20px; height: 20px; }
.customer-info { flex: 1 1 140px; min-width: 140px; }
.customer-name { font-weight: 700; font-size: 15px; }
.customer-meta { font-size: 13px; color: var(--text-muted); margin-top: 2px; }
.badge {
display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; padding: 3px 10px; border-radius: 999px;
font-size: 12px; font-weight: 700; background: var(--primary-light); color: var(--primary-dark);
white-space: nowrap;
}
.badge .ic { width: 12px; height: 12px; }
.badge.warning { background: var(--warning-soft); color: var(--warning-text); }
.badge.danger { background: var(--danger-soft); color: var(--danger-text); }
.badge.muted { background: var(--border); color: var(--text-muted); }
.badge.success { background: var(--success-soft); color: var(--success-text); }
.badge.accent { background: var(--accent-soft); color: var(--accent-text); }
/* ===== טפסים ===== */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
/* כשאחרי הגריד יש שורת form-actions-sticky (יהונתן, 20.8.2026, ר' בדיקה עם Playwright) -
ה-sticky צמוד ל-bottom:0 של .modal-content לאורך כל טווח הגלילה, לא רק בסופה, ויש לו
background אטום - כלומר בכל נקודת גלילה הוא מכסה פיזית כל שדה שנמצא כרגע ב-~80px
התחתונים של האזור הנראה. בלי padding-bottom שמור מראש בגריד, השדה שקורה להיות שם
(למשל "עיר"/"אימייל" בגלילה 0, "הערות" בסוף) נחתך חלקית מתחת לכפתורים. 120px גדול
מגובה הפוטר גם כשהוא נשבר לשתי שורות (מיזוג עם לקוח כפול וכו') - המרווח הנוסף בתחתית
נראה רק בטפסים שבכלל גוללים, לא משפיע על טפסים קצרים בלי form-actions-sticky בעקבותיהם. */
.form-grid:has(+ .form-actions-sticky) { padding-bottom: 120px; }
.form-grid.full, .form-field.full { grid-column: 1 / -1; }
.tier-row-grid { grid-template-columns: 1fr 1fr auto; }
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field label { font-size: 13px; color: var(--text-muted); font-weight: 600; }
.form-field input, .form-field select, .form-field textarea {
padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; width: 100%;
background: var(--surface); color: var(--text);
}
.form-field textarea { resize: vertical; min-height: 60px; }
.form-field textarea.readonly-textarea { background: var(--bg-2); color: var(--text-muted); cursor: default; }
.form-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.autocomplete-wrap { position: relative; }
.autocomplete-menu {
position: absolute; top: calc(100% + 4px); right: 0; left: 0; z-index: 20;
background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
box-shadow: 0 12px 28px var(--shadow-color); max-height: 260px; overflow-y: auto;
}
.autocomplete-item {
padding: 10px 12px; font-size: 13.5px; line-height: 1.5; white-space: normal;
cursor: pointer; border-bottom: 1px solid var(--border);
}
.autocomplete-item:last-child { border-bottom: none; }
.autocomplete-item:hover, .autocomplete-item.active { background: var(--bg); }
.signature-canvas {
width: 100%; height: 180px; border: 2px dashed var(--border); border-radius: 10px;
background: #fff; cursor: crosshair; touch-action: none; display: block;
}
/* ===== מודאל ===== */
.modal-backdrop {
position: fixed; inset: 0; background: rgba(15,20,35,.5); display: flex;
align-items: flex-start; justify-content: center; padding: 40px 16px; overflow-y: auto; z-index: 100;
animation: modalFadeIn .15s ease;
/* בלי זה, גלילה בתוך המודל שמגיעה לקצה (למעלה/למטה) "משרשרת" (scroll chaining) החוצה
לעמוד הרשימה מתחת ל-backdrop, וגורמת לו לגלול יחד עם המודל - התנהגות ברירת מחדל
מוזרה של הדפדפן שקיימת בכל שני אלמנטים עם overflow:auto מקוננים זה בזה. */
overscroll-behavior: contain;
}
.modal-content {
background: var(--surface); border-radius: 20px; padding: 0; width: 100%; max-width: 720px;
/* פס אקסנט בצד - אותה מוסכמה עיצובית שיש לכפתורים/כרטיסים בכל המערכת (ר' .btn,
.card-accent וכו') */
border-inline-start: 3px solid var(--accent);
box-shadow: 0 20px 60px var(--shadow-color);
animation: modalFadeIn .18s ease;
/* .modal-content עצמו כבר לא גולל - זו רק המעטפת המעוצבת (רדיוס/צל/רקע) שמחזיקה
כותרת קבועה + .modal-scroll-body גולל + פוטר קבוע כשלושה flex items אמיתיים
(ר' restructureModalContent ב-app.js openModal, שמפרק כל HTML של מודל למבנה הזה
אוטומטית). לפני זה .modal-content היה גם המעטפת המעוגלת וגם אלמנט הגלילה בו-זמנית,
וזה בדיוק מה שיצר את שתי התקלות שהמבנה הזה פותר: (1) title-row/form-actions-sticky
ניסו "להידבק" לקצה עם position:sticky+מרג'ין שלילי, אבל בפועל נשאר פס padding גולל
דרכו - "רווח" שרואים בו תוכן שכבר אמור להיות מוסתר מאחורי הפס הדביק. (2) פס גלילה
טבעי הוא ריבועי ולא יכול לכבד border-radius, אז הפינה בצד הגלילה יצאה מרובעת. עכשיו
כש-.modal-content לא גולל, overflow:hidden עליו בטוח (שום דבר לא נחתך בטעות) וחותך
את פס הגלילה של modal-scroll-body לצורת הפינות המעוגלות משני הצדדים באופן אחיד. */
display: flex; flex-direction: column;
max-height: calc(100vh - 80px); max-height: calc(100dvh - 80px);
overflow: hidden;
}
/* מודלים עם טבלת נתונים רחבה (כמו ייבוא מאקסל) - מנצלים את רוב רוחב המסך במקום
שהטבלה תיחתך/תגלול אופקית בתוך מודל צר */
.modal-content.wide { max-width: min(1400px, calc(100vw - 32px)); }
/* חצי גלילה אופקית לטבלה רחבה בתוך מודל (ר' excel-import-table-scroll) - קבועים
במיקום אנכי אחד (אמצע הגובה של תיבת הטבלה) ולא זזים עם הגלילה האנכית, כך שנגישים
מיד בלי לגלול קודם למטה כדי להגיע לפס הגלילה האופקי הרגיל. */
.excel-import-scroll-arrow {
z-index: 2; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--border);
background: var(--surface); color: var(--text); font-size: 16px; line-height: 1; cursor: pointer;
display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 4px var(--shadow-color);
opacity: .85;
}
.excel-import-scroll-arrow:hover { opacity: 1; background: var(--bg); }
.modal-scroll-body {
flex: 1; min-height: 0; overflow: auto; padding: 26px;
overscroll-behavior: contain;
}
/* track אטום (לא שקוף כמו ברירת המחדל הגלובלית) - במודל יש פינות מעוגלות (border-radius
על .modal-content, שחותך את הגלילה של האלמנט הזה) ופוטר "דביק" (ר' has-inline-sticky-footer
למטה). עם track שקוף, "תפר" רינדור עדין בפינה המעוגלת חושף את מה שמתחת למודל (הרקע
הכהה + הרשימה) - עם המראה הישן (עבה ואטום) של הדפדפן זה תמיד היה מוסתר. track באותו
צבע רקע סוגר את הפינה. */
.modal-scroll-body { scrollbar-color: var(--border) var(--surface); }
.modal-scroll-body::-webkit-scrollbar-track { background: var(--surface); }
/* מודל עם form-actions-sticky שנשאר בתוך