@import url('/fa/css/all.min.css'); /* Font Awesome 6 (self-hosted) — אייקונים אחידים בכל הדפים */ /* ===== BTU — מערכת עיצוב (בסיס יסוד, זהות V4 Lux) ===== */ * { box-sizing: border-box; } /* הצהרת display של המחבר גוברת על [hidden]{display:none} של הדפדפן, וכל אלמנט שיש לו גם hidden וגם display מפורש נשאר גלוי. נכווינו מזה כבר פעמיים (פאנל "פרטים" בלידים, שורת פעולות של תור החשבוניות) — לכן כלל גורף אחד. */ [hidden] { display: none !important; } :root { --blue: #071a2a; --blue-dark: #020b12; /* משטחי הכרום הכהים (סרגל עליון, תפריט צד, כותרות מסמך). נפרד מ---blue בכוונה: --blue משמש גם כצבע טקסט, והחלפתו הייתה משנה גם כיתובים. */ --navy: #0F2A4A; --navy-dark: #0A1F38; --orange: #f28b35; --orange-dark: #d9731f; --bg: #F7F7F5; --card: #FFFFFF; --ink: #071a2a; --muted: #52677D; --line: #D8E0E8; --success: #13b8b0; --warning: #f28b35; --danger: #ff685f; /* BTU: טורקיז חכם — מצבים פעילים, טאבים וסטטוסים. נחושת (--orange) נשמרת לפעולה ראשית (CTA) בלבד, לפי ספר המותג. --teal-soft: גוון בהיר לקישורים על נייבי. */ --teal: #13b8b0; --teal-dark: #0fa39c; --teal-soft: #8fe5e0; /* כינויים קצרים. היו בשימוש בעשרות מקומות בקוד בלי שהוגדרו אי-פעם, ולכן כל סימוני ה-"✓" הירוקים והאזהרות האדומות נצבעו בכחול הרגיל של הטקסט. */ --green: #13b8b0; --red: #ff685f; --radius: 12px; --shadow: 0 8px 24px rgba(7, 26, 42, 0.10); /* ===== כינויי BTU (אפיון רענון UI, שלב 1א) ===== * שכבת שמות בלבד מעל טוקני היסוד. הערכים לא משתנים — ולכן html.ys-dark * ו-@media print שבהמשך הקובץ ממשיכים לעבוד בלי שורת קוד נוספת, * ו-28 בוררי [style*=] של הצלת המצב הכהה נשארים על עוגניהם. * --btu-line ולא --btu-border: השם --btu-border כבר תפוס וחי ב- * public/css/btu-site.css עם תפקיד הפוך (#315567 על רקע כהה). */ --btu-navy: var(--navy); --btu-teal: var(--teal); --btu-orange: var(--orange); --btu-bg: var(--bg); --btu-surface: var(--card); --btu-text: var(--ink); --btu-muted: var(--muted); --btu-line: var(--line); --btu-danger: var(--danger); --space-unit: 8px; --touch-target: 44px; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); font-family: "Rubik", Arial, sans-serif; font-size: 15.5px; } a { color: var(--blue); } :focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; border-radius: 4px; } .skip-link { position: absolute; right: -9999px; top: 0; background: var(--navy); color: #fff; padding: 10px 18px; z-index: 999; } .skip-link:focus { right: 0; } /* ----- סרגל עליון ----- */ .topbar { background: var(--navy); color: #fff; padding: 10px 20px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; position: sticky; top: 0; z-index: 50; box-shadow: 0 2px 10px rgba(0,0,0,.22); } .brand-lockup { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 20px; color: #fff; text-decoration: none; } .brand-lockup img { display: block; } .brand-lockup .dot { color: var(--orange); } .tabs { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; } .tab { background: rgba(255,255,255,.10); color: #fff; border: none; padding: 8px 15px; border-radius: 9px; cursor: pointer; font-size: 14px; font-family: inherit; font-weight: 500; } .tab:hover { background: rgba(255,255,255,.22); } .tab.active { background: #fff; color: var(--blue); font-weight: 700; } .user-box { display: flex; align-items: center; gap: 10px; font-size: 13.5px; } .user-box img { width: 30px; height: 30px; border-radius: 50%; background: #fff; } .linkbtn { background: none; border: none; color: #cdd9ea; cursor: pointer; font-family: inherit; font-size: 13px; text-decoration: underline; } .linkbtn:hover { color: #fff; } /* פס ניסיון / נעילה */ .trial-chip { background: var(--orange); color: #fff; font-weight: 700; font-size: 12.5px; border-radius: 20px; padding: 4px 13px; white-space: nowrap; } .lock-banner { background: #FDEBEB; color: var(--danger); border-bottom: 1px solid #f3b8b8; padding: 10px 20px; text-align: center; font-weight: 600; font-size: 14.5px; } /* ----- מבנה ----- */ .tab-panel { max-width: 1280px; margin: 18px auto; padding: 0 16px; } .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 16px; box-shadow: var(--shadow); } h2 { margin: 0 0 10px; font-size: 18px; font-weight: 700; } h3 { margin: 18px 0 8px; font-size: 16px; color: var(--blue); } .hint { color: var(--muted); font-size: 12.5px; } .row-between { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } @media (max-width: 900px) { .grid-4 { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .grid-4, .grid-2 { grid-template-columns: 1fr; } } label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); min-width: 0; } /* שדות וכרטיסים לא גולשים מחוץ לאזור שלהם */ input, select, textarea { max-width: 100%; } .card { min-width: 0; } .grid-2 label input, .grid-2 label select, .grid-4 label input, .grid-4 label select { width: 100%; min-width: 0; } /* ----- ניווט ראשי מקובץ + תת-טאבים ----- */ .gtab { background: rgba(255,255,255,.10); color: #fff; border: none; padding: 8px 14px; border-radius: 9px; cursor: pointer; font-size: 14px; font-family: inherit; font-weight: 500; white-space: nowrap; } .gtab:hover { background: rgba(255,255,255,.22); } .gtab.active { background: #fff; color: var(--blue); font-weight: 700; } .subnav { background: #fff; border-bottom: 1px solid var(--line); padding: 7px 20px; display: flex; gap: 6px; flex-wrap: wrap; position: sticky; top: 54px; z-index: 45; } .subnav .tab { background: #EEF2F7; color: var(--muted); font-weight: 600; padding: 6px 14px; } .subnav .tab:hover { background: #E0E7F0; color: var(--ink); } .subnav .tab.active { background: var(--teal); color: var(--blue); } .subnav[data-single="1"] { display: none; } /* ניווט ראשי/משני בשורה אחת שנגללת אופקית — מונע כותרת עליונה (sticky) שמתפרסת ל-3-4 שורות בחלון צר (חצי מסך), שאכלה את כל הגובה וגרמה לתחושה שהתוכן "לא נגלל". */ #groupNav, .subnav { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; min-width: 0; scrollbar-width: none; -ms-overflow-style: none; } #groupNav::-webkit-scrollbar, .subnav::-webkit-scrollbar { height: 0; width: 0; } .block-label { margin: 12px 0; } input, select, textarea { font-family: inherit; font-size: 16px; color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; background: #fbfcfe; min-height: 22px; } /* 16px מונע זום אוטומטי של iOS Safari בעת מיקוד בשדה */ input:focus, select:focus, textarea:focus { outline: 3px solid #f9c9a2; border-color: var(--orange); } .mini-input { width: 64px; padding: 5px 6px; text-align: center; } .search-box { min-width: 240px; } /* ----- כפתורים ----- */ .btn { border: none; border-radius: 10px; padding: 11px 20px; min-height: 44px; font-size: 15px; font-weight: 600; cursor: pointer; font-family: inherit; } .btn.primary { background: var(--orange); color: #fff; } .btn.primary:hover { background: var(--orange-dark); } /* ---------- חשבון נעול (תום ניסיון): מטשטשים מידע ששווה כסף, לא מסתירים ---------- */ /* טאבים ששווים כסף/תשובות — נראים אך המידע מטושטש: מחירון, הצעה, מדריך רווח, בנק, כלים, דוחות */ body.is-locked #tab-quote, body.is-locked #tab-pricelist, body.is-locked #tab-guide, body.is-locked #tab-bank, body.is-locked #tab-tools, body.is-locked #tab-reports { filter: blur(6px); user-select: none; } /* טשטוש נקודתי (למשל תיאור ליקוי ותמונה שהלקוח העלה) */ body.is-locked .lock-blur { filter: blur(6px); user-select: none; } /* כל כפתור פעולה כתום מעומעם ומוביל לתשלום (חוץ מכפתורי המנוי/קופון/תשלום) */ body.is-locked .btn.primary:not(.lock-allow) { opacity: .5; filter: grayscale(.35); box-shadow: none; } body.is-locked .btn.primary:not(.lock-allow)::after { content: '🔒'; font-size: .85em; margin-inline-start: 5px; } .btn.blue { background: var(--navy); color: #fff; } .btn.blue:hover { background: var(--navy-dark); } .btn.secondary { background: #E5EBF3; color: var(--blue); } .btn.secondary:hover { background: #d5deeb; } .btn.danger-outline { background: #fff; color: var(--danger); border: 1px solid #f3b8b8; } .btn.danger-outline:hover { background: #fef2f2; } .btn.tiny { padding: 4px 10px; font-size: 12.5px; min-height: 30px; } .btn:disabled { opacity: .5; cursor: not-allowed; } .btn-stack { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; } /* ----- פריסת הצעה ----- */ /* minmax(0,…) הכרחי: ל-1fr יש רצפת min-content, וטבלת הפריטים (8 עמודות) מנפחת את העמודה מעבר לרוחב המסך וגורמת לגלילה אופקית של כל הדף. minmax(0,…) מאפשר לעמודה להתכווץ, והטבלה נגללת בתוך .chapter-body שכבר מוגדר overflow-x:auto. */ .quote-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 16px; align-items: start; } .quote-layout > * { min-width: 0; } @media (max-width: 1000px) { .quote-layout { grid-template-columns: minmax(0, 1fr); } } .sticky { position: sticky; top: 70px; } /* עמודת הסיכום נמתחת לגובה כל השורה. בלי זה align-items:start מקציב לה בדיוק את גובה הכרטיס, ול-position:sticky אין לאן לזוז — הסיכום נגלל ונעלם אחרי ~16px במקום להישאר על המסך. */ .quote-side { align-self: stretch; } /* סיכום גבוה ממסך נמוך — נשאר דביק, והתוכן שבתוכו נגלל בעצמו. רק בפריסת שתי העמודות: בעמודה אחת הכרטיס יושב בזרימת העמוד ואין סיבה להגביל את גובהו או להפוך אותו לאזור גלילה נפרד. */ @media (min-width: 1001px) { .quote-side .sticky { max-height: calc(100vh - 84px); overflow-y: auto; } } /* בר סיכום למסך צר. בעמודה אחת הסיכום יורד מתחת לכל הסעיפים, ודביקוּת לא עוזרת שם — לכן המספרים הקריטיים מוצמדים לתחתית המסך. מוצג רק בטאב ההצעה, כי הוא חי בתוכו ונעלם איתו. */ .quote-mini { display: none; } @media (max-width: 1000px) { .quote-mini { display: flex; align-items: center; gap: 14px; position: fixed; inset-inline: 0; bottom: 0; z-index: 90; background: #071a2a; color: #fff; padding: 8px 14px; box-shadow: 0 -4px 18px rgba(0,0,0,.28); font-family: inherit; } .quote-mini .qm-cell { display: flex; flex-direction: column; line-height: 1.2; } .quote-mini .qm-lbl { font-size: 10.5px; opacity: .75; } .quote-mini .qm-cell b { font-size: 16px; font-weight: 800; direction: ltr; } /* font קיצור מאפס גם line-height ו-font-family — לכן מפורק לרכיבים, אחרת inherit * מחזיר את המשפחה אבל הגובה נשאר קטן והכפתור נופל מתחת ל-40px ליעד מגע. */ .quote-mini .qm-jump { margin-inline-start: auto; background: rgba(255,255,255,.14); color: #fff; border: none; border-radius: 9px; padding: 8px 12px; cursor: pointer; font-family: inherit; font-weight: 600; font-size: 12.5px; min-height: 44px; display: inline-flex; align-items: center; gap: 6px; } .quote-mini .qm-jump:active { background: rgba(255,255,255,.28); } /* מרווח בתחתית כדי שהבר לא יכסה את הכפתור האחרון בטופס */ #tab-quote { padding-bottom: 62px; } } /* ----- פרקים וטבלאות (מודול הצעות) ----- */ .chapter { border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 10px; overflow: hidden; } .chapter-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: #EEF2F7; padding: 10px 14px; cursor: pointer; user-select: none; } .chapter-head:hover { background: #E4EAF2; } .chapter-title { font-weight: 700; font-size: 15px; flex: 1; } .chapter-profit { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); } .chapter-sum { font-size: 13px; font-weight: 700; color: var(--success); min-width: 90px; text-align: left; } .chapter-badge { background: var(--orange); color: #fff; border-radius: 20px; font-size: 11.5px; padding: 2px 9px; font-weight: 700; } .chapter-note { padding: 8px 14px; background: #FFF7EC; border-bottom: 1px solid #F5DFC2; font-size: 12.5px; color: #8a5a17; } .chapter-body { padding: 4px 0; overflow-x: auto; } /* ----- ציר זמן: יומן התקשורת עם הליד ----- */ .ld-logbox { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; max-height: 260px; overflow-y: auto; margin-bottom: 8px; } .ld-timeline { position: relative; } .ld-tl-day { font-size: 11.5px; font-weight: 700; color: var(--muted); margin: 10px 0 5px; padding-inline-start: 22px; letter-spacing: .02em; } .ld-tl-day:first-child { margin-top: 0; } .ld-tl-item { position: relative; padding: 0 0 10px; padding-inline-start: 22px; } /* הקו שמחבר את הרצף — נמתח מהנקודה עד הרשומה הבאה */ .ld-tl-item::after { content: ''; position: absolute; inset-inline-start: 5px; top: 15px; bottom: 0; width: 2px; background: #E6EBF2; } .ld-tl-item:last-child::after { display: none; } .ld-tl-dot { position: absolute; inset-inline-start: 0; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid var(--blue); box-sizing: border-box; z-index: 1; } .ld-tl-item[data-k="rem"] .ld-tl-dot { border-color: var(--orange); } .ld-tl-item[data-k="rate"] .ld-tl-dot { border-color: #7C5CD6; } .ld-tl-item[data-k="msg"] .ld-tl-dot { border-color: var(--success); } .ld-tl-time { font-size: 11px; color: var(--muted); font-weight: 600; line-height: 1.3; } .ld-tl-text { font-size: 13.5px; line-height: 1.5; color: var(--ink); overflow-wrap: anywhere; } .price-insight { font-size: 11.5px; margin-top: 3px; line-height: 1.4; padding: 2px 7px; border-radius: 6px; display: inline-block; } .price-insight.lvl-ok { background: #E6F7F1; color: #12805c; } .price-insight.lvl-low { background: #FDEBEB; color: #C0392B; } .price-insight.lvl-high { background: #FFF3E4; color: #9A6A00; } .use-median { border: none; background: rgba(0,0,0,.09); border-radius: 5px; padding: 1px 7px; font-size: 11px; cursor: pointer; font-family: inherit; margin-inline-start: 4px; font-weight: 600; } .use-median:hover { background: rgba(0,0,0,.17); } table.items { width: 100%; border-collapse: collapse; } table.items th { text-align: right; font-size: 12px; color: var(--muted); padding: 6px 10px; border-bottom: 1px solid var(--line); font-weight: 600; } table.items td { padding: 5px 10px; border-bottom: 1px solid #EFF2F6; font-size: 13.5px; } table.items tr:last-child td { border-bottom: none; } table.items tr.has-qty { background: #F0F9F4; } td.money, th.money { text-align: left; direction: ltr; white-space: nowrap; } td.total-cell { font-weight: 700; color: var(--blue); } input.qty { width: 72px; padding: 5px 6px; text-align: center; font-weight: 600; } input.line-profit { width: 60px; padding: 4px; text-align: center; } input.line-cost { width: 84px; padding: 4px; text-align: center; } /* תיאור הסעיף — נפרש לכל השורות הדרושות כדי שהטקסט המלא יוצג */ textarea.line-name { width: 100%; min-width: 0; border: 1px solid transparent; background: transparent; padding: 3px 5px; font: inherit; color: inherit; line-height: 1.45; resize: none; overflow: hidden; white-space: pre-wrap; overflow-wrap: anywhere; display: block; } textarea.line-name:hover { border-color: var(--line); } textarea.line-name:focus { border-color: var(--blue); background: #fff; outline: none; } /* שם פריט בכתב הכמויות — שדה שורה אחת שנפרש לכמה שורות כדי שייקרא במלואו */ textarea.autogrow { width: 100%; min-width: 0; box-sizing: border-box; font: inherit; color: inherit; line-height: 1.45; resize: none; overflow: hidden; white-space: pre-wrap; overflow-wrap: anywhere; display: block; border: 1px solid var(--line); border-radius: 8px; padding: 7px 9px; background: #fff; } textarea.autogrow:focus { border-color: var(--blue); outline: none; } textarea.autogrow:disabled { background: #F5F7FA; color: var(--muted); } /* עמודת התיאור מקבלת את כל המקום הפנוי; העמודות המספריות צרות וקבועות */ table.items { table-layout: fixed; } table.items col { width: 84px; } table.items col:first-child { width: 48px; } /* מס' */ table.items col:nth-child(3) { width: 46px; } /* יח' */ table.items col:nth-child(4) { width: 104px; } /* עלות ליח' */ table.items col:nth-child(5) { width: 80px; } /* רווח % */ table.items col:nth-child(7) { width: 92px; } /* כמות */ table.items col.c-desc { width: auto; } /* ----- סיכום ----- */ .summary-table { width: 100%; border-collapse: collapse; } .summary-table td { padding: 7px 2px; font-size: 14px; } .summary-table td:last-child { text-align: left; direction: ltr; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; } .summary-table tr.sep td { border-top: 1px solid var(--line); } .summary-table tr.total td { border-top: 2px solid var(--ink); font-size: 17px; font-weight: 800; padding-top: 10px; } .profit-meter { margin-top: 14px; } .meter { height: 9px; background: #E9EDF3; border-radius: 6px; margin: 6px 0; overflow: hidden; } .meter-fill { height: 100%; width: 0; background: var(--success); border-radius: 6px; transition: width .25s, background .25s; } /* ----- ניהול מחירון ----- */ .bulk-update { background: #EEF2F7; border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; margin: 12px 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .pl-chapter { border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 12px; overflow: hidden; } .pl-chapter-head { background: #EEF2F7; padding: 10px 14px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .pl-chapter-head input.ch-name { flex: 1; min-width: 220px; font-weight: 700; } .pl-note-row { padding: 6px 14px; background: #FFF7EC; } .pl-note-row input { width: 100%; font-size: 12.5px; } table.pl-items { width: 100%; border-collapse: collapse; } table.pl-items td { padding: 4px 10px; border-bottom: 1px solid #EFF2F6; } table.pl-items input.it-name { width: 100%; } table.pl-items input.it-unit { width: 64px; text-align: center; } table.pl-items input.it-cost { width: 90px; text-align: center; } /* ----- רשימות ----- */ .quote-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 10px 6px; border-bottom: 1px solid var(--line); } .quote-row .q-num { font-weight: 700; color: var(--blue); min-width: 80px; } .quote-row .q-name { flex: 1; min-width: 150px; } .quote-row .q-total { font-weight: 700; direction: ltr; } /* ----- מדריך ----- */ .guide p, .guide li { line-height: 1.65; } .guide-table { width: 100%; border-collapse: collapse; margin: 8px 0; } .guide-table th, .guide-table td { border: 1px solid var(--line); padding: 8px 12px; text-align: right; font-size: 13.5px; } .guide-table th { background: #EEF2F7; } /* ----- מודאל ----- */ .modal[hidden] { display: none; } /* סדר השכבות: תוכן < בר סיכום (90) < באנר קוקיז (200) < מודאל (210) < מגירת מובייל (250/260). * מודאל ומגירה נפתחים ביוזמת המשתמש ולכן חייבים להיות מעל באנר הקוקיז — אחרת בפלאפון * הבאנר (fixed bottom) מכסה את תחתית המודאל, כולל כפתור "שמור", ואת תחתית התפריט. */ /* overscroll-behavior: גלילה שממשיכה מעבר לסוף רשימה בתוך המודאל לא "נשפכת" לדף שמאחור */ .modal { position: fixed; inset: 0; background: rgba(10,31,56,.6); display: flex; align-items: flex-start; justify-content: center; padding: 24px; z-index: 210; overflow: auto; overscroll-behavior: contain; } .modal-box { background: #fff; border-radius: 14px; max-width: 860px; width: 100%; overflow: hidden; } .modal-toolbar { padding: 10px 16px; background: #EEF2F7; border-bottom: 1px solid var(--line); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; position: sticky; top: 0; } /* שורת הפעולות של מודאל נצמדת לתחתית אזור הגלילה. בלעדיה, ברשימה ארוכה בפלאפון * כפתור "שמור" יושב אלפי פיקסלים למטה והמשתמש לא מוצא אותו. */ .modal-actions { position: sticky; bottom: -14px; background: #fff; z-index: 1; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 14px; padding: 12px 0 2px; border-top: 1px solid var(--line); } /* גוף המודאל היחיד שלא הגביל גובה — ולכן מסמך ההצעה גלש לגלילה החיצונית וסחף איתו * את סרגל הכלים ("הדפס / שמור כ-PDF" ו"סגור") אל מחוץ למסך בפלאפון. */ .preview-content { padding: 30px 40px; max-height: 76vh; overflow: auto; } /* ===== דפי כניסה / אונבורדינג / משפטי ===== */ .auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; } .auth-card { background: #fff; border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); padding: 40px 36px; max-width: 460px; width: 100%; text-align: center; } .auth-card.wide { max-width: 720px; text-align: right; } .auth-card h1 { font-size: 24px; font-weight: 800; margin: 14px 0 6px; } .auth-card .sub { color: var(--muted); margin: 0 0 24px; font-size: 14.5px; } .google-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; background: #fff; border: 2px solid var(--line); border-radius: 12px; padding: 13px; font-family: inherit; font-size: 16px; font-weight: 600; cursor: pointer; color: var(--ink); } .google-btn:hover { border-color: var(--blue); background: #F7FAFF; } .divider { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 12.5px; margin: 18px 0; } .divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--line); } .legal-scroll { border: 1px solid var(--line); border-radius: 10px; background: #FBFCFE; padding: 18px; max-height: 46vh; overflow: auto; text-align: right; font-size: 14px; line-height: 1.7; } .legal-scroll h1 { font-size: 18px; } .legal-scroll h2 { font-size: 15px; margin-top: 16px; } .check-row { display: flex; align-items: flex-start; gap: 10px; margin: 16px 0; text-align: right; font-size: 14.5px; flex-direction: row; } .check-row input[type=checkbox] { width: 22px; height: 22px; min-height: 0; accent-color: var(--orange); flex-shrink: 0; } /* ===== לנדינג ===== */ .landing-hero { background: var(--navy); color: #fff; padding: 70px 24px 80px; text-align: center; } .landing-hero img.logo { margin-bottom: 26px; } .landing-hero h1 { font-size: clamp(26px, 4.5vw, 44px); font-weight: 800; margin: 0 0 12px; } .landing-hero h1 .orange { color: var(--orange); } .landing-hero p { color: #C6D2E2; font-size: clamp(15px, 2vw, 19px); max-width: 640px; margin: 0 auto 30px; line-height: 1.6; } .landing-features { max-width: 1100px; margin: -40px auto 40px; padding: 0 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; } .feature-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 22px; box-shadow: var(--shadow); } .feature-card .ico { font-size: 28px; margin-bottom: 8px; } .feature-card b { display: block; margin-bottom: 6px; font-size: 16px; } .feature-card span { color: var(--muted); font-size: 13.5px; line-height: 1.55; } .landing-footer { text-align: center; color: var(--muted); font-size: 12.5px; padding: 30px 20px 60px; } .landing-footer a { margin: 0 8px; } /* ===== באנר קוקיז ===== */ .cookie-banner { position: fixed; bottom: 0; right: 0; left: 0; z-index: 200; background: var(--navy); color: #fff; padding: 14px 20px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: center; font-size: 13.5px; box-shadow: 0 -4px 16px rgba(0,0,0,.25); } .cookie-banner a { color: var(--teal-soft); } /* ===== מסמך הצעה (תצוגה+הדפסה) ===== */ .qdoc { font-size: 13px; color: #111; } .qdoc-header { display: flex; justify-content: space-between; border-bottom: 3px solid var(--orange); padding-bottom: 12px; margin-bottom: 14px; } .qdoc-business h1 { margin: 0 0 4px; font-size: 22px; color: var(--blue); } .qdoc-business div { font-size: 12.5px; color: #444; line-height: 1.5; } .qdoc-meta { text-align: left; font-size: 12.5px; line-height: 1.7; } .qdoc-meta .q-number { font-size: 16px; font-weight: 800; color: var(--blue); } .qdoc-customer { background: #F3F5F9; border-radius: 8px; padding: 10px 14px; margin-bottom: 14px; font-size: 13px; line-height: 1.7; } table.qdoc-table { width: 100%; border-collapse: collapse; margin-bottom: 4px; table-layout: fixed; } table.qdoc-table td { overflow-wrap: break-word; } @media (max-width: 480px) { table.qdoc-table th, table.qdoc-table td { padding: 5px 4px; font-size: 11px; } table.qdoc-table td.money { white-space: normal; } .qdoc-totals { width: 100%; } .qdoc-header { flex-direction: column; gap: 8px; } .qdoc-meta { text-align: right; } } table.qdoc-table th { background: var(--navy); color: #fff; padding: 7px 9px; font-size: 12px; text-align: right; } table.qdoc-table th.money { text-align: left; } table.qdoc-table td { border-bottom: 1px solid #dfe3ec; padding: 6px 9px; font-size: 12.5px; } table.qdoc-table td.money { text-align: left; direction: ltr; white-space: nowrap; } table.qdoc-table tr.q-chapter td { background: #E7EDF5; font-weight: 800; color: var(--blue); font-size: 13px; border-top: 2px solid #c6d2ee; } table.qdoc-table tr.q-chapter-sum td { font-weight: 700; background: #F6F8FB; } .qdoc-totals { width: 320px; max-width: 100%; margin-inline-start: auto; border-collapse: collapse; margin-top: 10px; } .qdoc-totals td { padding: 5px 8px; font-size: 13px; } .qdoc-totals td:last-child { text-align: left; direction: ltr; font-weight: 600; } .qdoc-totals tr.grand td { border-top: 2px solid #111; font-size: 16px; font-weight: 800; padding-top: 8px; } .qdoc-terms { margin-top: 18px; font-size: 11.5px; color: #333; white-space: pre-line; border-top: 1px solid #ccc; padding-top: 10px; line-height: 1.6; } .qdoc-sign { display: flex; justify-content: space-between; margin-top: 34px; font-size: 13px; } .qdoc-sign .sig { border-top: 1px solid #555; padding-top: 5px; width: 220px; text-align: center; } /* ===== הדפסה ===== */ .print-only { display: none; } @media print { .no-print { display: none !important; } .print-only { display: block; } body { background: #fff; } @page { size: A4; margin: 14mm 12mm; } table.qdoc-table tr { page-break-inside: avoid; } /* הכותרות חוזרות בכל עמוד, כדי שדף 2 לא יהיה טבלה בלי כותרות */ table.qdoc-table thead { display: table-header-group; } /* אין להשאיר כותרת פרק בתחתית עמוד בלי השורות שאחריה */ table.qdoc-table tr.q-chapter td { break-after: avoid; page-break-after: avoid; } table.qdoc-table tr.q-chapter-sum td { break-before: avoid; page-break-before: avoid; } /* סיכום ותנאים: לא מתפצלים, אבל גם לא נדחקים לעמוד חדש ומשאירים חצי עמוד ריק */ .qdoc-totals { page-break-inside: avoid; } .qdoc-terms { page-break-inside: avoid; } .qdoc-sign { page-break-inside: avoid; } /* המסמך תופס את כל רוחב העמוד ולא נשאר עמודה צרה */ #printArea, #printArea .qdoc { width: 100%; max-width: none; margin: 0; padding: 0; } /* בהדפסת מסמך: רק המסמך. מכסה גם אלמנטים שנוצרו דינמית ואין להם no-print (כפתור נגישות, חלונית "מה חדש", דלג-לתוכן) — הם יצרו עמוד ריק ואייקון על ה-PDF. */ body.printing-doc > *:not(#printArea) { display: none !important; } body.printing-doc #printArea { display: block !important; } /* מסמך תדריך בטיחות חתום: כשהוא פתוח מדפיסים אותו בלבד, לא את כל המסך */ body:has(#sbDocModal:not([hidden])) > *:not(#sbDocModal) { display: none !important; } #sbDocModal:not([hidden]) { position: static !important; background: none !important; display: block !important; inset: auto !important; padding: 0 !important; overflow: visible !important; } #sbDocModal .modal-box { max-width: none !important; box-shadow: none !important; border-radius: 0 !important; } #sbDocModal #sbDocBody { max-height: none !important; overflow: visible !important; padding: 0 !important; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } /* ----- תפריט המבורגר ----- */ /* ===== סרגל עליון רספונסיבי ===== * הבעיה שתוקנה: ברוחב בינוני הניווט, החיפוש ותיבת המשתמש נלחמו על אותו מקום, * והפריט האחרון ("הגדרות") נחתך באמצע מילה בלי שום סימן שאפשר לגלול אליו. * הפתרון: סדר ויתור ברור — קודם מתקצרים הטקסטים של המשתמש, אחר כך החיפוש * מצטמצם, ורק בסוף הניווט מתקפל להמבורגר. */ .topbar { flex-wrap: nowrap; } /* שורה אחת — לא נשברת לשתיים */ .topbar > * { flex-shrink: 0; } #groupNav { flex: 1 1 auto; min-width: 0; } /* הניווט הוא מי שנותן מקום */ .topbar .user-box { flex-shrink: 1; min-width: 0; overflow: hidden; } .topbar #globalSearch { transition: width .15s; } /* קצה מטושטש בסוף הניווט — רמז שיש עוד פריטים לגלול אליהם */ #groupNav, .subnav { -webkit-mask-image: linear-gradient(to left, transparent 0, #000 18px); mask-image: linear-gradient(to left, transparent 0, #000 18px); } @media (max-width: 1500px) { .topbar { gap: 12px; padding-inline: 14px; } } /* שתי פעולות נדירות שקיימות שתיהן במגירה (DRAWER_ACTIONS): 'עריכת התפריט' ו'יציאה מכל המכשירים'. מסתירים אותן עד 1700px כדי שכל ששת אזורי-העל — ובהם 'עוד' שמכיל הגדרות ועזרה — ייכנסו לסרגל בלי חיתוך. נמדד עם צ'יפ ניסיון ושם משתמש מלא: בלעדיהן נכנסים מ-1152px ומעלה. */ @media (max-width: 1700px) { .topbar #btnModEdit, .topbar #btnLogoutAll { display: none; } } @media (max-width: 1330px) { .topbar #globalSearch { width: 116px !important; } .topbar .user-box span { display: none; } /* שם המשתמש — התמונה מספיקה */ } @media (max-width: 1240px) { .topbar #globalSearch { width: 92px !important; } .topbar .brand-lockup { font-size: 0; gap: 0; } /* רק הסמל, בלי המילה "BTU" */ .topbar .brand-lockup img { width: 30px; height: 30px; } } /* מוצג תמיד: הניווט העליון נגלל אופקית ובמסך צר הפריטים האחרונים ("הגדרות") נדחפים מחוץ למסך, ולכן ההמבורגר הוא הגישה המלאה והוודאית לכל הטאבים בכל רוחב. */ #hamburger { display: block; background: rgba(255,255,255,.12); color: #fff; border: none; border-radius: 9px; padding: 8px 13px; font-size: 19px; cursor: pointer; } .drawer-overlay { position: fixed; inset: 0; background: rgba(10,31,56,.55); z-index: 250; } .drawer-overlay[hidden] { display: none; } #navDrawer { position: fixed; top: 0; bottom: 0; inset-inline-start: -290px; width: 280px; z-index: 260; background: var(--navy); color: #fff; overflow-y: auto; padding: 16px 12px 30px; transition: inset-inline-start .22s ease; box-shadow: 4px 0 20px rgba(0,0,0,.3); } #navDrawer.open { inset-inline-start: 0; } #navDrawer .dw-group { font-weight: 800; font-size: 15.5px; padding: 13px 10px; color: var(--teal-soft); cursor: pointer; display: flex; align-items: center; justify-content: space-between; border-radius: 9px; margin-top: 2px; } #navDrawer .dw-group:hover { background: rgba(255,255,255,.06); } #navDrawer .dw-caret { font-size: 12px; opacity: .7; } #navDrawer .dw-tabs[hidden] { display: none; } #navDrawer .dw-tab { display: block; width: 100%; text-align: right; background: none; border: none; color: #fff; font-family: inherit; font-size: 15px; padding: 10px 26px; border-radius: 9px; cursor: pointer; } #navDrawer .dw-tab.active { background: var(--teal); color: var(--blue); font-weight: 700; } /* פעולות הסרגל העליון שמוסתרות במסך צר — משוכפלות לתחתית התפריט כדי שיישארו נגישות */ #navDrawer .dw-sep { height: 1px; background: rgba(255,255,255,.18); margin: 12px 4px 8px; } #navDrawer .dw-act { display: flex; align-items: center; gap: 9px; width: 100%; text-align: right; background: rgba(255,255,255,.07); border: none; color: #fff; font-family: inherit; font-size: 15px; padding: 12px 14px; border-radius: 9px; margin-top: 6px; cursor: pointer; min-height: 44px; /* יעד מגע נוח לאצבע */ } #navDrawer .dw-act:hover { background: rgba(255,255,255,.14); } #navDrawer .dw-act i { width: 18px; text-align: center; color: var(--teal-soft); } /* חלון צר (חצי מסך): הניווט העליון לא נכנס בשורה אחת — עוברים לתפריט ההמבורגר, כך שההדר נשאר נמוך ואף טאב (כולל "הגדרות") לא נשאר מחוץ למסך. */ #searchResults { position: absolute; top: 110%; inset-inline-end: 0; width: 290px; max-height: 340px; overflow: auto; background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); z-index: 99; } #searchResults[hidden] { display: none; } /* פאנל תוצאות החיפוש רחב מתיבת החיפוש שהוא תלוי בה (290px מול 92px), ולכן במסך צר הוא * חורג מקצה המסך ומסתיר את תחילת כל שורה (בעברית — הצד שבו הטקסט מתחיל). במסך צר הוא * נפרס על רוחב המסך מתחת לסרגל העליון (58px) במקום להיצמד לתיבה. */ @media (max-width: 900px) { #searchResults { position: fixed; top: 58px; inset-inline: 10px; width: auto; max-width: none; max-height: calc(100vh - 78px); } } @media (max-width: 1150px) { #groupNav { display: none; } .subnav { display: none !important; } /* ברוחב הזה הניווט עובר להמבורגר, ו"ערוך" מופיע שם כפעולה — אין טעם לצופף איתו את הסרגל */ .topbar #btnModEdit { display: none; } /* .user-box הוא היחיד שמתכווץ בסרגל (flex-shrink:1 + overflow:hidden), ולכן במסך צר * הוא נמעך לאפס והכפתורים שבתוכו נחתכים בשקט — "יציאה" יצא מחוץ למסך לגמרי. * מסתירים אותם במפורש; שניהם מופיעים כפעולות בתפריט ההמבורגר. */ .topbar #btnLogout, .topbar #adminLink { display: none; } } /* ===== התאמה מלאה למובייל ===== */ @media (max-width: 760px) { body { font-size: 15px; } .topbar { padding: 8px 10px; gap: 8px; } /* במובייל: המבורגר במקום סרגלי הניווט */ #hamburger { display: block; } #groupNav { display: none; } .subnav { display: none !important; } .user-box span { display: none; } /* שם משתמש מוסתר בקטן */ #globalSearch { width: 105px; } .tab-panel { padding: 0 8px; margin: 10px auto; } .card { padding: 13px 12px; } /* טבלאות רחבות נגללות בתוך הכרטיס */ .card { overflow-x: auto; } .sticky { position: static; } /* סיכום ההצעה לא נדבק במובייל */ .grid-4 { grid-template-columns: 1fr 1fr; } .quote-layout { grid-template-columns: minmax(0, 1fr); } .modal { padding: 8px; } .preview-content { padding: 14px 12px; } .btn { min-height: 46px; } /* אצבעות בשטח */ .btn.tiny, .use-median { min-height: 40px; padding: 8px 12px; } /* גם כפתורים קטנים ניתנים ללחיצה נוחה */ .linkbtn { min-height: 40px; display: inline-flex; align-items: center; } /* יעדי מגע שנשארו מתחת ל-40px: "↩ מומלץ" בשורת הצעה, פעמון ההתראות ולוגו הבית */ .use-median { font-size: 13px; vertical-align: middle; } .price-insight { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; } /* ארבעת הכפתורים מתחת לתמונת פרויקט — מתפרסים לשתי שורות במקום להיצמד */ .ph-actions { flex-wrap: wrap; gap: 6px !important; } .ph-actions .btn.tiny { padding: 8px 10px; } #bellBtn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } .topbar .brand-lockup { padding: 7px; margin-inline: -7px; } /* 30px + 2×7 = 44px */ input, select { min-height: 42px; font-size: 16px; } .landing-hero { padding: 40px 16px 50px; } #globalSearch { font-size: 16px; } /* יומן חודשי קטן ומותאם — בלי גלילה אופקית */ .cal-grid { min-width: 0 !important; grid-template-columns: repeat(7, 1fr) !important; gap: 2px !important; } .cal-day { min-height: 50px !important; font-size: 9px !important; padding: 3px 2px !important; } .cal-day b { font-size: 11px !important; } /* ===== טבלאות נתונים בטלפון — פריסת כרטיסים ===== table.items משמשת בכל האפליקציה (הצעה, לידים, הזמנות רכש, הוצאות, מנהלים והרשאות, קבלני משנה ועוד) עם 6-11 עמודות. ברוחב טלפון הן לא נכנסות: table-layout:fixed מכווץ את עמודת ה-auto עד לאפס (התיאור נהיה תו אחד), והכותרות נדרסות זו על זו. במקום לכווץ — כל שורה הופכת לכרטיס, וכל תא מציג "תווית: ערך". התוויות מוזרקות אוטומטית מכותרות הטבלה (labelTableCells ב-app.js), כך שכל טבלה חדשה מקבלת את זה בלי עבודה נוספת. */ table.items, table.pl-items { display: block; table-layout: auto; font-size: 13px; min-width: 0 !important; width: 100%; } table.items colgroup, table.pl-items colgroup { display: none; } table.items thead, table.pl-items thead { display: block; } table.items tbody, table.pl-items tbody { display: block; } /* שורת הכותרות מיותרת — כל תא נושא את התווית שלו ב-::before */ table.items tr.thead-row, table.pl-items tr.thead-row, table.items thead tr, table.pl-items thead tr { display: none; } /* גיבוי ב-CSS בלבד: גם אם התיוג לא רץ, שורת כותרות לא תוצג ככרטיס דרוס */ table.items tr:has(th), table.pl-items tr:has(th) { display: none; } table.items tr, table.pl-items tr { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 14px; padding: 10px 12px; border-bottom: 1px solid #EFF2F6; } /* display מפורש גובר על [hidden]{display:none} של הדפדפן, ואז שורות שנפתחות/נסגרות בקוד (פאנל "פרטים" בלידים ובעובדים) נשארו פתוחות תמיד והכפתור נראה כאילו אינו עושה דבר. חייבים להחזיר להן את הכיבוי. */ table.items tr[hidden], table.pl-items tr[hidden], table.items td[hidden], table.pl-items td[hidden] { display: none !important; } /* שורת פאנל אינה כרטיס — היא מכילה פריסה משלה ולכן נשארת בלוק רגיל */ table.items tr.ld-panel, table.items tr.em-panel { display: block; padding: 0; } table.items tr.ld-panel > td, table.items tr.em-panel > td { display: block; width: 100%; } table.items td, table.pl-items td { display: flex; align-items: center; gap: 5px; border: none; padding: 0; font-size: 13px; max-width: 100%; overflow-wrap: anywhere; } table.items td[data-label]:not(:empty)::before, table.pl-items td[data-label]:not(:empty)::before { content: attr(data-label); color: var(--muted); font-size: 11.5px; font-weight: 600; white-space: nowrap; } /* תא ריק לא גורר תווית מיותמת */ table.items td:empty, table.pl-items td:empty { display: none; } /* תא שסומן כרחב (תיאור/שם) — שורה מלאה משלו, בלי תווית */ table.items td.cell-wide { display: block; width: 100%; } table.items td.cell-wide::before { display: none; } /* שדה טקסט חופשי (מסומן אוטומטית) — שורה מלאה, והתווית נשארת מעליו */ table.items td.cell-input, table.pl-items td.cell-input { display: block; width: 100%; } table.items td.cell-input > input, table.pl-items td.cell-input > input, table.items td.cell-input > textarea, table.pl-items td.cell-input > textarea, table.items td.cell-input > select, table.pl-items td.cell-input > select { width: 100% !important; max-width: 100%; } /* מספר הסעיף מיותר בטלפון; תא הפעולות נדחף לקצה השורה */ table.items td.col-num { display: none; } table.items td.cell-del { margin-inline-start: auto; } /* בכרטיס התווית מימין לערך — ולכן התא חוזר ל-RTL, גם אם הוא .money */ table.items td.money, table.pl-items td.money { direction: rtl; text-align: right; } /* רק שדות מספר מצטמצמים. אסור לכתוב :not([type=text]) — input ללא אטריביוט type הוא טקסט לכל דבר, אבל הסלקטור לא מזהה אותו וכיווץ אותו ל-74px (כך נחתך שם הפריט בכתב הכמויות). */ table.items input[type=number], table.pl-items input[type=number] { width: 74px !important; min-width: 0; padding: 6px 4px; } table.items select { max-width: 100%; } .chapter-head { padding: 10px 10px; gap: 8px; } .chapter-title { font-size: 14px; } } /* ===== נוכחות: שורה תקועה ===== */ tr.att-stale { background: #FDECEC; } /* ===== טבלאות עובדים ונוכחות — כרטיסים במובייל ===== */ @media (max-width: 760px) { #empTable, #attTable, #empTable tbody, #attTable tbody { display: block; width: 100%; } /* שורת הכותרות מיותרת — לכל שדה יש תווית משלו */ #empTable tr:first-child, #attTable tr:first-child { display: none; } #empTable tr, #attTable tr { display: block; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 10px; padding: 8px 12px; background: #fff; } tr.att-stale { border-color: var(--danger) !important; } /* hidden חייב לגבור על display:block — אחרת כל פאנלי העובדים היו נפתחים */ #empTable tr[hidden] { display: none !important; } /* עריכת חשבונית: שתי עמודות לא נכנסות למסך טלפון — השדות מעל, הקובץ מתחת */ #expEditGrid { grid-template-columns: 1fr !important; } #eePreview iframe { height: 52vh !important; } #empTable td, #attTable td { display: flex; align-items: center; gap: 8px; border: none !important; padding: 4px 0 !important; min-width: 0; } #empTable td[data-label]::before, #attTable td[data-label]::before { content: attr(data-label); flex: none; width: 86px; font-size: 12px; font-weight: 600; color: var(--muted); } #empTable td[data-label] input:not([type="checkbox"]), #empTable td[data-label] select, #attTable td[data-label] input:not([type="checkbox"]) { flex: 1; width: auto !important; min-width: 0; } #empTable td:first-child { padding-bottom: 8px !important; border-bottom: 1px dashed var(--line) !important; } #empTable .em-actions-cell { padding-top: 8px !important; } #empTable .em-actions-cell .btn { width: 100%; justify-content: center; } /* הפאנל המורחב: התא התופס 9 עמודות הופך לבלוק רגיל */ #empTable tr.em-panel td { display: block; } } /* ===== עורך הסכם — כל סעיף ניתן לעריכה ===== */ .ce-box { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-top: 14px; background: #FBFCFE; } .ce-box-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; } .ce-box-h b { font-size: 14.5px; } .ce-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 4px 0; } .ce-row input, .ce-row select { padding: 6px 8px; min-width: 0; } .ce-num { width: 22px; text-align: center; color: var(--muted); font-size: 12px; font-weight: 700; flex: none; } .ce-pct-wrap { display: inline-flex; align-items: center; gap: 3px; color: var(--muted); font-size: 12.5px; } .ce-sub { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; margin: 8px 0; background: #fff; } .ce-sub textarea { width: 100%; font: inherit; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; line-height: 1.6; } .ce-box textarea { width: 100%; font: inherit; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; line-height: 1.6; } @media (max-width: 700px) { .ce-row input[type="date"] { width: 100% !important; } .ce-row { padding: 6px 0; border-bottom: 1px dashed var(--line); } } /* ===== עורך כרטיס ביקור דיגיטלי ===== */ #tab-card .card-editor-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 20px; align-items: start; } @media (max-width: 860px) { #tab-card .card-editor-grid { grid-template-columns: 1fr; } #tab-card .card-preview-col { position: static !important; order: -1; } } /* ===== מצב כהה אמיתי ===== * ערכת צבעים כהה דרך משתני העיצוב — לא היפוך פילטר: תמונות, לוגואים * וחשבוניות נשארים בצבעם האמיתי, והרקעים באמת כהים כמו בכל תוכנה. * צבעים קשיחים שפזורים בתבניות (רקעי #F8FAFD וכד') נתפסים לפי תוכן * מאפיין ה-style. ההעדפה נשמרת למכשיר (localStorage), לא לחשבון. */ html.ys-dark { color-scheme: dark; /* בורר תאריך, גלילה ושדות מובנים — כהים */ --bg: #020b12; --card: #071a2a; --ink: #E7EDF5; --muted: #93A2B5; --line: #315567; --shadow: 0 8px 24px rgba(0, 0, 0, .45); } html.ys-dark body { background: var(--bg); color: var(--ink); } /* --blue משמש גם כרקע הסרגל (נשאר כחול-לילה) וגם כצבע טקסט — לטקסט גוון בהיר */ html.ys-dark a { color: #43d6e6; } html.ys-dark h3 { color: #A9C4E8; } /* שדות קלט */ html.ys-dark input, html.ys-dark select, html.ys-dark textarea { background: #101722; color: var(--ink); border-color: var(--line); } html.ys-dark input:focus, html.ys-dark select:focus, html.ys-dark textarea:focus { outline-color: #7a4a1f; } html.ys-dark input::placeholder, html.ys-dark textarea::placeholder { color: #6B7A8E; } /* ניווט משני */ html.ys-dark .subnav { background: #131A24; border-bottom-color: var(--line); } html.ys-dark .subnav .tab { background: #1E2836; color: var(--muted); } html.ys-dark .subnav .tab:hover { background: #263243; color: var(--ink); } html.ys-dark .subnav .tab.active { background: var(--teal); color: var(--blue); } /* כפתורים משניים ותגים שמבוססים על רקעים בהירים */ html.ys-dark .btn.secondary { background: #1E2836; color: var(--ink); border: 1px solid var(--line); } html.ys-dark .btn.secondary:hover { background: #263243; } html.ys-dark .btn.danger-outline { background: transparent; } /* רקעים בהירים קשיחים בתבניות — נתפסים לפי תוכן ה-style ומוחלפים בכהה. * קבוצות: פאנל נייטרלי / אזהרה חמה / הצלחה / שגיאה / מידע. לבן מפורש * (background:#fff) בכוונה לא נדרס — חתימות, תצוגת חשבוניות ולוגואים. */ html.ys-dark [style*="F8FAFD" i], html.ys-dark [style*="FAFBFD" i], html.ys-dark [style*="F1F6FC" i], html.ys-dark [style*="EEF2F7" i], html.ys-dark [style*="E7EDF5" i], html.ys-dark [style*="FBF8F1" i], html.ys-dark [style*="E0E7F0" i], html.ys-dark [style*="E5EBF3" i], html.ys-dark [style*="F5F8FF" i], html.ys-dark [style*="F4F6F9" i] { background-color: #1B2430 !important; color: var(--ink); } html.ys-dark [style*="FFF3E4" i], html.ys-dark [style*="FEF3C7" i], html.ys-dark [style*="FFF7EC" i], html.ys-dark [style*="FFF7ED" i], html.ys-dark [style*="FFF9F0" i], html.ys-dark [style*="FFF4E5" i], html.ys-dark [style*="FFF7E6" i] { background-color: #2E2312 !important; } /* פאנלים עם רקע בהיר שמגיע ממחלקת CSS (לא inline) */ html.ys-dark .bulk-update { background: #1B2430; } html.ys-dark #npsCard { background: var(--card) !important; color: var(--ink); } html.ys-dark .chapter-head { background: #1B2430; } html.ys-dark .chapter-head:hover { background: #222D3B; } html.ys-dark .chapter-note { background: #2E2312; border-bottom-color: #4A3A1A; color: #E0B36A; } html.ys-dark .meter { background: #253040; } html.ys-dark .lock-banner { background: #301A1A; border-bottom-color: #57302f; } html.ys-dark [style*="E5E9F0" i], html.ys-dark [style*="E9EDF3" i] { background-color: #253040 !important; } html.ys-dark [style*="F0F9F4" i] { background-color: #12291F !important; } html.ys-dark [style*="E6F7F1" i], html.ys-dark [style*="F6FBF8" i] { background-color: #12291F !important; } html.ys-dark [style*="FDEBEB" i], html.ys-dark [style*="FDECEC" i] { background-color: #301A1A !important; } html.ys-dark [style*="EEF5FF" i], html.ys-dark [style*="E8F0FE" i] { background-color: #17293F !important; } /* גבולות בהירים קשיחים */ html.ys-dark [style*="E4EAF1" i], html.ys-dark [style*="EFF2F6" i] { border-color: var(--line) !important; } /* טבלאות הפאנל והכרטיסים בפאנל-על */ html.ys-dark table.adm tr:nth-child(even) td { background: #1A222D; } html.ys-dark table.adm tr:hover td { background: #202B39; } html.ys-dark .kpi { background: var(--card); border-color: var(--line); } html.ys-dark .fchip { background: #1E2836; border-color: var(--line); color: var(--muted); } html.ys-dark .fchip.on { background: var(--teal); border-color: var(--teal); color: var(--blue); } html.ys-dark .atab { background: #1E2836; color: #A9C4E8; } html.ys-dark .atabs { background: var(--bg); } /* תגי סטטוס — גוונים כהים עם טקסט בהיר */ html.ys-dark .st.trial { background: #33270F; color: #F3B26B; } html.ys-dark .st.active { background: #12291F; color: #4ADE9E; } html.ys-dark .st.locked { background: #301A1A; color: #F87171; } html.ys-dark .st.comp { background: #17293F; color: #86AFE8; } /* חשבונית בתצוגה (תמונה/PDF) נשארת על רקע לבן — כמו נייר אמיתי */ html.ys-dark #fpBody img, html.ys-dark #fpBody iframe, html.ys-dark #eePreview img, html.ys-dark #eePreview iframe { background: #fff; } /* הדפסה (הצעות מחיר, דוחות ל-PDF) נשארת בהירה תמיד */ @media print { html.ys-dark { --bg: #F7F7F5; --card: #FFFFFF; --ink: #071a2a; --muted: #52677D; --line: #D8E0E8; --shadow: 0 8px 24px rgba(7, 26, 42, 0.10); color-scheme: light; } } /* ----- לוח שיבוץ טכנאים (BTU אפיון 5.1.3) ----- */ /* עמודות בפלקס עם גלילה אופקית — במובייל גוררים את הלוח הצידה, הכרטיסים נפתחים בלחיצה */ .board-grid { display: flex; gap: 10px; overflow-x: auto; align-items: flex-start; padding-bottom: 6px; } .board-col { flex: 1 0 200px; min-width: 200px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .board-col.wait { background: var(--bg); flex: 0 0 210px; } .board-col.today .board-col-head { background: rgba(19, 184, 176, .12); } .board-col-head { padding: 7px 10px; font-weight: 700; font-size: 13.5px; border-bottom: 2px solid var(--teal); display: flex; justify-content: space-between; align-items: center; gap: 6px; } .board-count { font-size: 11.5px; color: var(--muted); font-weight: 400; white-space: nowrap; } .board-strip { min-height: 34px; padding: 2px 5px 4px; border-bottom: 1px dashed var(--line); } .board-strip-label, .board-hour-label { display: block; font-size: 10px; color: var(--muted); } .board-hour { min-height: 30px; padding: 1px 5px 3px; border-bottom: 1px solid var(--line); } .board-hour:last-child { border-bottom: none; } .board-body-wait { padding: 4px 6px; min-height: 140px; } .board-card { background: var(--card); border: 1px solid var(--line); border-inline-start: 4px solid var(--line); border-radius: 8px; padding: 5px 8px; margin: 3px 0; font-size: 12.5px; line-height: 1.35; cursor: grab; box-shadow: 0 1px 4px rgba(7, 26, 42, .08); } .board-card:active { cursor: grabbing; } .board-card.urgent { border-inline-start-color: var(--danger); } .board-card.dragging { opacity: .45; } .board-chip { border-radius: 999px; padding: 1px 8px; font-size: 10.5px; font-weight: 700; white-space: nowrap; } .board-drop-over { outline: 2px dashed var(--teal); outline-offset: -2px; background: rgba(19, 184, 176, .10); } .board-seg { display: inline-flex; gap: 0; } .board-seg .btn { border-radius: 0; } /* ב-RTL הילד הראשון יושב מימין (צד inline-start) — הפינות החיצוניות שלו הן פינות ה-start */ .board-seg .btn:first-child { border-start-start-radius: 8px; border-end-start-radius: 8px; } .board-seg .btn:last-child { border-start-end-radius: 8px; border-end-end-radius: 8px; } .board-seg .btn.active { background: var(--teal); border-color: var(--teal); color: var(--blue); } /* ----- מצב פשוט (BTU — "תפריט יומי מקוצר למי שלא טכנולוגי") ----- שכבת תצוגה בלבד: הסרגל הפשוט מחליף את הניווט המלא, ו-.sm-adv מקפל שדות מתקדמים. ה-!important נחוץ כי חלק מהשדות המתקדמים נושאים display בסגנון פנימי (style="display:flex") שגובר על מחלקה רגילה — ומכיוון שהכלל רק *מסתיר*, אין בו סיכון לחשוף משהו בטעות. */ /* הכלל מכוון לניווט שישב בסרגל העליון. מאז שהוא עבר ל-#sideNav, הגבלתו ל-.topbar היא מה שמונע ממצב פשוט להשאיר את סרגל הצד ריק לגמרי. */ body.simple-mode:not(.simple-all) .topbar #groupNav, body.simple-mode:not(.simple-all) .subnav, body.simple-mode #btnModEdit { display: none !important; } body.simple-mode .sm-adv { display: none !important; } .simple-nav { background: var(--card); border-bottom: 2px solid var(--teal); padding: 8px 14px; position: sticky; top: 54px; z-index: 46; } /* ב"כל האפשרויות" גם .subnav חוזרת, ושתיהן נצמדות ל-54px — הסרגל הפשוט היה נוחת עליה. אז הוא פשוט נגלל עם הדף: זה מצב זמני של גלישה. */ body.simple-all .simple-nav { position: static; } .simple-nav .sm-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: stretch; } .sm-tab { flex: 1 1 140px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 60px; padding: 10px 12px; background: #EEF2F7; color: var(--ink); border: 1px solid var(--line); border-radius: 12px; cursor: pointer; font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1.25; text-align: center; } .sm-tab i { font-size: 19px; color: var(--teal-dark); } .sm-tab:hover { background: #E0E7F0; } .sm-tab.active { background: var(--teal); border-color: var(--teal-dark); color: var(--blue); font-weight: 800; } .sm-tab.active i { color: var(--blue); } .sm-ghost { flex: 0 1 130px; background: transparent; border-style: dashed; color: var(--muted); font-weight: 500; } .sm-ghost i { color: var(--muted); } .sm-off { flex: 0 0 auto; background: none; border: none; color: var(--muted); text-decoration: underline; cursor: pointer; font-family: inherit; font-size: 13px; min-height: 44px; padding: 0 8px; } /* צ'יפ התראה מאזור שהמצב הפשוט מקפל — כדי ש"פשוט" לא יהפוך ל"מפספס" */ .sm-alerts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; } .sm-alerts:empty { display: none; } .sm-alert { display: inline-flex; align-items: center; gap: 7px; min-height: 42px; background: #FFF7EC; border: 1px solid var(--orange); color: var(--ink); border-radius: 999px; padding: 6px 15px; cursor: pointer; font-family: inherit; font-size: 13.5px; font-weight: 600; } .sm-alert:hover { background: #FDEEDC; } .sm-alert i { color: var(--orange); } .sm-alert-n { background: var(--danger); color: #fff; border-radius: 999px; min-width: 21px; padding: 0 6px; font-size: 12px; line-height: 21px; text-align: center; } .sm-more-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 0 0 12px; } /* יעדי מגע גדולים יותר — גם בדסקטופ, כי במצב פשוט זה כל הרעיון. .mini-input ותיבות סימון נשארות כפי שהן (עמודות בטבלאות היו נשברות). */ body.simple-mode .btn { min-height: 48px; } body.simple-mode .btn.tiny { min-height: 42px; padding: 9px 14px; } body.simple-mode .tab-panel input:not([type="checkbox"]):not([type="radio"]):not(.mini-input), body.simple-mode .tab-panel select, body.simple-mode .tab-panel textarea { min-height: 46px; } @media (max-width: 760px) { /* הסרגל העליון נמוך יותר במובייל (padding 8px), ולכן גם ההיצמדות */ .simple-nav { top: 50px; padding: 8px; } .sm-tab { flex: 1 1 calc(50% - 4px); min-height: 66px; font-size: 14.5px; } .sm-ghost { flex: 1 1 100%; flex-direction: row; min-height: 48px; } } html.ys-dark .simple-nav { background: #131A24; } html.ys-dark .sm-tab { background: #1E2836; color: var(--ink); border-color: var(--line); } html.ys-dark .sm-tab:hover { background: #263243; } html.ys-dark .sm-tab.active { background: var(--teal); color: var(--blue); } html.ys-dark .sm-alert { background: #33270F; color: var(--ink); border-color: var(--orange); } html.ys-dark .sm-alert:hover { background: #3E2F12; } /* ============================================================ * סרגל צד — הניווט הראשי בדסקטופ (≥1151px) * ------------------------------------------------------------ * #groupNav עצמו הוזז ל-