/* 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; } /* App-wide robustness for the `hidden` attribute. Several progressive- enhancement scripts (static/js/widgets.js, ticket_live.js, ticket_form.js, expense_form.js, push.js, resident_dashboard.js) show/hide elements with `el.hidden = true/false`, relying on the UA rule `[hidden] { display: none }`. But a component that also declares `display` in an author rule (e.g. `.confirm-backdrop { display: flex }`, `.dropzone-body`/`.dropzone-file`) BEATS that UA rule, so `hidden` no longer hides it — a `position: fixed` overlay then keeps intercepting every click on the page (the vendor-detail "page freeze", issue #292), and inline widgets show stale/empty state. Making this an `!important` author rule guarantees `hidden` always wins, regardless of any current or future component's own `display`. */ [hidden] { display: none !important; } 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: #C7CBD2; } /* ---------- 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(79, 70, 229, 0.14), transparent 42%), 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: #A5B4FC; /* light indigo — the solid accent fails contrast on ink */ 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%; min-height: 40px; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-hairline); border-radius: var(--radius-md); background: var(--color-card); color: var(--color-text); transition: background var(--motion-fast), border-color var(--motion-fast), box-shadow var(--motion-fast); } /* A multi-line control keeps comfortable padding rather than being squeezed to the single-row min-height. */ textarea.input { min-height: 96px; padding: var(--space-3); } .input:focus { background: var(--color-card); border-color: var(--color-amber); box-shadow: var(--focus-ring); 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); } /* A boolean (checkbox/switch) row inside a form. Replaces the ad-hoc inline-styled `` pattern so every boolean field aligns identically across the app (issue #316): {{ form.all_day }} {{ form.all_day.label }} */ .check-field { display: flex; align-items: center; gap: var(--space-2); margin-block-end: var(--space-3); font-size: var(--text-base); color: var(--color-text); cursor: pointer; } /* Inside a `.field` wrapper the wrapper already owns the vertical rhythm. */ .field > .check-field { margin-block-end: 0; } /* A boolean sharing a `.field-grid` row with a regular input: bottom-align it and give it the input's 40px control height so the pair reads level. */ .field-align-end { display: flex; align-items: flex-end; } .field-align-end .check-field { min-block-size: 40px; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); border: none; border-radius: var(--radius-md); /* A firm min-height keeps every button on a toolbar row the same height whether or not it carries a leading icon, and gives a comfortable touch target on the AZ/UAE mobile web (issue #316). */ min-height: 40px; padding: var(--space-2) var(--space-5); font-weight: 600; font-size: var(--text-base); line-height: 1.2; white-space: nowrap; 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); } /* Leading/trailing icons inside any button size to the text automatically. */ .btn svg { width: 16px; height: 16px; flex: none; } /* Size variants (issue #316). Base `.btn` is the default/medium; these give a compact action for dense toolbars and a prominent one for hero CTAs, both reusing the same min-height rhythm as inputs so controls line up. */ .btn-sm { min-height: 32px; padding: var(--space-1) var(--space-3); font-size: var(--text-sm); } .btn-sm svg { width: 14px; height: 14px; } .btn-lg { min-height: 48px; padding: var(--space-3) var(--space-6); font-size: var(--text-md); } /* `pointer-events: none` rather than only dimming — a disabled `