/* Bina Board — Super Admin (PortalAdmin) portal theme. Logical properties throughout so this survives an RTL pass unchanged (02-AGENT-DESIGN.md §4) — `ur` and `ar` render right-to-left via `dir="rtl"` on (templates/layouts/base.html), driven by core.middleware.UserLanguageMiddleware. */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; } body { font-family: var(--font-sans); font-size: var(--text-base); color: var(--color-text); background: var(--color-surface); -webkit-font-smoothing: antialiased; } /* `ur`/`ar` (02-AGENT-DESIGN.md §3): IBM Plex Sans has no Arabic-script glyphs, so without this every Urdu/Arabic string silently falls through to the browser/OS default font instead of the brand typeface. */ [dir="rtl"] body { font-family: "IBM Plex Sans Arabic", var(--font-sans); } a { color: inherit; } h1, h2, h3, p { margin: 0; } button, input, select { font-family: inherit; font-size: inherit; } :focus-visible { outline: 2px solid var(--color-amber); outline-offset: 2px; } /* Subtle scrollbar polish, shared by every scrollable surface. */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--color-hairline); border-radius: 999px; } ::-webkit-scrollbar-thumb:hover { background: #B9C7C8; } /* ---------- Auth shell (login) ---------- */ .auth-shell { min-height: 100vh; display: grid; place-items: center; padding: var(--space-6); background: radial-gradient(circle at 15% 20%, rgba(232, 161, 61, 0.12), transparent 40%), linear-gradient(160deg, var(--color-ink-900), var(--color-ink) 65%); } .auth-card { width: 100%; max-width: 400px; background: var(--color-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: var(--space-8) var(--space-6); } .auth-brand { display: flex; align-items: center; gap: var(--space-2); margin-block-end: var(--space-6); } .auth-brand-mark { width: 36px; height: 36px; border-radius: var(--radius-sm); background: var(--color-ink); color: var(--color-amber); display: grid; place-items: center; font-weight: 700; font-size: var(--text-md); } .auth-brand-logo { width: 36px; height: 36px; object-fit: contain; flex-shrink: 0; border-radius: var(--radius-sm); background: #fff; padding: 2px; } /* Project logo shown next to the Bina Board mark on a project subdomain's sign-in page (templates/login.html) — bordered so it reads as a distinct, second brand mark rather than a replacement for the first. */ .auth-brand-logo-project { border: 1px solid var(--color-border, #e2e2e2); } .auth-brand-name { font-weight: 600; font-size: var(--text-lg); color: var(--color-ink-900); } .auth-brand-sub { display: block; font-size: var(--text-xs); color: var(--color-text-muted); letter-spacing: 0.04em; text-transform: uppercase; } .auth-title { font-size: var(--text-xl); font-weight: 600; color: var(--color-ink-900); margin-block-end: var(--space-1); } .auth-subtitle { color: var(--color-text-muted); margin-block-end: var(--space-6); } /* ---------- Form primitives ---------- */ .field { margin-block-end: var(--space-4); } .label { display: block; font-size: var(--text-sm); font-weight: 600; color: var(--color-ink-900); margin-block-end: var(--space-2); } .input { width: 100%; padding: var(--space-3); border: 1px solid var(--color-hairline); border-radius: var(--radius-md); background: rgba(255, 255, 255, 0.5); color: var(--color-text); transition: background var(--motion-fast), border-color var(--motion-fast), box-shadow var(--motion-fast); } .input:focus { background: var(--color-card); border-color: var(--color-ink); box-shadow: 0 0 0 3px rgba(14, 58, 67, 0.12); outline: none; } .field-required { color: var(--color-terracotta); } .field-error { color: var(--color-danger); font-size: var(--text-sm); margin-block-start: var(--space-1); } .field-help { color: var(--color-text-muted); font-size: var(--text-sm); margin-block-start: var(--space-1); } .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); border: none; border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); font-weight: 600; font-size: var(--text-base); cursor: pointer; transition: background var(--motion-fast), box-shadow var(--motion-fast), border-color var(--motion-fast), transform var(--motion-fast); text-decoration: none; } .btn:active { transform: translateY(1px); } /* `pointer-events: none` rather than only dimming — a disabled `