/* PACS brand override — pulled from the public site (pacsindia.in): navy #131d45 (site's own --color-primary), gold #e0c371 and crimson #ee2a47 (sampled from the round logo mark), BebasNeue display face (same as the site). Gotham (site's UI face) is a commercial font we can't redistribute, so Montserrat stands in — same geometric-sans spirit, free (SIL OFL) via Google Fonts. Loaded after the design system's own token files, so these :root overrides win the cascade without needing !important. */ @import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat:wght@400;500;600;700&display=swap"); :root{ --font-display:"Bebas Neue",system-ui,sans-serif; --font-ui:"Montserrat",system-ui,sans-serif; --brand-navy:#131d45; --brand-navy-hover:#0e1740; --brand-navy-active:#0a1130; --brand-navy-tint:#e9ebf5; --brand-gold:#e0c371; --brand-crimson:#ee2a47; } :root,[data-surface="office"]{ --signal:var(--brand-navy); --signal-hover:var(--brand-navy-hover); --signal-active:var(--brand-navy-active); --signal-tint:var(--brand-navy-tint); --text-on-signal:#ffffff; /* The DS's own due-tone red is fine on its own, but the logo already has a crimson accent (the swoosh on the "S") — reuse that exact hue for the "needs attention" tone instead of a second, unrelated red. */ --due:var(--brand-crimson); --due-bg:#fceaec; --border:var(--brand-gold); --border-strong:var(--brand-gold); } [data-surface="studio"]{ --signal:var(--brand-gold); --signal-hover:#eccf8c; --signal-active:#c9a955; --signal-tint:#2b2413; --text-on-signal:var(--brand-navy); } /* Sidebar header strip: a compact echo of the logo's navy-and-gold badge, visible on every screen rather than only at login. Targets NavRail's markup structurally (first child of the nav rail) since the design system component takes no logo/theming prop of its own. */ [data-surface="office"] > nav > div:first-child{ background:var(--brand-navy); border-bottom:3px solid var(--brand-gold); /* The wordmark spans read color via inline style (var(--text-primary) / var(--text-tertiary)) — a plain `color:` rule here can't win against inline styles, but redefining the variables they reference does, since inline styles still resolve custom properties through the normal inheritance chain. Scoped to this div only. */ --text-primary:#ffffff; --text-tertiary:var(--brand-gold); } /* Mobile/tablet nav: the design system's NavRail has no responsive or open/closed prop of its own (it's a fixed-width sidebar, always in flow), so this turns it into a slide-in drawer purely via CSS at the structural [data-surface] > nav hook already used above, driven by a .pacs-nav-open class the app toggles on (there's nowhere to hand NavRail a className directly). Below the breakpoint it's position:fixed and off-screen; toggling the class slides it in. Above the breakpoint this whole block is inert — the rail stays static in flow exactly as before. */ .pacs-hamburger{display:none} .pacs-nav-backdrop{display:none} @media (max-width:880px){ .pacs-hamburger{ display:flex;align-items:center;justify-content:center; position:fixed;top:calc((var(--topbar-h) - 40px) / 2);left:12px; width:40px;height:40px;border-radius:var(--radius-control); border:1px solid var(--border-strong);background:var(--surface-panel); z-index:110;cursor:pointer; } [data-surface="office"] > nav{ position:fixed;top:0;left:0;bottom:0;z-index:100; transform:translateX(-100%); transition:transform var(--dur-fast,0.2s) var(--ease,ease); box-shadow:2px 0 16px rgba(0,0,0,0.25); } body.pacs-nav-open [data-surface="office"] > nav{ transform:translateX(0); } body.pacs-nav-open .pacs-nav-backdrop{ display:block;position:fixed;inset:0;background:rgba(0,0,0,0.4);z-index:90; } } /* Responsive form/metric grids: every page builds its grid inline (style={{gridTemplateColumns:...}}), often with a per-page column count or even a custom track list (e.g. "1fr 300px"). An external stylesheet can never win against an inline style for the same property on the same element at the same breakpoint-free specificity — so this is the one place in this file that reaches for !important, deliberately: add className="pacs-responsive-grid" alongside the existing inline grid style (untouched otherwise) and this forces exactly 2 columns, then 1, regardless of what desktop template the page declared. Applies equally to plain repeat(N,1fr) grids and custom track lists. */ @media (max-width:900px){ .pacs-responsive-grid{grid-template-columns:repeat(2,1fr) !important} } @media (max-width:560px){ .pacs-responsive-grid{grid-template-columns:1fr !important} } /* On a phone, a page's own list is the thing worth seeing without scrolling — not a creation form the user has to scroll past first (Enquiries: New enquiry form + a banner used to sit above the actual list). Reorders visually via flex `order` only; DOM/tab order is unchanged, and above the breakpoint this is a no-op since the parent's flex-direction:column with everything at the default order:0 already matches source order. */ @media (max-width:880px){ .pacs-mobile-first{order:-1} .pacs-mobile-last{order:1} } /* DataTable's is table-layout:fixed with width:100% (inline, so neither is overridable here) — any column that DOESN'T declare an explicit width normally just shares the leftover space evenly. But once the panel is narrower than the sum of the OTHER columns' pixel widths, that leftover goes negative and the unwidthed column collapses to 0, clipping its header/cell text (the same bug fixed one table at a time on Enquiries/Timetable/FeePlan earlier — this is the root cause, so fix it once here instead of hunting every table's column widths). Setting min-width (never set inline, so no conflict) means the table simply won't shrink past a sane size — the overflow-x:auto wrapper every AsyncTable sits in then scrolls horizontally instead of squeezing a column to nothing. */ [data-surface] table{min-width:900px}