/* ============================================================================ * SILAH — BASE * ---------------------------------------------------------------------------- * Reset, document defaults and the handful of utilities that genuinely earn * their place. Everything here uses tokens; there are no literal colours. * * RTL: every rule uses LOGICAL properties — margin-inline-start rather than * margin-left, padding-block rather than padding-top/bottom, text-align: start * rather than left, inset-inline-end rather than right. That is the whole RTL * strategy: setting dir="rtl" on flips the entire interface with no * second stylesheet and no overrides. A single margin-left committed anywhere * in this codebase breaks Urdu and Arabic silently, so it never happens. * ========================================================================== */ /* -------------------------------------------------------------------------- * Reset * ----------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } body { min-height: 100vh; font-family: var(--font); font-size: var(--fs-base); line-height: var(--lh-normal); color: var(--ink); background: var(--canvas); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, picture, video, canvas, svg { display: block; max-width: 100%; } input, button, textarea, select { font: inherit; color: inherit; } /* Long unbroken strings — a URL, an email, an Arabic name — must not force the page into a horizontal scroll on a phone. */ p, h1, h2, h3, h4, h5, h6, li, dd, dt, td, th { overflow-wrap: break-word; } /* -------------------------------------------------------------------------- * Typography * ----------------------------------------------------------------------- */ h1, h2, h3, h4, h5, h6 { font-weight: var(--fw-semibold); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); color: var(--ink); } h1 { font-size: var(--fs-2xl); } h2 { font-size: var(--fs-xl); } h3 { font-size: var(--fs-lg); } h4 { font-size: var(--fs-md); } h5, h6 { font-size: var(--fs-base); } a { color: var(--brand-ink); text-decoration: none; transition: color var(--dur-fast) var(--ease); } a:hover { color: var(--brand-hover); text-decoration: underline; text-underline-offset: 2px; } small { font-size: var(--fs-sm); } code, kbd, pre { font-family: var(--font-mono); font-size: 0.9em; /* Code is Latin even on an Urdu page, and it must not be mirrored. */ direction: ltr; unicode-bidi: isolate; } code { padding: 0.1em 0.4em; border-radius: var(--r-sm); background: var(--surface-sunken); color: var(--ink-soft); } hr { border: 0; border-block-start: 1px solid var(--border); margin-block: var(--sp-6); } /* -------------------------------------------------------------------------- * Focus * ----------------------------------------------------------------------- */ /* :focus-visible only, so a mouse click does not leave a ring behind, while a keyboard user always sees where they are. */ :focus { outline: none; } :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--r-sm); } ::selection { background: var(--brand-soft); color: var(--brand-ink); } /* -------------------------------------------------------------------------- * Icons * ----------------------------------------------------------------------- */ .icon { inline-size: 1.25em; block-size: 1.25em; flex: 0 0 auto; /* Stroke colour follows the text it sits next to, which is why buttons and nav items never need their own icon rules. */ color: currentColor; vertical-align: -0.2em; } /* A tinted round plate behind an icon — used for module tiles and list rows. */ .icon-tile { display: grid; place-items: center; flex: 0 0 auto; inline-size: 44px; block-size: 44px; border-radius: var(--r-md); background: var(--brand-soft); color: var(--brand-ink); } .icon--sm { inline-size: 1em; block-size: 1em; } .icon--lg { inline-size: 1.5em; block-size: 1.5em; } .icon--xl { inline-size: 2rem; block-size: 2rem; } /* Directional icons. * * The icon set draws one chevron, pointing right. These two classes turn it * into "forward" and "back" for whichever direction the page reads, so there is * never a mirrored copy of an icon in the set — and never a Next arrow pointing * backwards in Urdu. * * .icon--fwd next, continue, deeper LTR → RTL ← * .icon--back previous, back, shallower LTR ← RTL → */ .icon--back { transform: scaleX(-1); } [dir="rtl"] .icon--fwd { transform: scaleX(-1); } [dir="rtl"] .icon--back { transform: none; } /* -------------------------------------------------------------------------- * Scrollbars — themed, and never so thin they become hard to grab * ----------------------------------------------------------------------- */ * { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; } *::-webkit-scrollbar { inline-size: 10px; block-size: 10px; } *::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--r-full); border: 2px solid transparent; background-clip: content-box; } *::-webkit-scrollbar-track { background: transparent; } /* -------------------------------------------------------------------------- * Utilities * ----------------------------------------------------------------------- */ /* Visible to a screen reader, invisible on screen. Used for the labels that a sighted user reads from an icon. */ .sr-only { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* Latin or numeric data sitting inside Urdu or Arabic text. * * "29 Aug 2025" in an RTL paragraph comes out as "Aug 2025 29": the bidi * algorithm reorders the runs, because a date is a mix of neutral, numeric and * Latin characters and the paragraph direction decides how they sit together. * The same happens to phone numbers, CNICs, IDs, prices and URLs — everything * Phase 2 onwards is full of. * * direction:ltr fixes the internal order; unicode-bidi:isolate stops that * decision leaking out into the sentence around it. Alignment is restored * separately, because direction:ltr also flips what `start` means. */ .ltr { direction: ltr; unicode-bidi: isolate; text-align: start; } [dir="rtl"] .ltr { text-align: end; } /* An icon and the word it belongs to, kept on one line and vertically centred. * * This lived in table.css as .cell-place, and the public profile borrowed it — * which meant the pin dropped onto its own line above the city name on every * page that did not happen to load the table stylesheet. A pairing this small * and this general belongs with the utilities, where it is available whatever * else the page pulls in. */ .place { display: inline-flex; align-items: center; gap: var(--sp-2); white-space: nowrap; } .place .icon { inline-size: 15px; block-size: 15px; /* .icon sets a baseline nudge for text runs; inside a flex row it would push the glyph off centre. */ vertical-align: baseline; opacity: 0.85; } /* Anything a USER typed, rendered inside the page's own direction. * * People will enter Urdu, Arabic and Punjabi into a page that is laid out * left-to-right — a name, a madrasa, a bio. Two things have to be true at once: * * the LAYOUT does not flip the field stays left-aligned, the label stays * where it was, the card does not mirror * the TEXT still reads right the Urdu glyphs themselves run right-to-left, * because that is how the script works * * `unicode-bidi: isolate` is what makes both true. Without it the bidi * algorithm resolves each run against everything around it, and neutral * characters — a full stop, a bracket, a dash, a digit — jump to the wrong end: * "جامعہ اشرفیہ، لاہور" renders with its comma leading, and "محمد سعید (Imam)" * puts the bracket on the wrong side. Isolating each value contains that * decision inside the value. * * Deliberately NOT dir="auto": that would flip an Urdu name's own direction and * right-align it, which is the opposite of keeping one layout direction. */ .ugc { unicode-bidi: isolate; } /* A block of user text — a bio, a description. `isolate` on its own would still let a leading Arabic character decide the paragraph's alignment. */ .ugc-block { unicode-bidi: isolate; direction: ltr; text-align: start; } .text-muted { color: var(--ink-muted); } .text-soft { color: var(--ink-soft); } .text-start { text-align: start; } .text-end { text-align: end; } .text-center{ text-align: center; } .stack { display: flex; flex-direction: column; gap: var(--sp-4); } .stack--sm { gap: var(--sp-2); } .stack--lg { gap: var(--sp-6); } .row { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; } .row--between { justify-content: space-between; } .row--end { justify-content: flex-end; } .row--nowrap { flex-wrap: nowrap; } .grow { flex: 1 1 auto; min-inline-size: 0; } .hide { display: none !important; } @media (max-width: 767px) { .hide-mobile { display: none !important; } } @media (min-width: 768px) { .hide-desktop { display: none !important; } } /* Any wide element — a table, a diagram, a code block — scrolls inside its own box. The page body itself must never scroll sideways on a phone. */ .scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* A search field and its button on one line, above a listing. */ .search-bar { display: flex; align-items: flex-end; gap: var(--sp-3); flex-wrap: wrap; margin-block-end: var(--sp-5); } .search-bar .field { flex: 1 1 280px; margin-block-start: 0; } /* A key, an id, a registration number — anything read character by character. Not table-only: it labels a feature flag on a page with no table at all. */ /* A row of filters above a table. Started life in superadmin.css and moved here the moment a second area drew one — a utility that two areas use is not one area's, and the copy left behind is the copy that drifts. */ .filter-bar { display: flex; align-items: flex-end; gap: var(--sp-3); flex-wrap: wrap; margin-block-end: var(--sp-5); } .filter-bar .field { flex: 0 1 200px; margin-block-start: 0; } /* On a phone the fields start folded. A toggle is injected by ui.js; until then the fields stay visible so a no-JS visitor can still filter. display: contents on the wrapper keeps the original flex row on desktop. */ .filter-bar__toggle { display: none; } .filter-bar__fields { display: contents; } @media (max-width: 40rem) { .filter-bar[data-filter-ready] { flex-direction: column; align-items: stretch; } .filter-bar__toggle { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); width: 100%; min-block-size: 44px; } .filter-bar:not(.is-open) .filter-bar__fields { display: none; } .filter-bar.is-open .filter-bar__fields { display: flex; flex-wrap: wrap; align-items: end; gap: inherit; width: 100%; } .filter-bar.is-open .filter-bar__fields .btn { flex: 1 1 100%; } } /* A form that has to sit inside a table cell beside other buttons. */ .inline-form { display: inline; } .muted { color: var(--ink-muted); } .mono { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-muted); } /* Utilities used everywhere, table or not — .nowrap keeps a date on one line in a public profile, and .person lays out the avatar beside a name in the header itself. */ .nowrap { white-space: nowrap; } /* An avatar beside a name. */ .person { display: flex; align-items: center; gap: var(--sp-3); }