/* ══════════════════════════════════════════════════════════════════════
PMS restyle — drop-in layer over app.css
──────────────────────────────────────────────────────────────────────
Load AFTER app.css and after css/themes/*.css:
Everything here is presentation only. It does not touch the auth
pages (.pms-auth*) — the login/forgot/reset design is retained as-is.
Two changes need Razor edits as well; both are marked [RAZOR] and
spelled out in the guideline document.
══════════════════════════════════════════════════════════════════════ */
/* ── 1. Type ──────────────────────────────────────────────────────────
Archivo replaces the system stack. Noto Kufi Arabic covers Arabic,
which Archivo does not. Both are declared once, on body; the auth
pages inherit it too, which is intentional — only their layout is
frozen, not their typeface.
Add to App.razor :
─────────────────────────────────────────────────────────────────── */
body {
font-family: Archivo, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
html[lang^="ar"] body,
html[dir="rtl"] body {
font-family: "Noto Kufi Arabic", Archivo, system-ui, sans-serif;
}
/* Latin identifiers, money, dates and times keep Archivo and tabular
figures even inside an Arabic page, and stay LTR. */
.pms-money,
.pms-num,
.pms-record-grid-title,
.pms-record-detail-field dd,
.pms-kpi-value,
.pms-pager-info,
.pms-financial-statement .pms-date,
.pms-financial-statement .pms-statement-account-number {
font-family: Archivo, system-ui, sans-serif;
font-variant-numeric: tabular-nums;
}
/* ── 2. Surfaces ──────────────────────────────────────────────────────
Square corners, no drop shadows, lighter outlines. Elevation comes
from the canvas tint behind the panels (section 3), not from blur.
─────────────────────────────────────────────────────────────────── */
:root {
--pms-radius-control: 0px;
--pms-radius-panel: 0px;
--pms-shadow-sm: none;
--pms-rule: #e6e9ed; /* separators */
--pms-rule-soft: #eef0f3; /* row rules, inner rules */
--pms-panel-border: #e2e5ea;
--pms-rule-width: 1px;
--pms-selection-rule-width: 3px;
--pms-focus-ring-width: 2px;
--pms-focus-ring-offset: 2px;
--pms-space-xs: 0.25rem;
--pms-space-sm: 0.5rem;
--pms-space-md: 0.75rem;
--pms-space-lg: 1rem;
--pms-space-xl: 1.25rem;
--pms-space-2xl: 1.5rem;
--pms-font-micro: 0.65625rem;
--pms-font-nano: 0.625rem;
--pms-font-small: 0.75rem;
--pms-font-body: 0.875rem;
--pms-font-panel-title: 1.1875rem;
--pms-font-weight-regular: 400;
--pms-font-weight-medium: 500;
--pms-font-weight-semibold: 600;
--pms-font-weight-bold: 700;
--pms-tracking-micro: 0.1em;
--pms-tracking-status: 0.08em;
--pms-control-block-size: 2.5rem;
--pms-control-padding-block: 0.5rem;
--pms-control-padding-inline: 0.7rem;
--pms-grid-row-block-size: 3.1875rem;
--pms-filter-field-basis: 22rem;
--pms-rate-editor-size: 12rem;
--pms-entry-grid-min-size: 58rem;
--pms-indicator-size: 0.5rem;
--pms-shell-search-min-inline-size: 10rem;
--pms-shell-search-max-inline-size: 36rem;
--pms-shell-search-control-block-size: 2.125rem;
--pms-shell-search-results-max-block-size: 22rem;
--pms-shell-search-result-icon-size: 1.875rem;
--pms-shell-search-layer: 320;
--pms-disabled-opacity: 0.55;
--pms-input-affix-tag-max-inline-size: calc(
var(--pms-space-2xl) + var(--pms-space-2xl) + var(--pms-space-2xl) + var(--pms-space-lg));
--pms-input-affix-gutter: calc(
var(--pms-input-affix-tag-max-inline-size) + var(--pms-control-padding-inline) + var(--pms-space-sm));
}
html[data-theme="dark"] {
--pms-rule: #262b33;
--pms-rule-soft: #232830;
--pms-panel-border: #2f353e;
}
.pms-editor-card,
.pms-filter-panel,
.pms-directory-table-wrap,
.pms-split-list,
.pms-split-section,
.pms-dashboard-header,
.pms-dashboard-card,
.pms-kpi-tile,
.pms-home-command-panel,
.pms-home-panel,
.pms-party-master,
.pms-record-master {
border-color: var(--pms-panel-border);
border-radius: 0;
box-shadow: none;
}
.pms-dashboard-header {
background: var(--pms-bg); /* the two-stop gradient is dropped */
}
.pms-home-grid {
align-items: start;
}
.pms-home-area-card {
min-inline-size: 0;
border: var(--pms-rule-width) solid var(--pms-panel-border);
background: var(--pms-bg);
}
.pms-home-area-card > summary {
border: 0;
cursor: pointer;
list-style: none;
}
.pms-home-area-card > summary::-webkit-details-marker {
display: none;
}
.pms-home-area-card > summary::marker {
content: "";
}
.pms-home-area-card[open] > summary {
border-block-end: var(--pms-rule-width) solid var(--pms-rule-soft);
}
.pms-home-area-chevron {
flex: 0 0 auto;
margin-inline-start: auto;
}
.pms-home-area-card[open] .pms-home-area-chevron {
transform: rotate(180deg);
}
.pms-home-area-links {
grid-template-columns: minmax(0, 1fr);
max-block-size: var(--pms-shell-search-results-max-block-size);
padding: var(--pms-space-sm) var(--pms-space-md) var(--pms-space-md);
overflow-block: auto;
}
.pms-btn,
.pms-party-add,
.pms-chip,
.pms-segmented,
.pms-segmented-item,
.pms-party-grid-status,
.pms-party-row-popover,
.pms-record-detail-grid,
.pms-directory-heading-icon,
.pms-directory-stats div,
.pms-brand-badge,
.pms-lookup-results {
border-radius: 0;
box-shadow: none;
}
.pms-btn-primary {
box-shadow: none;
}
/* ── 3. Page canvas ───────────────────────────────────────────────────
Chrome (top bar + sidebar) stays --pms-bg; the workspace behind the
panels drops to --pms-canvas so white panels read as a layer above it.
─────────────────────────────────────────────────────────────────── */
.pms-main {
background: var(--pms-canvas);
}
.pms-topbar,
.pms-sidebar {
background: var(--pms-bg);
border-color: var(--pms-rule);
}
.pms-topbar {
display: grid;
grid-template-columns: minmax(0, 1fr)
minmax(var(--pms-shell-search-min-inline-size), var(--pms-shell-search-max-inline-size))
minmax(0, 1fr);
gap: var(--pms-space-md);
padding-inline: var(--pms-space-lg);
border-bottom: 1px solid var(--pms-rule);
}
html[dir="rtl"] .pms-sidebar {
border-inline-start: 1px solid var(--pms-rule);
}
/* ── 4. Sidebar navigation ────────────────────────────────────────────
The reported defect: group headers were 11px uppercase while their
own children were 14px, so a parent read as a caption under its
items. Group headers now outrank children in size and weight, and
the children are held by an indent rule instead of by icons.
─────────────────────────────────────────────────────────────────── */
.pms-nav-group-toggle {
gap: 0.6875rem;
width: 100%;
margin: 0.5rem 0 0;
padding: 0.5rem 0.875rem;
font-size: 0.84375rem; /* 13.5px */
font-weight: 600;
letter-spacing: 0;
text-transform: none;
color: var(--pms-fg);
}
.pms-nav-group-toggle:hover {
background: var(--pms-bg-alt);
}
.pms-nav-group-toggle[aria-expanded="true"] {
background: var(--pms-bg-alt);
}
.pms-nav-group-toggle .pms-nav-icon {
color: var(--pms-fg-muted);
}
.pms-nav-group-toggle[aria-expanded="true"] .pms-nav-icon {
color: var(--pms-accent);
}
.pms-navlist > .pms-nav-item {
margin: 0;
padding: 0.5rem 0.875rem;
border-radius: 0;
font-size: 0.84375rem;
font-weight: 600;
}
/* Children: one step down, indented against a hairline. */
.pms-subnav {
margin-inline-start: 1.6875rem;
border-inline-start: 1px solid var(--pms-rule-soft);
padding-bottom: 0;
}
.pms-subnav .pms-nav-item {
margin: 0;
padding: 0.40625rem 0.875rem;
border-radius: 0;
font-size: 0.8125rem;
font-weight: 400;
color: color-mix(in srgb, var(--pms-fg) 82%, transparent);
}
.pms-subnav .pms-nav-item .pms-nav-icon {
display: none; /* icons belong to the group, not the leaf */
}
.pms-nav-item.active,
.pms-subnav .pms-nav-item.active {
background: color-mix(in srgb, var(--pms-accent) 8%, transparent);
color: var(--pms-accent);
font-weight: 700;
box-shadow: inset 2px 0 0 var(--pms-accent);
}
html[dir="rtl"] .pms-nav-item.active,
html[dir="rtl"] .pms-subnav .pms-nav-item.active {
box-shadow: inset -2px 0 0 var(--pms-accent);
}
/* The report sub-headings are the one place uppercase micro-type stays,
because they label groups of leaves rather than compete with them. */
.pms-subnav-label {
padding-inline: 1.375rem 0.75rem;
font-size: 0.625rem;
letter-spacing: 0.09em;
}
/* Brand block and bottom account strip move to the top bar. */
.pms-sidebar .pms-brand,
.pms-nav-bottom {
display: none;
}
.pms-navlist {
padding: 0.75rem 0;
}
/* ── 5. Top bar: brand + account menu [RAZOR] ────────────────────────
Markup for .pms-topbar-brand and .pms-usermenu is in the guideline.
─────────────────────────────────────────────────────────────────── */
.pms-topbar-start,
.pms-topbar-end {
display: flex;
align-items: center;
min-inline-size: 0;
}
.pms-topbar-start {
grid-column: 1;
justify-self: start;
gap: var(--pms-space-sm);
}
.pms-topbar-end {
grid-column: 3;
justify-self: end;
margin-inline-start: 0;
gap: var(--pms-space-sm);
}
.pms-topbar-brand {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
flex: 0 0 28px;
background: var(--pms-accent);
color: var(--pms-accent-fg);
font-size: 0.59375rem;
font-weight: 800;
letter-spacing: 0.04em;
}
.pms-topbar-title {
min-inline-size: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 0.9375rem;
color: var(--pms-fg);
letter-spacing: 0.005em;
}
/* The authenticated shell search mirrors the MyCollege screen launcher, but is
progressively enhanced from static SSR by shell.js. The hidden catalog is already
policy-filtered on the server before JavaScript receives it. */
.pms-shell-search {
position: relative;
grid-column: 2;
justify-self: center;
min-inline-size: 0;
inline-size: 100%;
max-inline-size: var(--pms-shell-search-max-inline-size);
}
.pms-shell-search-form {
display: flex;
align-items: center;
block-size: var(--pms-shell-search-control-block-size);
min-inline-size: 0;
border: 1px solid var(--pms-panel-border);
background: var(--pms-bg-alt);
color: var(--pms-fg-muted);
}
.pms-shell-search-form:focus-within {
border-color: var(--pms-accent);
outline: var(--pms-focus-ring-width) solid var(--pms-accent);
outline-offset: var(--pms-focus-ring-offset);
}
.pms-shell-search-icon {
flex: 0 0 auto;
margin-inline-start: var(--pms-space-md);
}
.pms-shell-search-input {
flex: 1 1 auto;
min-inline-size: 0;
block-size: 100%;
padding-inline: var(--pms-space-sm);
border: 0;
outline: 0;
background: transparent;
color: var(--pms-fg);
font: inherit;
font-size: var(--pms-font-small);
}
.pms-shell-search-input::placeholder {
color: var(--pms-fg-muted);
opacity: 1;
}
.pms-shell-search-input::-webkit-search-cancel-button {
display: none;
}
.pms-shell-search-clear {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 var(--pms-shell-search-control-block-size);
align-self: stretch;
padding: 0;
border: 0;
border-inline-start: 1px solid var(--pms-rule-soft);
background: transparent;
color: var(--pms-fg-muted);
cursor: pointer;
}
.pms-shell-search-clear[hidden] {
display: none;
}
.pms-shell-search-clear:hover {
background: color-mix(in srgb, var(--pms-accent) 7%, var(--pms-bg-alt));
color: var(--pms-fg);
}
.pms-shell-search-clear:focus-visible {
outline: var(--pms-focus-ring-width) solid var(--pms-accent);
outline-offset: calc(var(--pms-focus-ring-offset) * -1);
}
.pms-shell-search-results {
position: absolute;
inset-block-start: calc(100% + var(--pms-space-sm));
inset-inline-start: 50%;
z-index: var(--pms-shell-search-layer);
inline-size: min(
var(--pms-shell-search-max-inline-size),
calc(100vw - var(--pms-space-xl) - var(--pms-space-xl)));
max-block-size: min(
var(--pms-shell-search-results-max-block-size),
calc(100dvh - var(--pms-topbar-h, 52px) - var(--pms-space-xl)));
overflow-y: auto;
translate: -50% 0;
border: 1px solid var(--pms-panel-border);
background: var(--pms-bg);
box-shadow: none;
}
.pms-shell-search-result {
display: grid;
grid-template-columns: var(--pms-shell-search-result-icon-size) minmax(0, 1fr);
align-items: center;
gap: var(--pms-space-sm);
min-block-size: var(--pms-control-block-size);
padding: var(--pms-space-sm) var(--pms-space-md);
border-inline-start: var(--pms-selection-rule-width) solid transparent;
border-bottom: 1px solid var(--pms-rule-soft);
color: var(--pms-fg);
text-decoration: none;
}
.pms-shell-search-result:last-child {
border-bottom: 0;
}
.pms-shell-search-result:hover,
.pms-shell-search-result:focus-visible,
.pms-shell-search-result.is-active {
border-inline-start-color: var(--pms-accent);
background: color-mix(in srgb, var(--pms-accent) 7%, var(--pms-bg));
color: var(--pms-fg);
text-decoration: none;
}
.pms-shell-search-result-mark {
display: inline-flex;
align-items: center;
justify-content: center;
inline-size: var(--pms-shell-search-result-icon-size);
block-size: var(--pms-shell-search-result-icon-size);
color: var(--pms-accent);
}
.pms-shell-search-result-copy {
min-inline-size: 0;
}
.pms-shell-search-result-title,
.pms-shell-search-result-group {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.pms-shell-search-result-title {
font-size: var(--pms-font-body);
font-weight: var(--pms-font-weight-semibold);
}
.pms-shell-search-result-group {
margin-block-start: var(--pms-space-xs);
color: var(--pms-fg-muted);
font-size: var(--pms-font-micro);
font-weight: var(--pms-font-weight-medium);
letter-spacing: var(--pms-tracking-status);
text-transform: uppercase;
}
.pms-shell-search-empty {
padding: var(--pms-space-lg);
color: var(--pms-fg-muted);
font-size: var(--pms-font-small);
text-align: center;
}
html[dir="rtl"] .pms-shell-search-result-mark svg {
transform: scaleX(-1);
}
html[dir="rtl"] .pms-shell-search-results {
translate: 50% 0;
}
.pms-lang-switcher {
gap: 0;
border: 1px solid var(--pms-border);
}
.pms-lang-switcher a {
padding: 0.3125rem 0.5625rem;
border: 0;
border-radius: 0;
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.06em;
}
.pms-lang-switcher a[aria-current="true"] {
background: var(--pms-bg-alt);
color: var(--pms-fg);
}
.pms-topbar-btn {
width: 28px;
height: 28px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 0;
color: var(--pms-fg-muted);
}
.pms-usermenu {
position: relative;
}
.pms-usermenu > summary {
display: inline-flex;
align-items: center;
gap: 0.5625rem;
height: 34px;
padding-inline: 0.375rem 0.5625rem;
background: var(--pms-bg-alt);
color: var(--pms-fg);
font-size: 0.78125rem;
font-weight: 600;
cursor: pointer;
list-style: none;
}
.pms-usermenu > summary::-webkit-details-marker { display: none; }
.pms-usermenu > summary:hover {
background: color-mix(in srgb, var(--pms-accent) 8%, var(--pms-bg-alt));
}
.pms-usermenu-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
flex: 0 0 24px;
background: var(--pms-accent);
color: var(--pms-accent-fg);
font-family: Archivo, sans-serif;
font-size: 0.65625rem;
font-weight: 700;
}
.pms-usermenu-chevron {
color: var(--pms-fg-muted);
transition: transform var(--pms-duration-fast) var(--pms-ease-out);
}
.pms-usermenu[open] .pms-usermenu-chevron { transform: rotate(180deg); }
.pms-usermenu-popover {
position: absolute;
inset-block-start: calc(100% + 9px);
inset-inline-end: 0;
z-index: 300;
width: 252px;
background: var(--pms-bg);
border: 1px solid var(--pms-panel-border);
box-shadow: 0 10px 28px rgba(15, 23, 42, 0.1);
}
html[data-theme="dark"] .pms-usermenu-popover {
background: var(--pms-bg-alt);
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
}
.pms-usermenu-who {
padding: 0.75rem 0.875rem;
border-bottom: 1px solid var(--pms-rule-soft);
}
.pms-usermenu-who span {
display: block;
color: var(--pms-fg-muted);
font-size: 0.625rem;
font-weight: 700;
letter-spacing: 0.11em;
text-transform: uppercase;
}
.pms-usermenu-who strong {
display: block;
margin-top: 0.25rem;
font-size: 0.84375rem;
}
.pms-usermenu-action {
display: flex;
align-items: center;
gap: 0.625rem;
padding: 0.625rem 0.875rem;
color: var(--pms-fg);
font-size: 0.8125rem;
text-decoration: none;
}
.pms-usermenu-action:hover {
background: var(--pms-bg-alt);
text-decoration: none;
}
.pms-usermenu-action--danger {
border-top: 1px solid var(--pms-rule-soft);
color: var(--pms-danger);
}
/* Sign-out is a form post, so the last menu row is a