/* ============================================================ syncalp App Shell — שפת העיצוב של orders.html לכל שאר הדפים. נטען אחרי styles.css ותוחם ל-body.os-app (+מחלקת עמוד: dashboard-page / deal-ideas-page / notifications-page / login-page). orders.html לא טוען אותו — orders.css נשאר בלעדי לעמוד ההזמנות. ללא שינויי לוגיקה: אותם IDs ואותן מחלקות JS. ============================================================ */ /* Heebo מתארח מקומית (public/fonts) ולא מ-Google Fonts: אין תלות חיצונית ואין דליפת IP של המשתמש לצד שלישי. גרסת variable אחת לכל המשקלים 100-900 — 3 קבצים, ~57KB בסך הכול. */ @font-face { font-family: 'Heebo'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/fonts/heebo-hebrew.woff2') format('woff2'); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; } @font-face { font-family: 'Heebo'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/fonts/heebo-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Heebo'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/fonts/heebo-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ============================================================ טוקנים — שתי ערכות. הבהירה היא ברירת המחדל, והכהה נטענת כשכבת דריסה תחת [data-theme="dark"] על . הסרגל כהה בשני המצבים (--op-side*), כפי שהיה מאז שנבנה. הבלוקים משוכפלים בכוונה בין app-shell.css ל-orders.css — ראה docs/13 פריט 42. שינוי באחד מחייב שינוי בשני. ============================================================ */ body.os-app { --op-side: #141833; --op-side-2: #1b2044; --op-side-pop: #262c58; --op-r-ctl: 10px; --op-r-card: 16px; --op-ease: cubic-bezier(0.23, 1, 0.32, 1); --op-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); --op-font: "Heebo", "Segoe UI", "Rubik", Arial, sans-serif; --os-sidebar-w: 264px; --radius-xs: 6px; --radius-sm: 8px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --transition: 160ms cubic-bezier(0.23, 1, 0.32, 1); color-scheme: light; --op-bg: #f4f5fa; --op-surface: #ffffff; --op-surface-2: #fafbfe; --op-border: #e4e7f2; --op-border-strong: #cfd4e4; --op-hairline: #edeff7; --op-ink: #131735; --op-ink-2: #565d7c; --op-ink-3: #666e8c; --op-accent: #4655e0; --op-accent-strong: #3846cd; --op-accent-soft: #edeffe; --op-accent-border: #cdd3fa; --op-accent-solid: #4655e0; --op-accent-solid-hover: #3846cd; --op-ring: 0 0 0 3px rgba(70, 85, 224, 0.22); --op-ok: #0f8a5f; --op-ok-soft: #e2f6ec; --op-ok-border: #b6e4cd; --op-warn: #a86e0a; --op-warn-soft: #fcf2dd; --op-warn-border: #f0dcb2; --op-danger: #d13d3d; --op-danger-soft: #fdeaea; --op-danger-border: #f3c6c6; --op-danger-solid: #d13d3d; --op-danger-solid-hover: #bb3434; --op-info: #3d6adb; --op-info-soft: #e9effc; --op-muted: #6d7490; --op-muted-soft: #eef0f6; --op-row-hover: #f8f9fe; --op-row-cancelled: #fffafa; --op-zone-revivo: #f7f8ff; --op-zone-revivo-hover: #f1f3fe; --op-zone-alp: #f5fbf7; --op-zone-alp-hover: #eef8f2; --op-zone-control: #f9f9fd; --op-zone-control-hover: #f2f3fb; --op-scroll-thumb: #cfd4e6; --op-field-hover-border: #d3d8ea; --op-track-off: #d7dbe9; --op-skeleton-hi: #f6f7fb; --op-shadow-sm: 0 1px 2px rgba(19, 23, 53, 0.05); --op-shadow-md: 0 1px 2px rgba(19, 23, 53, 0.04), 0 10px 30px -12px rgba(19, 23, 53, 0.14); --op-shadow-drawer: 0 24px 90px -18px rgba(19, 23, 53, 0.35); --bg: #f4f5fa; --bg-soft: #eef0f7; --surface: #ffffff; --surface-soft: #fafbfe; --surface-muted: #eef0f6; --zebra: rgba(255, 255, 255, 0.5); --text: #131735; --ink: #131735; --muted: #565d7c; --muted-soft: #666e8c; --line: #e4e7f2; --line-strong: #cdd3fa; --accent: #4655e0; --accent-dark: #3846cd; --accent-soft: #edeffe; --accent-soft-border: #cdd3fa; --danger: #d13d3d; --danger-soft: #fdeaea; --danger-soft-border: #f3c6c6; --warn: #a86e0a; --warn-soft: #fcf2dd; --warn-soft-border: #f0dcb2; --ok: #0f8a5f; --ok-soft: #e2f6ec; --ok-soft-border: #b6e4cd; --info: #3d6adb; --info-soft: #e9effc; --info-soft-border: #c4d4f6; --ring: rgba(70, 85, 224, 0.22); --shadow-sm: 0 1px 2px rgba(19, 23, 53, 0.05); --shadow-md: 0 1px 2px rgba(19, 23, 53, 0.04), 0 10px 30px -12px rgba(19, 23, 53, 0.14); --shadow-lg: 0 1px 2px rgba(19, 23, 53, 0.04), 0 10px 30px -12px rgba(19, 23, 53, 0.14); --shadow-xl: 0 24px 90px -18px rgba(19, 23, 53, 0.35); margin: 0; background: var(--op-bg); color: var(--op-ink); font-family: var(--op-font); font-size: 14px; line-height: 1.55; -webkit-font-smoothing: antialiased; min-height: 100vh; } [data-theme="dark"] body.os-app { color-scheme: dark; --op-bg: #0d1128; --op-surface: #171c3d; --op-surface-2: #1e2450; --op-border: #2c3266; --op-border-strong: #3a4176; --op-hairline: #242a55; --op-ink: #eceffb; --op-ink-2: #aab2d6; --op-ink-3: #808ab3; --op-accent: #6b78ff; --op-accent-strong: #949dff; --op-accent-soft: rgba(107, 120, 255, 0.17); --op-accent-border: rgba(107, 120, 255, 0.45); --op-accent-solid: #5563f5; --op-accent-solid-hover: #4553e8; --op-ring: 0 0 0 3px rgba(107, 120, 255, 0.32); --op-ok: #46dfa1; --op-ok-soft: rgba(70, 223, 161, 0.15); --op-ok-border: rgba(70, 223, 161, 0.5); --op-warn: #f6bf66; --op-warn-soft: rgba(246, 191, 102, 0.15); --op-warn-border: rgba(246, 191, 102, 0.45); --op-danger: #ff8a8a; --op-danger-soft: rgba(255, 138, 138, 0.15); --op-danger-border: rgba(255, 138, 138, 0.45); --op-danger-solid: #d3474d; --op-danger-solid-hover: #bd3c42; --op-info: #79a6ff; --op-info-soft: rgba(121, 166, 255, 0.15); --op-muted: #9aa2c8; --op-muted-soft: rgba(255, 255, 255, 0.07); --op-row-hover: #1c2249; --op-row-cancelled: rgba(255, 138, 138, 0.1); --op-zone-revivo: #1e234d; --op-zone-revivo-hover: #232959; --op-zone-alp: #1b2c45; --op-zone-alp-hover: #1f374e; --op-zone-control: #141939; --op-zone-control-hover: #1a2045; --op-scroll-thumb: #2c3266; --op-field-hover-border: rgba(107, 120, 255, 0.45); --op-track-off: rgba(255, 255, 255, 0.14); --op-skeleton-hi: rgba(255, 255, 255, 0.13); --op-shadow-sm: 0 1px 2px rgba(3, 5, 20, 0.4); --op-shadow-md: 0 1px 2px rgba(3, 5, 20, 0.35), 0 10px 30px -12px rgba(3, 5, 20, 0.75); --op-shadow-drawer: 0 24px 90px -18px rgba(2, 3, 14, 0.9); --bg: #0d1128; --bg-soft: #12163a; --surface: #171c3d; --surface-soft: #1e2450; --surface-muted: rgba(255, 255, 255, 0.06); --zebra: rgba(255, 255, 255, 0.06); --text: #eceffb; --ink: #eceffb; --muted: #aab2d6; --muted-soft: #808ab3; --line: #2c3266; --line-strong: rgba(107, 120, 255, 0.45); --accent: #6b78ff; --accent-dark: #949dff; --accent-soft: rgba(107, 120, 255, 0.17); --accent-soft-border: rgba(107, 120, 255, 0.45); --danger: #ff8a8a; --danger-soft: rgba(255, 138, 138, 0.15); --danger-soft-border: rgba(255, 138, 138, 0.36); --warn: #f6bf66; --warn-soft: rgba(246, 191, 102, 0.15); --warn-soft-border: rgba(246, 191, 102, 0.34); --ok: #46dfa1; --ok-soft: rgba(70, 223, 161, 0.15); --ok-soft-border: rgba(70, 223, 161, 0.34); --info: #79a6ff; --info-soft: rgba(121, 166, 255, 0.15); --info-soft-border: rgba(121, 166, 255, 0.34); --ring: rgba(107, 120, 255, 0.32); --shadow-sm: 0 1px 2px rgba(3, 5, 20, 0.4); --shadow-md: 0 1px 2px rgba(3, 5, 20, 0.35), 0 10px 30px -12px rgba(3, 5, 20, 0.75); --shadow-lg: 0 1px 2px rgba(3, 5, 20, 0.35), 0 10px 30px -12px rgba(3, 5, 20, 0.75); --shadow-xl: 0 24px 90px -18px rgba(2, 3, 14, 0.9); } body.os-app ::selection { background: var(--op-accent-solid); color: #fff; } body.os-app [hidden] { display: none !important; } body.os-app.modal-open, body.os-app.profile-open { overflow: hidden; } body.os-app .os-shell *, body.os-app .os-shell *::before, body.os-app .os-shell *::after, body.os-app .process-panel *, body.os-app .app-modal *, body.os-app .update-log-drawer *, body.os-app .flight-profile * { box-sizing: border-box; } /* ============================================================ שלד: סרגל צד + תוכן ============================================================ */ body.os-app .os-shell { display: flex; align-items: stretch; min-height: 100vh; } /* העמוד לא גולל — התוכן גולל בתוך העמודה שלו. כך פס הגלילה לא מופיע/נעלם ליד הסרגל, והסרגל נשאר באותו רוחב ומיקום בכל הדפים */ body.os-app:not(.login-page) { height: 100vh; overflow: hidden; } body.os-app:not(.login-page) .os-shell { height: 100vh; } body.os-app:not(.login-page) .os-content { height: 100vh; overflow-y: auto; overflow-x: hidden; scrollbar-gutter: stable; } /* ---------- סרגל צד ---------- */ body.os-app .os-sidebar { width: var(--os-sidebar-w); flex: none; position: sticky; top: 0; height: 100vh; overflow-y: auto; background: linear-gradient(180deg, var(--op-side-2) 0%, var(--op-side) 34%); color: #fff; display: flex; flex-direction: column; gap: 20px; padding: 22px 16px 18px; } body.os-app .os-brand { display: flex; align-items: center; gap: 11px; padding: 0 6px; } body.os-app .os-brand-mark { width: 38px; height: 38px; border-radius: 12px; background: linear-gradient(140deg, var(--op-accent), #7b5bf0); color: #fff; display: grid; place-items: center; box-shadow: 0 8px 20px -8px rgba(70, 85, 224, 0.8); flex: none; } body.os-app .os-brand-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; } body.os-app .os-brand-text strong { font-size: 16.5px; font-weight: 800; letter-spacing: -0.012em; color: #fff; direction: ltr; text-align: end; } body.os-app .os-brand-text span { font-size: 10.5px; font-weight: 600; color: rgba(255, 255, 255, 0.5); direction: rtl; text-align: start; } /* מעטפת המגירה — בדסקטופ שקופה לחלוטין (הילדים חלק מהסרגל), במובייל הופכת למגירה צדדית שנפתחת בכפתור או בהחלקה */ body.os-app .os-side-drawer { display: contents; } body.os-app .os-menu-button { display: none; appearance: none; border: 1px solid rgba(255, 255, 255, 0.14); background: transparent; color: rgba(255, 255, 255, 0.75); width: 32px; height: 32px; border-radius: 9px; align-items: center; justify-content: center; cursor: pointer; padding: 0; flex: none; margin-inline-start: auto; transition: color 140ms var(--op-ease), background 140ms var(--op-ease), transform 140ms var(--op-ease); } body.os-app .os-menu-button:active { transform: scale(0.94); } body.os-app .os-drawer-shade { position: fixed; inset: 0; z-index: 69; background: rgba(10, 12, 30, 0.5); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } @media (min-width: 641px) { body.os-app .os-drawer-shade { display: none !important; } } /* ניווט אנכי */ body.os-app .os-nav { display: flex; flex-direction: column; gap: 4px; } body.os-app .os-nav-caption { font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.38); padding: 0 13px 2px; } body.os-app .os-nav-item { appearance: none; border: 0; background: transparent; color: rgba(255, 255, 255, 0.68); font: inherit; font-size: 13.5px; font-weight: 600; display: flex; align-items: center; gap: 11px; width: 100%; padding: 10px 13px; border-radius: 11px; cursor: pointer; text-align: start; text-decoration: none; min-width: 0; transition: color 140ms var(--op-ease), background 140ms var(--op-ease), transform 140ms var(--op-ease); } body.os-app .os-nav-item svg { opacity: 0.7; flex: none; } body.os-app .os-nav-item:hover { color: #fff; background: rgba(255, 255, 255, 0.06); } body.os-app .os-nav-item:active { transform: scale(0.98); } body.os-app .os-nav-item.active, body.os-app .os-nav-item[aria-current="page"] { background: rgba(255, 255, 255, 0.1); color: #fff; box-shadow: inset -3px 0 0 var(--op-accent); } body.os-app .os-nav-item.active svg, body.os-app .os-nav-item[aria-current="page"] svg { opacity: 1; color: #98a4ff; } /* בלוק הפעולה בתחתית הסרגל (margin-top:auto דוחף למטה) */ body.os-app .os-engine { margin-top: auto; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 14px; padding: 13px 13px 14px; display: flex; flex-direction: column; gap: 11px; } body.os-app .os-engine .os-engine-field { gap: 7px; } body.os-app .os-engine .os-engine-field label { font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.45); padding-inline-start: 2px; } body.os-app .os-engine .os-engine-field select { appearance: none; -webkit-appearance: none; font: inherit; font-size: 12.5px; font-weight: 600; width: 100%; min-width: 0; color: #fff; background-color: rgba(255, 255, 255, 0.07); background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='14' height='14'%3E%3Cpath fill='%239aa3cf' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: left 10px center; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--op-r-ctl); padding: 9px 12px; padding-inline-end: 32px; outline: none; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: border-color 140ms var(--op-ease), background-color 140ms var(--op-ease), box-shadow 140ms var(--op-ease); } body.os-app .os-engine .os-engine-field select:hover { background-color: rgba(255, 255, 255, 0.11); border-color: rgba(255, 255, 255, 0.24); } body.os-app .os-engine .os-engine-field select:focus-visible { border-color: var(--op-accent); box-shadow: var(--op-ring); } body.os-app .os-engine .os-engine-field select { color-scheme: dark; } body.os-app .os-engine .os-engine-field select option { color: #fff; background: var(--op-side-2); font-weight: 500; } body.os-app .os-engine-actions { display: flex; flex-direction: column; gap: 8px; } body.os-app .os-block-button { width: 100%; justify-content: center; } body.os-app .os-ghost-dark { appearance: none; font: inherit; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--op-r-ctl); background: transparent; border: 1px solid rgba(255, 255, 255, 0.2); color: rgba(255, 255, 255, 0.85); cursor: pointer; text-decoration: none; transition: background 140ms var(--op-ease), border-color 140ms var(--op-ease), color 140ms var(--op-ease), transform 140ms var(--op-ease); } body.os-app .os-ghost-dark:hover { background: rgba(255, 255, 255, 0.08); color: #fff; } body.os-app .os-ghost-dark:active { transform: scale(0.97); } body.os-app .os-ghost-dark:disabled { opacity: 0.4; cursor: not-allowed; transform: none; } /* תחתית הסרגל: TOTP, כלי צד, משתמש, סטטוס */ body.os-app .os-side-foot { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid rgba(255, 255, 255, 0.09); padding-top: 14px; } body.os-app .os-side-foot > .os-status { max-width: none; padding: 2px 6px 0; white-space: normal; line-height: 1.5; font-size: 10.5px; } body.os-app .os-sidebar .totp-card { appearance: none; font: inherit; font-family: var(--op-font); display: flex; flex-direction: column; align-items: flex-start; gap: 0; width: 100%; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.12); color: #fff; border-radius: 12px; padding: 8px 14px 10px; cursor: pointer; position: relative; overflow: hidden; text-align: start; transition: background 140ms var(--op-ease), transform 140ms var(--op-ease); } body.os-app .os-sidebar .totp-card:hover { background: rgba(255, 255, 255, 0.11); } body.os-app .os-sidebar .totp-card:active { transform: scale(0.98); } body.os-app .os-sidebar .totp-card > span { font-size: 9.5px; font-weight: 600; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.55); text-transform: uppercase; } body.os-app .os-sidebar .totp-card strong, body.os-app .os-sidebar #totpCode { font-size: 19px; font-weight: 800; letter-spacing: 0.16em; font-variant-numeric: tabular-nums; line-height: 1.3; color: #ffffff; background: transparent; border: 0; padding: 0; } body.os-app .os-sidebar .totp-card em, body.os-app .os-sidebar #totpCountdown { font-style: normal; font-size: 10px; color: rgba(255, 255, 255, 0.55); line-height: 1.3; } body.os-app .os-sidebar .totp-card::after { content: ''; position: absolute; bottom: 0; inset-inline-start: 0; height: 3px; width: var(--otp-progress, 0%); background: linear-gradient(90deg, #7b8cff, #b39bff); transition: width 900ms linear; } body.os-app .os-sidebar .totp-card.copied { background: rgba(23, 160, 109, 0.35); border-color: rgba(126, 226, 184, 0.5); } body.os-app .os-sidebar .totp-card.warning { background: rgba(209, 61, 61, 0.25); border-color: rgba(255, 143, 143, 0.4); } /* כלי צד — כפתור שורה עם תג טקסט (Monitor / יומן) */ body.os-app .os-side-tool { appearance: none; font: inherit; font-size: 12.5px; font-weight: 600; display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 12px; border-radius: var(--op-r-ctl); background: transparent; border: 1px solid rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.75); cursor: pointer; text-align: start; min-width: 0; transition: background 140ms var(--op-ease), color 140ms var(--op-ease), border-color 140ms var(--op-ease), transform 140ms var(--op-ease); } body.os-app .os-side-tool svg { flex: none; opacity: 0.75; } body.os-app .os-side-tool:hover { color: #fff; background: rgba(255, 255, 255, 0.08); } body.os-app .os-side-tool:active { transform: scale(0.98); } body.os-app .os-side-tool-badge { margin-inline-start: auto; font-size: 10px; font-weight: 700; color: rgba(255, 255, 255, 0.8); background: rgba(255, 255, 255, 0.12); border-radius: 999px; padding: 1px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 142px; font-variant-numeric: tabular-nums; } /* זוג כלי צד — האזור מחולק לשניים, מקום מדויק לשניהם */ body.os-app .os-side-tool-pair { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 6px; } body.os-app .os-side-tool-pair .os-side-tool { width: auto; padding: 8px 9px; gap: 6px; min-width: 0; font-size: 11.5px; } body.os-app .os-side-tool-pair .os-side-tool-badge { max-width: 58px; padding: 1px 6px; } body.os-app .os-side-tool-pair .os-side-tool > span:not(.os-side-tool-badge) { white-space: nowrap; flex: none; } body.os-app .os-side-tool[aria-pressed="true"] { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.24); color: #fff; } body.os-app .process-panel.dock-user-hidden { display: none; } body.os-app .os-foot-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; } body.os-app .os-foot-links { display: flex; align-items: center; gap: 5px; flex: none; } body.os-app .os-foot-link { appearance: none; border: 1px solid rgba(255, 255, 255, 0.14); background: transparent; color: rgba(255, 255, 255, 0.65); width: 31px; height: 31px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; flex: none; position: relative; text-decoration: none; transition: color 140ms var(--op-ease), background 140ms var(--op-ease), transform 140ms var(--op-ease); } body.os-app .os-foot-link:hover { color: #fff; background: rgba(255, 255, 255, 0.1); } body.os-app .os-foot-link:active { transform: scale(0.94); } body.os-app .os-status { font-size: 11px; font-weight: 600; color: rgba(255, 255, 255, 0.6); min-width: 0; max-width: 130px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: start; background: transparent; border: 0; padding: 0; box-shadow: none; } /* תפריט משתמש בתוך הסרגל — הפופאובר נפתח כלפי מעלה */ body.os-app .os-sidebar .user-menu { position: relative; min-width: 0; flex: 1; } body.os-app .os-sidebar .user-chip { appearance: none; font: inherit; display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; background: transparent; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--op-r-ctl); color: rgba(255, 255, 255, 0.8); padding: 5px 9px; cursor: pointer; transition: background 140ms var(--op-ease), color 140ms var(--op-ease); } body.os-app .os-sidebar .user-chip:hover { background: rgba(255, 255, 255, 0.08); color: #fff; } body.os-app .os-sidebar .user-chip svg { flex: none; opacity: 0.6; } body.os-app .os-sidebar .user-chip > svg:last-child { margin-inline-start: auto; } body.os-app .os-sidebar .user-avatar { width: 24px; height: 24px; border-radius: 8px; background: linear-gradient(140deg, var(--op-accent), #7b5bf0); color: #fff; font-size: 11px; font-weight: 800; display: grid; place-items: center; flex: none; text-transform: uppercase; } body.os-app .os-sidebar .user-chip-text { display: flex; flex-direction: column; gap: 0; min-width: 0; text-align: start; } body.os-app .os-sidebar .user-chip-label { font-size: 9px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.45); } body.os-app .os-sidebar .user-chip-email { font-size: 10.5px; font-weight: 600; color: rgba(255, 255, 255, 0.8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 168px; text-align: end; } /* הפופאובר יושב בתוך הסרגל הכהה — הוא נצבע בפלטת הסרגל (--op-side-pop) ולא בפלטת התוכן הבהירה, אחרת נוצר כרטיס לבן באמצע סרגל כהה והטקסט נבלע. כל צבע כאן מפורש ולא נשען על ירושה מ-styles.css. */ body.os-app .os-sidebar .user-menu-popover { position: absolute; top: auto; margin-top: 0; bottom: calc(100% + 8px); inset-inline-start: 0; inset-inline-end: 0; min-width: 0; background: var(--op-side-pop); border: 1px solid rgba(255, 255, 255, 0.13); border-radius: 14px; box-shadow: 0 20px 48px -18px rgba(4, 6, 20, 0.9), 0 2px 8px rgba(4, 6, 20, 0.5); padding: 6px; z-index: 50; display: flex; flex-direction: column; gap: 2px; } body.os-app .os-sidebar .user-menu-item { appearance: none; font: inherit; font-size: 12.5px; font-weight: 600; display: flex; align-items: center; justify-content: flex-start; gap: 10px; width: 100%; min-height: 36px; border: 0; background: transparent; color: rgba(255, 255, 255, 0.86); border-radius: 9px; padding: 8px 11px; cursor: pointer; text-align: start; white-space: nowrap; transition: background 120ms var(--op-ease), color 120ms var(--op-ease); } body.os-app .os-sidebar .user-menu-item svg { flex: none; color: rgba(255, 255, 255, 0.5); transition: color 120ms var(--op-ease); } body.os-app .os-sidebar .user-menu-item:hover, body.os-app .os-sidebar .user-menu-item:focus-visible { background: rgba(255, 255, 255, 0.09); color: #fff; } body.os-app .os-sidebar .user-menu-item:hover svg, body.os-app .os-sidebar .user-menu-item:focus-visible svg { color: #fff; } body.os-app .os-sidebar .user-menu-item:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.5); outline-offset: -2px; } body.os-app .os-sidebar .user-menu-item-danger { color: #ffa2a2; margin-top: 3px; position: relative; } body.os-app .os-sidebar .user-menu-item-danger::before { content: ""; position: absolute; top: -3px; inset-inline: 5px; height: 1px; background: rgba(255, 255, 255, 0.1); } body.os-app .os-sidebar .user-menu-item-danger svg { color: #ff8080; } body.os-app .os-sidebar .user-menu-item-danger:hover, body.os-app .os-sidebar .user-menu-item-danger:focus-visible { background: rgba(226, 76, 76, 0.2); color: #ffd0d0; } body.os-app .os-sidebar .user-menu-item-danger:hover svg, body.os-app .os-sidebar .user-menu-item-danger:focus-visible svg { color: #ffb0b0; } body.os-app .os-sidebar .user-chip[aria-expanded="true"] { background: rgba(255, 255, 255, 0.09); border-color: rgba(255, 255, 255, 0.24); color: #fff; } body.os-app .os-sidebar .user-chip[aria-expanded="true"] > svg:last-child { transform: rotate(180deg); } body.os-app .os-sidebar .user-chip > svg:last-child { transition: transform 160ms var(--op-ease); } /* ---------- מתג בהיר/כהה ---------- */ /* הסרגל כהה בשני המצבים, ולכן הכפתור נצבע תמיד בגווני הסרגל. */ body.os-app .theme-toggle { appearance: none; font: inherit; display: inline-flex; align-items: center; gap: 6px; margin-inline-start: auto; flex: none; height: 32px; padding: 0 9px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 9px; background: transparent; color: rgba(255, 255, 255, 0.75); cursor: pointer; transition: color 140ms var(--op-ease), background 140ms var(--op-ease), transform 140ms var(--op-ease); } body.os-app .theme-toggle:hover { background: rgba(255, 255, 255, 0.09); color: #fff; border-color: rgba(255, 255, 255, 0.24); } body.os-app .theme-toggle:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.55); outline-offset: 2px; } body.os-app .theme-toggle:active { transform: scale(0.94); } body.os-app .theme-toggle-icon { display: grid; place-items: center; flex: none; } body.os-app .theme-toggle-label { display: none; } body.os-app .os-brand .theme-toggle + .os-menu-button { margin-inline-start: 6px; } /* על עמוד הכניסה אין סרגל — הכפתור צף בפינה */ body.login-page .theme-toggle-floating { position: fixed; top: 16px; inset-inline-start: 16px; z-index: 20; margin: 0; border-color: var(--op-border); background: var(--op-surface); color: var(--op-ink-2); box-shadow: var(--op-shadow-sm); } body.login-page .theme-toggle-floating:hover { background: var(--op-surface-2); border-color: var(--op-accent-border); color: var(--op-ink); } body.login-page .theme-toggle-floating:focus-visible { outline: 2px solid var(--op-accent); } /* ---------- אזור התוכן ---------- */ body.os-app .os-content { display: block; flex: 1; min-width: 0; max-width: none; margin: 0; padding: 26px 30px 96px; } body.os-app .os-view-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 16px; } body.os-app .os-view-title h1 { margin: 0; font-size: 21px; font-weight: 800; letter-spacing: -0.02em; color: var(--op-ink); } body.os-app .os-view-title p { margin: 3px 0 0; font-size: 11.5px; color: var(--op-ink-3); max-width: 640px; } body.os-app .os-view-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } /* בורר מקטעים (segmented control) בראש אזור התוכן */ body.os-app .os-seg { display: inline-flex; align-items: center; gap: 3px; background: var(--op-muted-soft); border: 1px solid var(--op-border); border-radius: 12px; padding: 3px; align-self: center; } body.os-app .os-seg-item { appearance: none; font: inherit; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--op-ink-2); padding: 7px 16px; cursor: pointer; white-space: nowrap; transition: background 140ms var(--op-ease), color 140ms var(--op-ease), box-shadow 140ms var(--op-ease), transform 140ms var(--op-ease); } body.os-app .os-seg-item svg { opacity: 0.6; flex: none; } body.os-app .os-seg-item:hover { color: var(--op-ink); } body.os-app .os-seg-item:active { transform: scale(0.97); } body.os-app .os-seg-item:focus-visible { outline: none; box-shadow: var(--op-ring); } body.os-app .os-seg-item.active { background: var(--op-surface); border-color: var(--op-border); color: var(--op-accent-strong); font-weight: 800; box-shadow: var(--op-shadow-sm); } body.os-app .os-seg-item.active svg { opacity: 1; color: var(--op-accent); } body.os-app .os-view-card { background: var(--op-surface); border: 1px solid var(--op-border); border-radius: var(--op-r-card); box-shadow: var(--op-shadow-md); overflow: hidden; display: flex; flex-direction: column; min-width: 0; } body.os-app .os-toolbar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--op-hairline); background: var(--op-surface); flex-wrap: wrap; } body.os-app .os-toolbar-spacer { flex: 1; } body.os-app .op-search-field { display: flex; align-items: center; gap: 8px; background: var(--op-surface-2); border: 1px solid var(--op-border); border-radius: var(--op-r-ctl); padding: 0 12px; height: 34px; min-width: 250px; color: var(--op-ink-3); flex: 1 1 260px; max-width: 420px; transition: border-color 140ms var(--op-ease), box-shadow 140ms var(--op-ease), background 140ms var(--op-ease); } body.os-app .op-search-field:focus-within { border-color: var(--op-accent); box-shadow: var(--op-ring); background: var(--op-surface); } body.os-app .op-search-field input { border: 0; background: transparent; outline: none; font: inherit; font-size: 12.5px; color: var(--op-ink); width: 100%; min-width: 0; padding: 0; } body.os-app .op-search-field input::placeholder { color: var(--op-ink-3); } body.os-app .op-select-field { display: flex; align-items: center; gap: 6px; height: 34px; background: var(--op-surface-2); border: 1px solid var(--op-border); border-radius: var(--op-r-ctl); padding: 0 4px 0 6px; transition: border-color 140ms var(--op-ease), box-shadow 140ms var(--op-ease); } body.os-app .op-select-field:focus-within { border-color: var(--op-accent); box-shadow: var(--op-ring); } body.os-app .op-select-field label { font-size: 11px; font-weight: 600; color: var(--op-ink-3); padding-inline-start: 8px; white-space: nowrap; } body.os-app .op-select-field select, body.os-app .op-select-field input { border: 0; background: transparent; outline: none; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--op-ink); padding: 0 6px; height: 100%; min-width: 0; cursor: pointer; } body.os-app .section-label { display: block; font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--op-ink-3); } /* ============================================================ כפתורים ============================================================ */ body.os-app .primary-button, body.os-app .secondary-button, body.os-app .danger-button { appearance: none; font: inherit; font-size: 13.5px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 18px; border-radius: var(--op-r-ctl); cursor: pointer; text-decoration: none; transition: background 140ms var(--op-ease), border-color 140ms var(--op-ease), color 140ms var(--op-ease), transform 140ms var(--op-ease), box-shadow 140ms var(--op-ease); } body.os-app .primary-button { background: var(--op-accent); border: 1px solid var(--op-accent); color: #fff; box-shadow: 0 6px 16px -8px rgba(70, 85, 224, 0.6); } body.os-app .primary-button:hover { background: var(--op-accent-strong); border-color: var(--op-accent-strong); color: #fff; } body.os-app .secondary-button { background: var(--op-surface); border: 1px solid var(--op-border); color: var(--op-ink); box-shadow: none; } body.os-app .secondary-button:hover { border-color: var(--op-accent-border); color: var(--op-accent-strong); background: var(--op-accent-soft); } body.os-app .danger-button { background: var(--op-danger-solid); border: 1px solid var(--op-danger-solid); color: #fff; } body.os-app .danger-button:hover { background: var(--op-danger-solid-hover); border-color: var(--op-danger-solid-hover); color: #fff; } body.os-app .primary-button:active, body.os-app .secondary-button:active, body.os-app .danger-button:active { transform: scale(0.97); } body.os-app .primary-button:disabled, body.os-app .secondary-button:disabled, body.os-app .danger-button:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } body.os-app .ghost-button { appearance: none; font: inherit; font-size: 12.5px; font-weight: 600; background: var(--op-surface); border: 1px solid var(--op-border); color: var(--op-ink-2); border-radius: 9px; padding: 6px 12px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; box-shadow: none; transition: color 140ms var(--op-ease), border-color 140ms var(--op-ease), background 140ms var(--op-ease), transform 140ms var(--op-ease); } body.os-app .ghost-button:hover { color: var(--op-accent-strong); border-color: var(--op-accent-border); background: var(--op-accent-soft); } body.os-app .ghost-button:active { transform: scale(0.96); } body.os-app .ghost-button:disabled { opacity: 0.45; cursor: not-allowed; transform: none; } body.os-app .ghost-button.danger-action:hover { color: var(--op-danger); border-color: var(--op-danger-border); background: var(--op-danger-soft); } body.os-app .icon-close { appearance: none; border: 1px solid var(--op-border); background: var(--op-surface); color: var(--op-ink-2); width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; cursor: pointer; flex: none; padding: 0; transition: color 140ms var(--op-ease), border-color 140ms var(--op-ease), background 140ms var(--op-ease), transform 140ms var(--op-ease); } body.os-app .icon-close:hover { color: var(--op-danger); border-color: var(--op-danger-border); background: var(--op-danger-soft); } body.os-app .icon-close:active { transform: scale(0.94); } /* כפתור "טוען" (מחלקת loading שמוזרקת מ-JS) — ספינר במקום טקסט קופץ */ body.os-app .primary-button.loading::before, body.os-app .secondary-button.loading::before, body.os-app .danger-button.loading::before { content: ''; width: 13px; height: 13px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.4); border-top-color: currentColor; animation: os-spin 700ms linear infinite; flex: none; } body.os-app .secondary-button.loading::before { border-color: var(--op-hairline); border-top-color: var(--op-accent); } @keyframes os-spin { to { transform: rotate(360deg); } } /* ============================================================ שדות וטפסים ============================================================ */ body.os-app .field { display: flex; flex-direction: column; gap: 5px; min-width: 0; } body.os-app .field label { font-size: 11.5px; font-weight: 600; color: var(--op-ink-2); } body.os-app .field input, body.os-app .field select, body.os-app .field textarea { font: inherit; font-size: 13px; color: var(--op-ink); background: var(--op-surface); border: 1px solid var(--op-border); border-radius: var(--op-r-ctl); padding: 8px 12px; outline: none; width: 100%; min-width: 0; box-sizing: border-box; transition: border-color 140ms var(--op-ease), box-shadow 140ms var(--op-ease); } body.os-app .field input:hover, body.os-app .field select:hover, body.os-app .field textarea:hover { border-color: var(--op-field-hover-border); } body.os-app .field input:focus-visible, body.os-app .field select:focus-visible, body.os-app .field textarea:focus-visible { border-color: var(--op-accent); box-shadow: var(--op-ring); } body.os-app .field input:disabled, body.os-app .field select:disabled, body.os-app .field textarea:disabled { background: var(--op-muted-soft); color: var(--op-ink-3); cursor: not-allowed; } body.os-app .field textarea { resize: vertical; min-height: 90px; line-height: 1.6; } body.os-app .secret-status { font-size: 10px; font-weight: 700; border-radius: 999px; padding: 1px 8px; background: var(--op-muted-soft); color: var(--op-muted); } body.os-app .secret-status.configured { background: var(--op-ok-soft); color: var(--op-ok); } body.os-app .toggle { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--op-ink); cursor: pointer; } body.os-app .toggle input { accent-color: var(--op-accent); cursor: pointer; } /* ============================================================ תגי סטטוס ============================================================ */ body.os-app .status-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 3px 10px; white-space: nowrap; line-height: 1.5; } body.os-app .status-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; } body.os-app .status-ok { background: var(--op-ok-soft); color: var(--op-ok); } body.os-app .status-warn { background: var(--op-warn-soft); color: var(--op-warn); } body.os-app .status-danger { background: var(--op-danger-soft); color: var(--op-danger); } body.os-app .status-info { background: var(--op-info-soft); color: var(--op-info); } body.os-app .status-muted { background: var(--op-muted-soft); color: var(--op-muted); } body.os-app .badge { font-size: 11px; font-weight: 700; border-radius: 999px; padding: 3px 10px; line-height: 1.5; } body.os-app .muted { color: var(--op-ink-3); } body.os-app .code, body.os-app .number { font-variant-numeric: tabular-nums; font-family: var(--op-font); } /* ============================================================ פס מדדים (מוזרק מ-JS: .metric עם strong+span) ============================================================ */ body.os-app .metrics { display: flex; flex-wrap: wrap; align-items: stretch; background: var(--op-surface); border: 1px solid var(--op-border); border-radius: 12px; box-shadow: var(--op-shadow-sm); overflow: hidden; margin: 0 0 16px; padding: 0; gap: 0; } body.os-app .metrics:empty { display: none; } body.os-app .metric { flex: 1 1 0; min-width: 96px; display: flex; flex-direction: column-reverse; justify-content: center; gap: 1px; background: transparent; border: 0; border-inline-start: 1px solid var(--op-hairline); border-radius: 0; padding: 10px 16px; margin: 0; box-shadow: none; min-width: 0; text-align: start; } body.os-app .metric:first-child { border-inline-start: 0; } body.os-app .metric strong { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; line-height: 1.3; color: var(--op-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.os-app .metric span { font-size: 10.5px; font-weight: 600; color: var(--op-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.os-app .metric.success strong { color: var(--op-ok); } body.os-app .metric.warning strong { color: var(--op-warn); } body.os-app .metric.danger strong { color: var(--op-danger); } body.os-app .metric::before { display: none; } body.os-app .metric:hover { transform: none; box-shadow: none; } /* ============================================================ טבלאות (orders-table — משמש גם את notifications) ============================================================ */ body.os-app .orders-table-wrap { overflow: auto; } body.os-app .orders-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12.5px; min-width: 0; } body.os-app .orders-table thead th { position: sticky; top: 0; z-index: 5; background: var(--op-surface-2); color: var(--op-ink-3); font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; text-align: start; padding: 9px 12px; border-bottom: 1px solid var(--op-border); white-space: nowrap; } body.os-app .orders-table tbody td { background: var(--op-surface); border-bottom: 1px solid var(--op-hairline); padding: 11px 12px; vertical-align: top; color: var(--op-ink); line-height: 1.5; transition: background 120ms var(--op-ease); } body.os-app .orders-table tbody tr:last-child td { border-bottom: 0; } body.os-app .orders-table tbody tr:hover td { background: var(--op-row-hover); } /* ============================================================ Process Monitor — דוק קבוע בתחתית אזור התוכן ============================================================ */ body.os-app .process-panel { position: fixed; bottom: 0; inset-inline-start: var(--os-sidebar-w); inset-inline-end: 0; z-index: 45; background: var(--op-surface); border: 0; border-top: 1px solid var(--op-border); border-radius: 0; box-shadow: 0 -10px 40px -18px rgba(19, 23, 53, 0.35); display: flex; flex-direction: column; padding: 0; margin: 0; } body.os-app .process-panel .process-progress { height: 3px; background: var(--op-hairline); position: relative; order: 2; border-radius: 0; overflow: visible; margin: 0; } body.os-app .process-panel .process-progress span { position: absolute; top: 0; bottom: 0; inset-inline-start: 0; width: 0; background: linear-gradient(90deg, var(--op-accent), #7b5bf0); transition: width 400ms var(--op-ease); border-radius: 0; } body.os-app .process-panel .process-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 9px 20px; padding-inline-end: 112px; order: 3; border: 0; background: transparent; margin: 0; } body.os-app .process-head-title { display: flex; align-items: center; gap: 12px; min-width: 0; } body.os-app .op-live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--op-accent); animation: op-pulse 1.8s var(--op-ease) infinite; flex: none; } body.os-app .process-panel[data-status="completed"] .op-live-dot { background: var(--op-ok); animation: none; } body.os-app .process-panel[data-status="failed"] .op-live-dot, body.os-app .process-panel[data-status="cancelled"] .op-live-dot { background: var(--op-danger); animation: none; } @keyframes op-pulse { 0% { box-shadow: 0 0 0 0 rgba(70, 85, 224, 0.35); } 70% { box-shadow: 0 0 0 8px rgba(70, 85, 224, 0); } 100% { box-shadow: 0 0 0 0 rgba(70, 85, 224, 0); } } body.os-app .process-head-text { min-width: 0; } body.os-app .process-panel .process-head h2 { margin: 0; font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--op-ink); } body.os-app .process-head-actions { display: flex; align-items: center; gap: 8px; } body.os-app .process-state { display: flex; align-items: center; gap: 10px; background: transparent; border: 0; border-radius: 0; padding: 0; max-width: 420px; overflow: hidden; } body.os-app .process-state span { background: transparent; border: 0; border-radius: 0; padding: 0; color: var(--op-ink-2); font-size: 12px; font-weight: 600; max-width: 300px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.os-app .process-state strong { display: inline-block; background: var(--op-accent-solid); color: #ffffff; border-radius: 8px; padding: 3px 10px; min-width: 0; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.4; } body.os-app .process-panel[data-status="completed"] .process-state strong { background: var(--op-ok); color: var(--op-bg); } body.os-app .process-panel[data-status="cancelling"] .process-state strong { background: var(--op-warn); color: var(--op-bg); } body.os-app .process-panel[data-status="failed"] .process-state strong, body.os-app .process-panel[data-status="cancelled"] .process-state strong { background: var(--op-danger); color: var(--op-bg); } body.os-app .process-panel .process-terminal { background: #0f1226; color: #cdd3ee; font-family: "Cascadia Mono", Consolas, "Courier New", monospace; font-size: 11.5px; line-height: 1.7; padding: 14px 18px; height: 40vh; max-height: 420px; overflow-y: auto; text-align: left; order: 1; border-radius: 0; margin: 0; } body.os-app .process-panel.collapsed .process-terminal { display: none; } body.os-app .terminal-line { display: flex; gap: 10px; align-items: baseline; } body.os-app .terminal-time { color: #5b6394; flex: none; font-variant-numeric: tabular-nums; } body.os-app .terminal-prompt { color: #7b8cff; flex: none; } body.os-app .terminal-message { overflow-wrap: anywhere; } body.os-app .terminal-success .terminal-message { color: #6fdcae; } body.os-app .terminal-warn .terminal-message { color: #f0c674; } body.os-app .terminal-error .terminal-message { color: #ff8f8f; } /* ============================================================ מודאלים (app-modal — index + deal-ideas) ============================================================ */ body.os-app .app-modal { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 28px 20px; } body.os-app .app-modal-backdrop { position: absolute; inset: 0; background: rgba(19, 23, 53, 0.45); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); animation: op-fade-in 200ms var(--op-ease); } @keyframes op-fade-in { from { opacity: 0; } to { opacity: 1; } } body.os-app .app-modal-card { position: relative; z-index: 1; width: min(720px, 100%); max-height: min(88vh, 920px); background: var(--op-surface); border: 0; border-radius: 20px; box-shadow: var(--op-shadow-drawer); display: flex; flex-direction: column; overflow: hidden; font-family: var(--op-font); animation: os-modal-in 240ms var(--op-ease); } @keyframes os-modal-in { from { transform: scale(0.97) translateY(10px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } } body.os-app .app-modal-card-small { width: min(520px, 100%); } body.os-app .app-modal-card-medium { width: min(720px, 100%); } body.os-app .app-modal-card-large { width: min(940px, 100%); } body.os-app .app-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 15px 22px; border-bottom: 1px solid var(--op-hairline); background: var(--op-surface-2); flex: none; } body.os-app .app-modal-head-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } body.os-app .app-modal-head h2 { margin: 0; font-size: 16px; font-weight: 800; color: var(--op-ink); } body.os-app .app-modal-head p { margin: 2px 0 0; font-size: 11.5px; line-height: 1.6; color: var(--op-ink-3); max-width: 560px; } body.os-app .app-modal-body { flex: 1; padding: 18px 22px; min-height: 0; } body.os-app .app-modal-body-scroll { overflow-y: auto; overflow-x: hidden; } body.os-app .app-modal-footer { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 13px 22px; border-top: 1px solid var(--op-hairline); background: var(--op-surface-2); flex: none; } body.os-app .app-modal-footer > span { margin-inline-end: auto; font-size: 11.5px; color: var(--op-ink-3); min-width: 0; } /* ============================================================ מגירות (יומן תיקונים + פרופיל טיסה/דיל) ============================================================ */ body.os-app .drawer-backdrop { position: fixed; inset: 0; z-index: 60; background: rgba(19, 23, 53, 0.45); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); animation: op-fade-in 200ms var(--op-ease); } body.os-app .update-log-drawer { position: fixed; top: 0; bottom: 0; left: auto; right: auto; inset-inline-end: 0; z-index: 61; width: min(760px, 96vw); display: flex; background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 0; } body.os-app .update-log-panel { background: var(--op-surface); flex: 1; display: flex; flex-direction: column; min-width: 0; box-shadow: var(--op-shadow-drawer); border-inline-start: 1px solid var(--op-border); animation: op-drawer-in 340ms var(--op-ease-drawer); border-radius: 0; padding: 0; max-width: none; } @keyframes op-drawer-in { from { transform: translateX(-40px); opacity: 0.4; } to { transform: translateX(0); opacity: 1; } } body.os-app .log-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 22px; border-bottom: 1px solid var(--op-hairline); flex: none; background: var(--op-surface); position: static; } /* פרופיל טיסה/דיל — חלונית ממורכזת (הוסב ממגירה צדדית, 24/08/2026) */ body.os-app .flight-profile { position: fixed; inset: 0; z-index: 61; display: flex; align-items: center; justify-content: center; padding: 28px 20px; pointer-events: none; width: auto; max-width: none; left: 0; right: 0; background: transparent; border: 0; box-shadow: none; transform: none; } body.os-app .flight-profile .profile-shell { pointer-events: auto; width: min(960px, 100%); max-height: min(90vh, 940px); background: var(--op-surface); border: 0; border-radius: 20px; box-shadow: var(--op-shadow-drawer); display: flex; flex-direction: column; min-width: 0; max-width: none; overflow: hidden; padding: 0; margin: 0; gap: 0; animation: os-modal-in 240ms var(--op-ease); } body.os-app .flight-profile .profile-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 22px; margin: 0; border-bottom: 1px solid var(--op-hairline); background: var(--op-surface-2); flex: none; position: static; box-shadow: none; } body.os-app .log-header h2 { margin: 0; font-size: 16px; font-weight: 800; color: var(--op-ink); } body.os-app .log-header-actions { display: flex; align-items: center; gap: 8px; } body.os-app .log-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 9px 22px; border-bottom: 1px solid var(--op-hairline); background: var(--op-surface-2); flex: none; } body.os-app .log-toolbar-field { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: var(--op-ink-3); background: var(--op-surface); border: 1px solid var(--op-border); border-radius: var(--op-r-ctl); padding: 0 9px; height: 32px; white-space: nowrap; } body.os-app .log-toolbar-field:focus-within { border-color: var(--op-accent); box-shadow: var(--op-ring); } body.os-app .log-toolbar-field input { border: 0; background: transparent; font: inherit; font-size: 11.5px; color: var(--op-ink); padding: 0; outline: none; width: 104px; min-width: 0; } body.os-app .log-toolbar-spacer { flex: 1; } body.os-app .log-toolbar-range { font-size: 11.5px; color: var(--op-ink-3); font-variant-numeric: tabular-nums; } body.os-app .update-log { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 16px 22px 26px; background: var(--op-bg); } body.os-app .flight-profile .profile-content { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 18px 22px 24px; margin: 0; display: flex; flex-direction: column; gap: 14px; } body.os-app .flight-profile .profile-content > * { flex: none; } body.os-app .profile-top .section-label { font-size: 14px; font-weight: 800; letter-spacing: -0.01em; text-transform: none; color: var(--op-ink); } /* --- רכיבי הפרופיל (fp-*) — סידור מחדש בשפת החלונית --- */ body.os-app .fp-hero { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; background: linear-gradient(135deg, #f1f3ff, #fafbff); border: 1px solid var(--op-accent-border); border-radius: 16px; padding: 15px 20px; margin: 0; } body.os-app .fp-hero-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; } body.os-app .fp-hero-eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--op-accent-strong); } body.os-app .fp-hero-route { display: flex; align-items: center; gap: 10px; font-size: 26px; font-weight: 800; letter-spacing: -0.02em; color: var(--op-ink); } body.os-app .fp-arrow { width: 30px; height: 15px; color: var(--op-accent); flex: none; } body.os-app .fp-hero-meta { display: flex; gap: 22px; margin: 0; flex-wrap: wrap; } body.os-app .fp-meta-item { display: flex; flex-direction: column; gap: 1px; } body.os-app .fp-meta-item dt { font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--op-ink-3); } body.os-app .fp-meta-item dd { margin: 0; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--op-ink); white-space: nowrap; } body.os-app .fp-hero-badges { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; } body.os-app .fp-chip { font-size: 10.5px; font-weight: 600; color: var(--op-ink-2); background: var(--op-surface); border: 1px solid var(--op-border); border-radius: 999px; padding: 2px 10px; white-space: nowrap; } body.os-app .fp-compare { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; background: var(--op-surface); border: 1px solid var(--op-border); border-radius: 14px; overflow: hidden; margin: 0; box-shadow: var(--op-shadow-sm); } body.os-app .fp-compare-side { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 14px 18px; text-align: center; background: transparent; border: 0; } body.os-app .fp-side-label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--op-ink-3); } body.os-app .fp-side-value { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--op-ink); } body.os-app .fp-side-sub { font-size: 10.5px; color: var(--op-ink-3); } body.os-app .fp-compare-delta { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 14px 28px; min-width: 150px; background: var(--op-surface-2); border: 0; border-inline: 1px solid var(--op-hairline); } body.os-app .fp-delta-label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--op-ink-3); } body.os-app .fp-delta-value { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; } body.os-app .fp-delta-caption { font-size: 10.5px; font-weight: 600; color: var(--op-ink-3); } body.os-app .fp-delta-success .fp-delta-value { color: var(--op-ok); } body.os-app .fp-delta-warning .fp-delta-value { color: var(--op-warn); } body.os-app .fp-delta-neutral .fp-delta-value { color: var(--op-ink-3); } body.os-app .fp-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; } body.os-app .fp-panel { border: 1px solid var(--op-hairline); border-radius: 14px; background: var(--op-surface-2); overflow: hidden; padding: 0; margin: 0; min-width: 0; } body.os-app .fp-panel-revivo { border-top: 3px solid var(--op-accent); } body.os-app .fp-panel-alp { border-top: 3px solid var(--op-ok); } body.os-app .fp-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 15px; border-bottom: 1px solid var(--op-hairline); background: var(--op-surface); } body.os-app .fp-panel-head h3 { margin: 0; font-size: 12.5px; font-weight: 800; color: var(--op-ink); } body.os-app .fp-panel-tag { font-size: 10px; font-weight: 700; color: var(--op-ink-2); background: var(--op-muted-soft); border-radius: 999px; padding: 2px 9px; white-space: nowrap; } body.os-app .fp-edit-link { font-size: 11.5px; font-weight: 700; color: var(--op-accent-strong); text-decoration: none; white-space: nowrap; } body.os-app .fp-edit-link:hover { text-decoration: underline; } body.os-app .fp-stats { margin: 0; padding: 12px 14px 14px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } body.os-app .fp-stat { background: var(--op-surface); border: 1px solid var(--op-hairline); border-radius: 10px; padding: 8px 11px; display: flex; flex-direction: column; gap: 1px; min-width: 0; } body.os-app .fp-stat dt { font-size: 10px; font-weight: 600; color: var(--op-ink-3); } body.os-app .fp-stat dd { margin: 0; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--op-ink); overflow-wrap: anywhere; } body.os-app .fp-stat-hero { grid-column: 1 / -1; background: var(--op-accent-soft); border-color: var(--op-accent-border); } body.os-app .fp-stat-hero dd { font-size: 17px; color: var(--op-accent-strong); } body.os-app .fp-stat-wide { grid-column: 1 / -1; } body.os-app .fp-subhead { padding: 0 14px; font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--op-ink-3); } body.os-app .fp-blocks { border: 1px solid var(--op-hairline); border-radius: 14px; background: var(--op-surface); overflow: hidden; margin: 0; padding: 0; } body.os-app .fp-blocks-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 15px; border-bottom: 1px solid var(--op-hairline); background: var(--op-surface-2); } body.os-app .fp-blocks-head h3 { margin: 0; font-size: 12.5px; font-weight: 800; color: var(--op-ink); } body.os-app .fp-blocks-scroll { overflow-x: auto; } body.os-app .fp-blocks-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12px; min-width: 0; } body.os-app .fp-blocks-table th { background: var(--op-surface); color: var(--op-ink-3); font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; text-align: start; padding: 8px 12px; border-bottom: 1px solid var(--op-hairline); white-space: nowrap; } body.os-app .fp-blocks-table td { padding: 8px 12px; border-bottom: 1px solid var(--op-hairline); font-variant-numeric: tabular-nums; color: var(--op-ink); background: var(--op-surface); } body.os-app .fp-blocks-table tr:last-child td { border-bottom: 0; } body.os-app .mini-table-wrap { overflow-x: auto; padding: 0 14px 14px; } body.os-app .mini-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 11.5px; background: var(--op-surface); border: 1px solid var(--op-hairline); border-radius: 10px; overflow: hidden; } body.os-app .mini-table th { background: var(--op-surface-2); color: var(--op-ink-3); font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; text-align: start; padding: 6px 10px; border-bottom: 1px solid var(--op-hairline); } body.os-app .mini-table td { padding: 6px 10px; border-bottom: 1px solid var(--op-hairline); font-variant-numeric: tabular-nums; } body.os-app .mini-table tr:last-child td { border-bottom: 0; } body.os-app .deal-alert-panel { display: flex; flex-direction: column; gap: 5px; background: var(--op-warn-soft); border: 1px solid var(--op-warn-border); border-inline-start: 3px solid var(--op-warn); border-radius: 12px; padding: 12px 16px; margin: 0; } body.os-app .deal-alert-panel strong { font-size: 13px; color: var(--op-warn); } body.os-app .deal-alert-panel span { font-size: 12px; color: var(--op-ink-2); line-height: 1.6; } body.os-app .deal-notes { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; } body.os-app .deal-note { background: var(--op-surface-2); border: 1px solid var(--op-hairline); border-radius: 10px; padding: 9px 12px; font-size: 12px; color: var(--op-ink-2); line-height: 1.6; list-style: none; } @media (max-width: 980px) { body.os-app .fp-panels { grid-template-columns: minmax(0, 1fr); } body.os-app .fp-compare { grid-template-columns: minmax(0, 1fr); } body.os-app .fp-compare-delta { border-inline: 0; border-block: 1px solid var(--op-hairline); min-width: 0; } body.os-app .fp-hero-badges { align-items: flex-start; } } @media (max-width: 640px) { body.os-app .flight-profile { padding: 10px 8px; } body.os-app .profile-shell { max-height: 94vh; } body.os-app .fp-hero-route { font-size: 20px; } body.os-app .fp-stats { grid-template-columns: minmax(0, 1fr); } } /* ============================================================ מצבי ריק, טעינה ושגיאה ============================================================ */ body.os-app .empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; color: var(--op-ink-3); font-size: 12.5px; padding: 44px 20px; background: transparent; border: 0; } body.os-app .empty strong { color: var(--op-ink-2); font-size: 13.5px; font-weight: 700; } body.os-app .empty.small-empty { padding: 20px 14px; font-size: 11.5px; } body.os-app .loading-spinner { width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid var(--op-hairline); border-top-color: var(--op-accent); animation: os-spin 700ms linear infinite; margin-bottom: 6px; } body.os-app .error { background: var(--op-danger-soft); border: 1px solid var(--op-danger-border); color: var(--op-danger); border-radius: 12px; padding: 12px 16px; font-size: 12.5px; overflow-wrap: anywhere; } /* ============================================================ פסי גלילה מעודנים ============================================================ */ body.os-app .os-content::-webkit-scrollbar, body.os-app .os-sidebar::-webkit-scrollbar, body.os-app .process-terminal::-webkit-scrollbar, body.os-app .app-modal-body-scroll::-webkit-scrollbar, body.os-app .update-log::-webkit-scrollbar, body.os-app .profile-content::-webkit-scrollbar, body.os-app .orders-table-wrap::-webkit-scrollbar, body.os-app .sync-grid-wrap::-webkit-scrollbar { width: 9px; height: 9px; } body.os-app .os-content::-webkit-scrollbar-thumb, body.os-app .app-modal-body-scroll::-webkit-scrollbar-thumb, body.os-app .update-log::-webkit-scrollbar-thumb, body.os-app .profile-content::-webkit-scrollbar-thumb, body.os-app .orders-table-wrap::-webkit-scrollbar-thumb, body.os-app .sync-grid-wrap::-webkit-scrollbar-thumb { background: var(--op-scroll-thumb); border-radius: 999px; border: 2px solid transparent; background-clip: content-box; } body.os-app .os-sidebar::-webkit-scrollbar-thumb, body.os-app .process-terminal::-webkit-scrollbar-thumb { background: #333a66; border-radius: 999px; border: 2px solid transparent; background-clip: content-box; } body.os-app .os-content::-webkit-scrollbar-track, body.os-app .os-sidebar::-webkit-scrollbar-track, body.os-app .process-terminal::-webkit-scrollbar-track, body.os-app .app-modal-body-scroll::-webkit-scrollbar-track, body.os-app .update-log::-webkit-scrollbar-track, body.os-app .profile-content::-webkit-scrollbar-track, body.os-app .orders-table-wrap::-webkit-scrollbar-track, body.os-app .sync-grid-wrap::-webkit-scrollbar-track { background: transparent; } /* ============================================================ דשבורד (index.html) — דוחות, גרידים, מוניטור, פרויקטים ============================================================ */ /* הדוח: כל פרויקט הוא כרטיס בשפת os-view-card */ body.os-app .workspace { display: flex; flex-direction: column; gap: 16px; background: transparent; border: 0; padding: 0; box-shadow: none; } body.os-app .workspace > .empty { background: var(--op-surface); border: 1px solid var(--op-border); border-radius: var(--op-r-card); box-shadow: var(--op-shadow-md); } body.os-app .project { background: var(--op-surface); border: 1px solid var(--op-border); border-radius: var(--op-r-card); box-shadow: var(--op-shadow-md); overflow: hidden; padding: 0; margin: 0; display: flex; flex-direction: column; min-width: 0; } body.os-app .project-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 14px 18px; background: var(--op-surface-2); border-bottom: 1px solid var(--op-hairline); margin: 0; } body.os-app .project-heading h2 { margin: 0; font-size: 15px; font-weight: 800; letter-spacing: -0.01em; color: var(--op-ink); } body.os-app .project-side { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-width: 0; } body.os-app .project-summary { font-size: 11.5px; color: var(--op-ink-2); } body.os-app .project-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } body.os-app .project-actions-info { font-size: 11px; font-weight: 600; color: var(--op-ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; } body.os-app .delete-mode-note { font-size: 10.5px; font-weight: 700; color: var(--op-danger); background: var(--op-danger-soft); border-radius: 999px; padding: 2px 9px; white-space: nowrap; } body.os-app .filter-button { appearance: none; font: inherit; font-size: 11.5px; font-weight: 600; background: var(--op-surface); border: 1px solid var(--op-border); color: var(--op-ink-2); border-radius: 999px; padding: 4px 12px; cursor: pointer; transition: color 140ms var(--op-ease), border-color 140ms var(--op-ease), background 140ms var(--op-ease); } body.os-app .filter-button:hover { color: var(--op-accent-strong); border-color: var(--op-accent-border); background: var(--op-accent-soft); } body.os-app .filter-button.active { background: var(--op-accent); border-color: var(--op-accent); color: #fff; } /* הגריד — כותרות בסגנון טבלת orders */ body.os-app .sync-grid-wrap { overflow: auto; background: var(--op-surface); border: 0; border-radius: 0; padding: 0; margin: 0; } body.os-app .sync-grid, body.os-app .deals-grid { font-size: 12.5px; border: 0; border-radius: 0; background: transparent; } body.os-app .grid-header > div, body.os-app .deals-grid-header > div { background: var(--op-surface-2); color: var(--op-ink-3); font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; border-bottom: 1px solid var(--op-border); white-space: nowrap; } body.os-app .grid-header, body.os-app .deals-grid-header { position: sticky; top: 0; z-index: 5; } body.os-app .grid-row > div { border-bottom: 1px solid var(--op-hairline); background: var(--op-surface); transition: background 120ms var(--op-ease); } body.os-app .grid-row:hover > div { background: var(--op-row-hover); } body.os-app .grid-row:last-child > div { border-bottom: 0; } /* כותרת הדשבורד — גריד 3 עמודות: הבורר מקובע למרכז האמיתי של השורה, ולא זז כשכפתורי הפעולה מופיעים/נעלמים במעבר בין טיסות לדילים */ body.dashboard-page .os-view-head { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px 18px; } body.dashboard-page .os-view-head .os-seg { grid-column: 2; justify-self: center; } body.dashboard-page .os-view-head .os-view-actions { grid-column: 3; justify-self: end; } body.dashboard-page .os-view-title #status { min-height: 18px; } /* אזורי הצבע — גוונים שקטים בפלטה החדשה */ body.os-app .grid-row > .revivo-zone { background: var(--op-zone-revivo); } body.os-app .grid-row > .alp-zone { background: var(--op-zone-alp); } body.os-app .grid-row:hover > .revivo-zone { background: var(--op-zone-revivo-hover); } body.os-app .grid-row:hover > .alp-zone { background: var(--op-zone-alp-hover); } body.os-app .grid-row > .control-zone, body.os-app .deals-grid-row > .control-zone { background: var(--op-zone-control); } body.os-app .grid-header > .control-zone, body.os-app .deals-grid-header > .control-zone { background: var(--op-surface-2); } body.os-app .grid-row:hover > .control-zone, body.os-app .deals-grid-row:hover > .control-zone { background: var(--op-zone-control-hover); } body.os-app .deals-grid-row > .revivo-zone { background: var(--op-zone-revivo); } body.os-app .deals-grid-row > .alp-zone { background: var(--op-zone-alp); } body.os-app .deals-grid-header > .revivo-zone, body.os-app .deals-grid-header > .alp-zone, body.os-app .grid-header > .revivo-zone, body.os-app .grid-header > .alp-zone { background: var(--op-surface-2); } body.os-app .deals-grid-row > div { border-bottom: 1px solid var(--op-hairline); background: var(--op-surface); transition: background 120ms var(--op-ease); } body.os-app .deals-grid-row:hover > div { background: var(--op-row-hover); } body.os-app .deals-grid-row:hover > .revivo-zone { background: var(--op-zone-revivo-hover); } body.os-app .deals-grid-row:hover > .alp-zone { background: var(--op-zone-alp-hover); } body.os-app .row-number { color: var(--op-ink-3); font-variant-numeric: tabular-nums; } body.os-app .clear-row { color: var(--op-ink-3); } body.os-app .grid-row input[type="checkbox"], body.os-app .select-all-box input[type="checkbox"] { accent-color: var(--op-accent); cursor: pointer; } body.os-app .select-project-button { appearance: none; font: inherit; font-size: 10.5px; font-weight: 700; background: var(--op-surface); border: 1px solid var(--op-border); color: var(--op-ink-2); border-radius: 7px; padding: 2px 8px; cursor: pointer; transition: color 120ms var(--op-ease), border-color 120ms var(--op-ease), background 120ms var(--op-ease); } body.os-app .select-project-button:hover { color: var(--op-accent-strong); border-color: var(--op-accent-border); background: var(--op-accent-soft); } /* כיולי רוחב — אפס גלילה אופקית ב-1440px עם הסרגל (תוכן נטו ‎1114px‎). הסנכרון: מינימום העמודות הוא 1080 — ה-min-width 1116 המקורי מיותר. הדילים: מינימום העמודות המקורי 1206 — מהודק ל-1096. */ body.os-app .sync-grid { min-width: 1080px; } body.os-app .deals-grid { min-width: 1080px; } body.os-app .deals-grid-header, body.os-app .deals-grid-row { grid-template-columns: 80px minmax(120px, 0.95fr) 84px minmax(88px, 0.8fr) minmax(150px, 1.1fr) 56px 62px 104px 124px 102px minmax(96px, 0.85fr); } body.os-app .deals-grid-header > div, body.os-app .deals-grid-row > div { padding-inline: 8px; } /* פופאובר הבלוקים */ body.os-app .block-code-button { font-family: var(--op-font); border-radius: 8px; } body.os-app .block-popover { background: var(--op-surface); border: 1px solid var(--op-border); border-radius: 12px; box-shadow: var(--op-shadow-drawer); } /* ============================================================ deal-ideas — פס סינון עצמאי, דיאלוג תבניות, כרטיסי רעיונות ============================================================ */ body.os-app .os-toolbar-card { border: 1px solid var(--op-border); border-radius: var(--op-r-card); border-bottom: 1px solid var(--op-border); box-shadow: var(--op-shadow-sm); margin-bottom: 16px; } body.deal-ideas-page .deal-ideas-workspace { display: flex; flex-direction: column; gap: 16px; } body.os-app .template-choice-backdrop { position: fixed; inset: 0; z-index: 62; background: rgba(19, 23, 53, 0.45); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); animation: op-fade-in 200ms var(--op-ease); } body.os-app .template-choice-dialog { position: fixed; inset: 0; z-index: 63; display: flex; align-items: center; justify-content: center; padding: 28px 20px; pointer-events: none; background: transparent; border: 0; } body.os-app .template-choice-panel { pointer-events: auto; width: min(560px, 100%); max-height: min(88vh, 720px); background: var(--op-surface); border-radius: 20px; box-shadow: var(--op-shadow-drawer); display: flex; flex-direction: column; overflow: hidden; animation: os-modal-in 240ms var(--op-ease); } body.os-app .template-choice-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 15px 22px; border-bottom: 1px solid var(--op-hairline); background: var(--op-surface-2); flex: none; } body.os-app .template-choice-head h2 { margin: 0; font-size: 16px; font-weight: 800; color: var(--op-ink); } body.os-app .template-choice-body { flex: 1; overflow-y: auto; padding: 18px 22px; display: flex; flex-direction: column; gap: 14px; } body.os-app .template-choice-preview { display: flex; flex-direction: column; gap: 10px; } body.os-app .template-choice-preview > div { display: flex; flex-direction: column; gap: 4px; } body.os-app .template-choice-preview span { font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--op-ink-3); } body.os-app .template-choice-preview pre { margin: 0; padding: 10px 13px; background: #0f1226; color: #cdd3ee; font-family: "Cascadia Mono", Consolas, "Courier New", monospace; font-size: 11px; line-height: 1.6; border-radius: 10px; overflow: auto; max-height: 120px; text-align: left; white-space: pre-wrap; overflow-wrap: anywhere; } body.os-app .template-choice-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 13px 22px; border-top: 1px solid var(--op-hairline); background: var(--op-surface-2); flex: none; } body.os-app .template-choice-actions > span { margin-inline-end: auto; font-size: 11.5px; font-weight: 600; color: var(--op-ink-3); } body.os-app .template-manager-toolbar { display: flex; align-items: flex-end; gap: 10px; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--op-hairline); } body.os-app .template-manager-toolbar .field { flex: 1; } body.os-app .deal-template-form { display: flex; flex-direction: column; gap: 12px; } body.os-app .template-feature-control { display: flex; align-items: center; gap: 8px; } body.os-app .template-feature-control select { flex: 1; } body.os-app .template-message[data-tone="success"] { color: var(--op-ok); font-weight: 600; } body.os-app .template-message[data-tone="danger"] { color: var(--op-danger); font-weight: 600; } /* ============================================================ notifications — כרטיסי דיווחים, טוקנים, פירוט ============================================================ */ body.notifications-page .os-content { display: flex; flex-direction: column; gap: 16px; } body.notifications-page .os-side-foot { margin-top: auto; } body.notifications-page .os-view-head { margin-bottom: 0; } body.notifications-page .notification-card { background: var(--op-surface); border: 1px solid var(--op-border); border-radius: var(--op-r-card); box-shadow: var(--op-shadow-md); padding: 16px 20px 18px; display: flex; flex-direction: column; gap: 12px; min-width: 0; margin: 0; } body.notifications-page .notification-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 0; } body.notifications-page .notification-card-head h2 { margin: 0; font-size: 15px; font-weight: 800; letter-spacing: -0.01em; color: var(--op-ink); } body.notifications-page .notification-card-head p { margin: 2px 0 0; font-size: 11.5px; color: var(--op-ink-3); max-width: 560px; } body.notifications-page .notification-card-head code { font-size: 11px; background: var(--op-muted-soft); border-radius: 6px; padding: 1px 6px; direction: ltr; display: inline-block; } body.notifications-page .notification-card .orders-table-wrap { border: 1px solid var(--op-hairline); border-radius: 12px; overflow: auto; } body.notifications-page .token-form { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; } body.notifications-page .token-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; } body.notifications-page .token-field > span { font-size: 11.5px; font-weight: 600; color: var(--op-ink-2); } body.notifications-page .token-field select, body.notifications-page .token-field input { font: inherit; font-size: 13px; color: var(--op-ink); background: var(--op-surface); border: 1px solid var(--op-border); border-radius: var(--op-r-ctl); padding: 8px 12px; outline: none; min-width: 0; height: 37px; box-sizing: border-box; transition: border-color 140ms var(--op-ease), box-shadow 140ms var(--op-ease); } body.notifications-page .token-field select:focus-visible, body.notifications-page .token-field input:focus-visible { border-color: var(--op-accent); box-shadow: var(--op-ring); } body.notifications-page .token-field-grow { flex: 1 1 240px; } body.notifications-page .token-result { background: var(--op-accent-soft); border: 1px solid var(--op-accent-border); border-radius: 12px; padding: 13px 16px; display: flex; flex-direction: column; gap: 9px; } body.notifications-page .token-result p { margin: 0; font-size: 12px; color: var(--op-ink-2); } body.notifications-page .token-result-warning { font-size: 12.5px; font-weight: 600; color: var(--op-accent-strong); } body.notifications-page .token-copy-row { display: flex; align-items: center; gap: 8px; } body.notifications-page .token-copy-row input { flex: 1; min-width: 0; font-family: "Cascadia Mono", Consolas, "Courier New", monospace; font-size: 11.5px; color: var(--op-ink); background: var(--op-surface); border: 1px solid var(--op-border); border-radius: var(--op-r-ctl); padding: 8px 11px; outline: none; } body.notifications-page .token-snippet summary { cursor: pointer; font-size: 11.5px; font-weight: 600; color: var(--op-ink-2); user-select: none; } body.notifications-page .token-snippet summary:hover { color: var(--op-accent-strong); } body.notifications-page .token-snippet .token-copy-row { margin-top: 8px; } body.notifications-page .notification-lookup-row { display: flex; align-items: center; gap: 8px; max-width: 460px; } body.notifications-page .notification-lookup-row input { flex: 1; min-width: 0; font: inherit; font-size: 13px; font-family: "Cascadia Mono", Consolas, "Courier New", monospace; color: var(--op-ink); background: var(--op-surface); border: 1px solid var(--op-border); border-radius: var(--op-r-ctl); padding: 8px 12px; outline: none; transition: border-color 140ms var(--op-ease), box-shadow 140ms var(--op-ease); } body.notifications-page .notification-lookup-row input:focus-visible { border-color: var(--op-accent); box-shadow: var(--op-ring); } body.notifications-page .notification-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } body.notifications-page .notification-row { cursor: pointer; } body.os-app .badge.notify-ok { background: var(--op-ok-soft); color: var(--op-ok); } body.os-app .badge.notify-warn { background: var(--op-warn-soft); color: var(--op-warn); } body.os-app .badge.notify-error { background: var(--op-danger-soft); color: var(--op-danger); } body.notifications-page .notification-pager { display: flex; align-items: center; justify-content: center; gap: 12px; } body.notifications-page .notification-pager span { font-size: 11.5px; color: var(--op-ink-3); font-variant-numeric: tabular-nums; } body.notifications-page .notification-detail-summary { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--op-hairline); border-radius: 12px; overflow: hidden; } body.notifications-page .notification-detail-row { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 8px 14px; border-bottom: 1px dashed var(--op-hairline); background: var(--op-surface); } body.notifications-page .notification-detail-row:last-child { border-bottom: 0; } body.notifications-page .notification-detail-row > span { font-size: 11.5px; font-weight: 600; color: var(--op-ink-3); white-space: nowrap; } body.notifications-page .notification-detail-row > strong { font-size: 13px; font-weight: 600; color: var(--op-ink); text-align: end; overflow-wrap: anywhere; } body.notifications-page .notification-raw summary { cursor: pointer; font-size: 12px; font-weight: 700; color: var(--op-ink-2); user-select: none; } body.notifications-page .notification-raw summary:hover { color: var(--op-accent-strong); } body.os-app .op-range-field { display: inline-flex; align-items: center; gap: 5px; padding: 0 9px; height: 32px; border: 1px solid var(--op-border); border-radius: var(--op-r-ctl); background: var(--op-surface); } body.os-app .op-range-field:focus-within { border-color: var(--op-accent); box-shadow: var(--op-ring); } body.os-app .op-range-field label { font-size: 11px; font-weight: 600; color: var(--op-ink-3); white-space: nowrap; } body.os-app .op-range-field input { border: 0; background: transparent; font: inherit; font-size: 11.5px; color: var(--op-ink); padding: 0; outline: none; width: 106px; min-width: 0; } body.os-app .op-range-field input::-webkit-calendar-picker-indicator { padding: 0; margin-inline-start: 2px; opacity: 0.55; cursor: pointer; } body.os-app .op-range-sep { color: var(--op-ink-3); } /* יומן התיקונים בתוך הכרטיס */ body.notifications-page .corrections-log-wrap { border: 1px solid var(--op-hairline); border-radius: 12px; overflow: auto; background: var(--op-surface); } body.notifications-page .corrections-log .log-grid { min-width: 980px; } body.notifications-page .corrections-log .log-grid-header > div { background: var(--op-surface-2); color: var(--op-ink-3); font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; border-bottom: 1px solid var(--op-border); padding: 9px 12px; white-space: nowrap; } body.notifications-page .corrections-log .log-grid-row > div { border-bottom: 1px solid var(--op-hairline); padding: 11px 12px; background: var(--op-surface); } body.notifications-page .corrections-log .log-entry-type { white-space: normal; line-height: 1.45; } body.notifications-page .corrections-log .log-grid-row:last-child > div { border-bottom: 0; } body.notifications-page .corrections-log .log-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; color: var(--op-ink-3); font-size: 12.5px; padding: 40px 20px; } body.notifications-page .notification-raw pre { margin: 8px 0 0; padding: 14px 16px; background: #0f1226; color: #cdd3ee; font-family: "Cascadia Mono", Consolas, "Courier New", monospace; font-size: 11px; line-height: 1.6; border-radius: 12px; overflow: auto; max-height: 420px; text-align: left; } /* ============================================================ login — עמוד כרטיס עצמאי באותה שפה ============================================================ */ /* עמוד הכניסה — עוקב אחרי הערכה הפעילה. הצבעים שאין להם טוקן תוכן מתאים (כרטיס הזכוכית, רקע השדה, צבע ה-autofill, הזוהר ברקע) מוגדרים כאן כטוקני --login-* עם ערך לכל מצב, כדי שהמעבר יהיה החלפת ערכים ולא כלל מקביל. */ body.login-page.os-app { --login-glow-a: rgba(70, 85, 224, 0.16); --login-glow-b: rgba(139, 92, 246, 0.13); --login-base: linear-gradient(180deg, #f7f8fd 0%, var(--op-bg) 100%); --login-panel: var(--op-surface); --login-panel-border: var(--op-border); --login-panel-shadow: 0 30px 70px -34px rgba(19, 23, 53, 0.4), 0 2px 8px rgba(19, 23, 53, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.7); --login-field: #ffffff; --login-field-border: var(--op-border); --login-field-hover: var(--op-field-hover-border); --login-autofill: #ffffff; display: flex; align-items: center; justify-content: center; min-height: 100vh; min-height: 100dvh; padding: 24px; color: var(--op-ink); background: radial-gradient(1000px 620px at 80% -14%, var(--login-glow-a), transparent 62%), radial-gradient(760px 520px at 6% 110%, var(--login-glow-b), transparent 58%), var(--login-base); background-attachment: fixed; } [data-theme="dark"] body.login-page.os-app { --login-glow-a: rgba(96, 110, 255, 0.24); --login-glow-b: rgba(139, 92, 246, 0.18); --login-base: linear-gradient(180deg, #151a3a 0%, #0d1026 100%); --login-panel: rgba(30, 36, 76, 0.72); --login-panel-border: rgba(255, 255, 255, 0.11); --login-panel-shadow: 0 40px 90px -34px rgba(3, 5, 20, 0.95), 0 2px 10px rgba(3, 5, 20, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.07); --login-field: rgba(255, 255, 255, 0.055); --login-field-border: rgba(255, 255, 255, 0.13); --login-field-hover: rgba(255, 255, 255, 0.2); --login-autofill: #232a55; } body.login-page .login-shell { width: 100%; max-width: 404px; margin: 0; padding: 0; display: block; } body.login-page .login-panel { background: var(--login-panel); border: 1px solid var(--login-panel-border); border-radius: 22px; box-shadow: var(--login-panel-shadow); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); padding: 32px 30px 28px; display: flex; flex-direction: column; gap: 22px; } body.login-page .login-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; } body.login-page .login-brand .brand-mark { width: 46px; height: 46px; border-radius: 15px; background: linear-gradient(140deg, #5b68ff, #8b5bf0); color: #fff; display: grid; place-items: center; box-shadow: 0 14px 34px -12px rgba(91, 104, 255, 0.9); margin-bottom: 12px; } body.login-page .login-wordmark { font-size: 27px; font-weight: 800; letter-spacing: -0.035em; line-height: 1.1; color: var(--op-ink); direction: ltr; } body.login-page .login-brand h1 { margin: 9px 0 0; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; color: var(--op-ink); } body.login-page .login-brand p { margin: 3px 0 0; font-size: 12.5px; font-weight: 500; color: var(--op-ink-2); line-height: 1.6; } body.login-page .login-form { display: flex; flex-direction: column; gap: 14px; } body.login-page .login-form .field { display: grid; gap: 7px; min-width: 0; } body.login-page .login-form .field label { font-size: 11.5px; font-weight: 600; letter-spacing: 0.01em; color: var(--op-ink-2); } body.login-page .login-form input { width: 100%; min-width: 0; min-height: 44px; padding: 10px 13px; font-size: 14px; font-weight: 500; color: var(--op-ink); background: var(--login-field); border: 1px solid var(--login-field-border); border-radius: 12px; transition: border-color 140ms var(--op-ease), background 140ms var(--op-ease), box-shadow 140ms var(--op-ease); } body.login-page .login-form input::placeholder { color: var(--op-ink-3); } body.login-page .login-form input:hover { border-color: var(--login-field-hover); } body.login-page .login-form input:focus { outline: none; border-color: var(--op-accent); box-shadow: var(--op-ring); } /* מילוי אוטומטי של הדפדפן צובע את השדה בלבן ומתעלם מ-background. ה-inset shadow הוא הדרך היחידה לדרוס אותו — קריטי במצב כהה, שם זה היה טקסט לבן על לבן. */ body.login-page .login-form input:-webkit-autofill, body.login-page .login-form input:-webkit-autofill:hover, body.login-page .login-form input:-webkit-autofill:focus { -webkit-text-fill-color: var(--op-ink); caret-color: var(--op-ink); -webkit-box-shadow: 0 0 0 1000px var(--login-autofill) inset; box-shadow: 0 0 0 1000px var(--login-autofill) inset; transition: background-color 5000s ease-in-out 0s; } body.login-page .login-actions { display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin-top: 4px; } body.login-page #loginMessage { font-size: 12px; font-weight: 600; color: var(--op-danger); min-width: 0; text-align: start; overflow-wrap: anywhere; } body.login-page #loginMessage:empty { display: none; } body.login-page #loginButton { appearance: none; font: inherit; font-size: 14px; font-weight: 700; width: 100%; min-height: 46px; background: linear-gradient(140deg, #5b68ff, var(--op-accent-solid)); border: 1px solid rgba(255, 255, 255, 0.14); color: #fff; border-radius: 13px; padding: 11px 22px; cursor: pointer; box-shadow: 0 14px 30px -18px rgba(91, 104, 255, 0.9); flex: none; transition: filter 140ms var(--op-ease), transform 140ms var(--op-ease), box-shadow 140ms var(--op-ease); } body.login-page #loginButton:hover { filter: brightness(1.1); box-shadow: 0 16px 34px -14px rgba(91, 104, 255, 0.95); } body.login-page #loginButton:focus-visible { outline: 2px solid var(--op-accent); outline-offset: 2px; } body.login-page #loginButton:active { transform: scale(0.985); } body.login-page #loginButton:disabled { opacity: 0.55; cursor: progress; transform: none; filter: none; } @media (max-width: 420px) { body.login-page.os-app { padding: 16px; } body.login-page .login-panel { padding: 26px 20px 22px; border-radius: 18px; } } /* ============================================================ רספונסיביות ============================================================ */ @media (max-width: 1080px) { body.os-app:not(.login-page) { height: auto; overflow: auto; } body.os-app:not(.login-page) .os-shell { height: auto; } body.os-app:not(.login-page) .os-content { height: auto; overflow: visible; scrollbar-gutter: auto; } body.os-app .os-shell { flex-direction: column; } body.os-app .os-sidebar { position: static; width: 100%; height: auto; overflow: visible; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 16px; } body.os-app .os-brand { padding: 0; } body.os-app .os-nav { flex-direction: row; order: 5; width: 100%; gap: 6px; } body.os-app .os-nav-caption { display: none; } body.os-app .os-nav-item { flex: 1; justify-content: center; padding: 9px 10px; } body.os-app .os-nav-item.active, body.os-app .os-nav-item[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--op-accent); } body.os-app .os-engine { margin-top: 0; margin-inline-start: auto; flex-direction: row; align-items: center; padding: 8px 12px; gap: 14px; } body.os-app .os-engine-actions { flex-direction: row; } body.os-app .os-block-button { width: auto; } body.os-app .os-side-foot { flex-direction: row; align-items: center; gap: 10px; flex-wrap: wrap; border-top: 0; padding-top: 0; } body.os-app .os-side-foot > .os-status { display: none; } body.os-app .os-sidebar .totp-card { width: auto; min-width: 130px; } body.os-app .os-side-tool { width: auto; } body.os-app .os-status { display: none; } body.os-app .os-sidebar .user-menu { flex: none; } body.os-app .os-sidebar .user-menu-popover { bottom: auto; top: calc(100% + 8px); margin-top: 0; } body.os-app .os-content { padding: 18px 16px 96px; } body.os-app .process-panel { inset-inline-start: 0; } body.os-app .os-view-head { display: flex; flex-direction: column; align-items: stretch; } body.os-app .metrics { flex-wrap: wrap; } body.os-app .metric { flex: 1 1 120px; border-bottom: 1px solid var(--op-hairline); } } @media (max-width: 640px) { /* --- הרצועה העליונה בטלפון: ערימה מסודרת במקום שורה עמוסה --- */ body.os-app .os-sidebar { flex-direction: column; align-items: stretch; gap: 12px; padding: 12px 12px 14px; } body.os-app .os-brand { order: 0; padding: 0 2px; } body.os-app .os-nav { order: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; width: 100%; } body.os-app .os-nav-caption { display: none; } body.os-app .os-nav-item { flex: none; flex-direction: column; justify-content: center; gap: 4px; padding: 8px 4px 7px; font-size: 10px; font-weight: 600; text-align: center; border-radius: 10px; min-width: 0; } body.os-app .os-nav-item span { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; } body.os-app .os-nav-item.active, body.os-app .os-nav-item[aria-current="page"] { box-shadow: none; background: rgba(255, 255, 255, 0.12); } body.os-app .os-menu-button { display: inline-flex; } body.os-app .os-side-drawer { display: flex; flex-direction: column; gap: 14px; position: fixed; top: 0; bottom: 0; inset-inline-start: 0; width: min(300px, 85vw); background: linear-gradient(180deg, var(--op-side-2) 0%, var(--op-side) 34%); padding: 18px 14px 20px; overflow-y: auto; z-index: 70; transform: translateX(100%); transition: transform 260ms var(--op-ease-drawer); box-shadow: var(--op-shadow-drawer); } body.os-app .os-side-drawer.is-open { transform: translateX(0); } body.os-app.side-drawer-open { overflow: hidden; } body.os-app .os-engine { order: 2; margin: 0; width: 100%; flex-direction: column; align-items: stretch; padding: 12px; gap: 10px; } body.os-app .os-engine-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; } body.os-app .os-engine-actions > :only-child { grid-column: 1 / -1; } body.os-app .os-block-button { width: 100%; } body.os-app .os-side-foot { order: 3; width: 100%; flex-direction: column; align-items: stretch; gap: 8px; border-top: 1px solid rgba(255, 255, 255, 0.09); padding-top: 12px; } body.os-app .os-sidebar .totp-card { width: 100%; } body.os-app .os-side-tool { width: 100%; } body.os-app .os-sidebar .user-menu { width: 100%; } body.os-app .os-sidebar .user-chip-email { max-width: none; } body.os-app .os-content { padding: 16px 12px 96px; } body.os-app .os-view-title h1 { font-size: 18px; } body.os-app .os-seg { width: 100%; } body.os-app .os-seg-item { flex: 1; justify-content: center; } body.os-app .os-view-actions { width: 100%; } body.os-app .os-view-actions .secondary-button, body.os-app .os-view-actions .danger-button { flex: 1; } body.os-app .metric { flex: 1 1 40%; } body.os-app .op-select-field, body.os-app .op-range-field { flex: 1 1 auto; } body.os-app .process-panel .process-head { flex-wrap: wrap; padding-inline-end: 20px; } body.os-app .process-panel .process-state { max-width: none; } body.os-app .op-search-field { min-width: 0; width: 100%; } body.os-app .os-toolbar { align-items: stretch; } body.os-app .app-modal { padding: 12px 10px; } body.os-app .app-modal-card { max-height: 94vh; } } /* ============================================================ מובייל ≤720 — שחרור כיולי הדסקטופ כדי שהטרנספורמציה לכרטיסים של styles.css (data-label) תעבוד נקי ============================================================ */ @media (max-width: 720px) { body.os-app .sync-grid, body.os-app .deals-grid { min-width: 0; } body.os-app .deals-grid-header, body.os-app .deals-grid-row { grid-template-columns: none; } body.os-app .grid-row > div, body.os-app .deals-grid-row > div { padding-inline: 0; background: var(--op-surface); border-bottom: 1px solid var(--op-hairline); } body.os-app .grid-row > div:last-child, body.os-app .deals-grid-row > div:last-child { border-bottom: 0; } body.os-app .grid-row > .revivo-zone, body.os-app .grid-row > .alp-zone, body.os-app .grid-row > .control-zone, body.os-app .deals-grid-row > .revivo-zone, body.os-app .deals-grid-row > .alp-zone, body.os-app .deals-grid-row > .control-zone { background: var(--op-surface); } body.os-app .grid-row:hover > div, body.os-app .deals-grid-row:hover > div { background: var(--op-surface); } body.os-app .orders-table tbody td { padding: 8px 0; } body.os-app .orders-table tbody tr:hover td { background: var(--op-surface); } body.notifications-page .notification-card .orders-table-wrap { border: 0; border-radius: 0; overflow: visible; } body.notifications-page .corrections-log-wrap { border: 0; overflow: visible; background: transparent; } body.notifications-page .corrections-log .log-grid { min-width: 0; } body.notifications-page .corrections-log .log-grid-header { display: none; } body.notifications-page .corrections-log .log-grid-row > div { padding: 7px 0; background: transparent; border-bottom: 1px solid var(--op-hairline); } body.notifications-page .corrections-log .log-grid-row > div:last-child { border-bottom: 0; } } /* ============================================================ העדפת תנועה מופחתת ============================================================ */ @media (prefers-reduced-motion: reduce) { body.os-app .app-modal-card, body.os-app .app-modal-backdrop, body.os-app .drawer-backdrop, body.os-app .update-log-panel, body.os-app .profile-shell { animation: none; } body.os-app .op-live-dot { animation: none; } body.os-app * { transition-duration: 1ms !important; } }