/* ============================================================ פה ופה CRM – Main Stylesheet (RTL / Hebrew) DIRECTION: logical properties, not physical ones. Every offset, padding, margin, border and alignment that has a direction is written as *-inline-start / *-inline-end / start / end. The document is , so inline-start resolves to the physical right and inline-end to the physical left; the rules below therefore render exactly as the physical ones they replaced. The point is not a behaviour change - it is that the stylesheet stops claiming a left edge it means as a right edge, so the next person reading `right: 19px` does not have to hold the flip in their head, and an LTR surface (an English report, an embedded form) is not silently mirrored. Top/bottom stay physical: they do not flip. `transform: translateX()` stays physical too - transforms are not direction-aware, and pairing one with a logical inset is correct. ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --primary: #6C63FF; --primary-light: #EDE9FF; --primary-dark: #5A52D5; --success: #10B981; --success-light: #D1FAE5; --warning: #F59E0B; --warning-light: #FEF3C7; /* Text ON --warning-light. --warning itself is a FILL colour: #F59E0B on #FEF3C7 is about 1.9:1, well under WCAG AA, and the conflict warning is the one element whose entire job is to be read. */ --warning-dark: #92400E; --danger: #EF4444; --danger-light: #FEE2E2; --info: #3B82F6; --info-light: #DBEAFE; --purple: #8B5CF6; --purple-light: #EDE9FE; --invested: #059669; --bg: #F8F9FC; --card-bg: #FFFFFF; --border: #E5E7EB; --border-focus: #6C63FF; --text: #1F2937; --text-muted: #6B7280; --text-light: #9CA3AF; /* ── Measured tokens for the anonymous pages ──────────────────────── index.php, sso/login.php and sso/signup_request.php are the three screens someone who is not yet a customer ever sees, and every colour on them used to be a hex literal typed into a style attribute. They are tokens now for one reason: tools/contrast_audit.php can only measure what it can resolve, and a number buried in a PHP string is invisible to it. Every value below is in that script's table. --primary-on-white is NOT --primary. White on #6C63FF is 4.32:1, under the 4.5:1 floor for the button label, so the filled button takes this deeper tone (5.83:1) and --primary stays what it always was: the brand hue, used for the wordmark, borders and tints. --primary-deep is that button's hover, kept a step darker still so the hover remains visible now that the resting state moved. --login-fine replaces a literal #999 (2.85:1 on the white card) on the "או עם שם משתמש וסיסמה" lines, and --login-error-ink replaces --danger on --danger-light (3.08:1) for the failed-login message. */ --primary-on-white: #5A52D5; --primary-deep: #4A43BF; --login-fine: #5B6270; --login-error-ink: #B42318; --sr-label: #555555; --sr-note-bg: #F3F5F8; --sr-note-ink: #333333; --sidebar-w: 240px; --header-h: 64px; --radius: 10px; --radius-sm: 6px; --shadow: 0 1px 4px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.06); --shadow-sm: 0 1px 3px rgba(0,0,0,.06); } html { font-size: 16px; } body { font-family: 'Heebo', sans-serif; background: var(--bg); color: var(--text); direction: rtl; min-height: 100vh; } /* ── Layout ─────────────────────────────────────────────────── */ .app-layout { display: flex; min-height: 100vh; } /* ── Sidebar ────────────────────────────────────────────────── */ .sidebar { width: var(--sidebar-w); background: #1E1B4B; color: #fff; display: flex; flex-direction: column; position: fixed; top: 0; right: 0; bottom: 0; z-index: 100; } .sidebar-brand { display: flex; align-items: center; gap: 12px; padding: 20px 16px; border-bottom: 1px solid rgba(255,255,255,.1); } .brand-logo { font-size: 28px; } .brand-name { font-size: 15px; font-weight: 700; } /* ── Logo image sizes ──────────────────────────────────────── */ /* The mark is navy-on-transparent, and both the sidebar (#1E1B4B) and the mobile top bar are dark. A white chip behind it is what keeps the wordmark legible there without shipping a second, light-on-dark artwork file. */ .brand-logo-img { display: block; object-fit: contain; border-radius: 6px; background: #fff; padding: 3px 6px; } .brand-logo-img--sidebar { height: 40px; width: auto; } .brand-logo-img--mobile { height: 28px; width: auto; } .sidebar-nav { flex: 1; padding: 12px 8px; display: flex; flex-direction: column; gap: 2px; } .nav-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: var(--radius-sm); color: rgba(255,255,255,.7); text-decoration: none; font-size: 14px; font-weight: 500; transition: all .15s; } .nav-item:hover { background: rgba(255,255,255,.08); color: #fff; } .nav-item.active { background: var(--primary); color: #fff; } .nav-icon { font-size: 18px; width: 22px; text-align: center; } .sidebar-footer { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-top: 1px solid rgba(255,255,255,.1); font-size: 13px; } .user-info { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,.8); } .user-avatar { font-size: 20px; } /* On a