/* =========================================================================
Afritech Portal System - Admin UI (1.1)
Modern, accessible, WP-admin-aware design system.
========================================================================= */
/* ---------- Tokens ----------
* Declared on :root so they resolve everywhere - including components
* that render outside .afps-wrap (modal backdrop, toasts, Flatpickr
* calendar). A previous version scoped them to .afps-wrap and any
* modal button relying on, e.g., var(--afps-danger) collapsed to
* white-on-white and effectively disappeared. */
:root {
--afps-font: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
--afps-bg: #f6f8fb;
--afps-surface: #ffffff;
--afps-surface-2: #f8fafc;
--afps-border: #e5e9f0;
--afps-border-strong: #cfd6e1;
--afps-text: #0f172a;
--afps-text-mute: #64748b;
--afps-text-soft: #94a3b8;
--afps-brand: #1c3f9e;
--afps-brand-dark: #16327e;
--afps-brand-soft: #eef2fb;
--afps-accent: #0b1f4e;
--afps-success: #10b981;
--afps-warning: #f59e0b;
--afps-danger: #ef4444;
--afps-info: #0ea5e9;
--afps-radius-sm: 6px;
--afps-radius: 10px;
--afps-radius-lg: 14px;
/* Softer, more diffuse, slate-tinted elevation - reads more "app" than
the old tight drop shadows. Each is layered (near + far) for depth. */
--afps-shadow-xs: 0 1px 2px rgba(15,23,42,.05);
--afps-shadow-sm: 0 1px 2px rgba(15,23,42,.05), 0 2px 6px rgba(15,23,42,.06);
--afps-shadow-md: 0 2px 4px rgba(15,23,42,.04), 0 10px 24px rgba(15,23,42,.08);
--afps-shadow-lg: 0 8px 16px rgba(15,23,42,.06), 0 24px 52px rgba(15,23,42,.14);
--afps-ring: 0 0 0 3px rgba(28,63,158,.18);
--afps-shadow-brand: 0 8px 22px rgba(28,63,158,.20);
--afps-t: 180ms cubic-bezier(.4,0,.2,1);
/* ---- Density scale (comfortable default; Compact overrides below) ----
* Consumed by controls, table cells and cards so a single [data-afps-density]
* attribute on .afps-wrap retunes the whole page's rhythm. */
--afps-control-h: 36px; /* buttons, search, toolbar controls */
--afps-input-h: 40px; /* form inputs / selects / textarea rows */
--afps-cell-py: 12px; /* table cell vertical padding */
--afps-card-pad: 18px; /* KPI card padding */
}
/* Config Sync: selectable portal blueprint and five-version rollback. */
#wpbody-content .afps-wrap.afi-sync-wrap { max-width: 1440px; padding-top: 22px; }
.afi-sync-hero { display: flex; align-items: center; justify-content: space-between; gap: 28px; overflow: hidden; margin-bottom: 18px; padding: 28px 30px; border: 1px solid #cfdcf7; border-radius: 18px; background: radial-gradient(circle at 92% 12%, rgba(59,130,246,.2), transparent 34%), linear-gradient(135deg, #f8fbff 0%, #eef4ff 56%, #f8fafc 100%); }
.afi-sync-eyebrow { display: block; margin-bottom: 7px; color: #2563eb; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.afi-sys-h1 { display: flex; align-items: center; gap: 12px; margin: 0 !important; }
.afi-sys-version { font-size: 12px; font-weight: 700; color: #1d4ed8; background: #fff; border: 1px solid #bfdbfe; border-radius: 999px; padding: 4px 10px; box-shadow: 0 1px 2px rgba(15,23,42,.06); }
.afi-sys-intro { max-width: 76ch; margin: 8px 0 0; color: #526179; font-size: 14px; }
.afi-sync-hero-state { display: flex; flex: 0 0 auto; align-items: center; gap: 12px; min-width: 190px; padding: 15px 17px; border: 1px solid #cbd5e1; border-radius: 14px; background: rgba(255,255,255,.86); box-shadow: 0 8px 28px rgba(30,64,175,.08); }
.afi-sync-hero-state > .dashicons { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 11px; color: #fff; background: #16a34a; font-size: 22px; }
.afi-sync-hero-state.has-pending > .dashicons { background: #f59e0b; }
.afi-sync-hero-state strong,
.afi-sync-hero-state span { display: block; }
.afi-sync-hero-state strong { color: #0f172a; font-size: 18px; line-height: 1.1; }
.afi-sync-hero-state div span { margin-top: 2px; color: #64748b; font-size: 11px; }
.afi-sys-panel { background: #fff; border: 1px solid #dfe3ec; border-radius: 12px; padding: 22px; margin-top: 14px; }
.afi-sys-muted { color: #8a91a3; }
.afi-sync-result { margin: 0 0 18px !important; border-radius: 10px; }
.afi-sync-result p { display: flex; align-items: center; gap: 8px; }
.afi-sync-meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 16px; }
.afi-sync-meta > div { display: flex; align-items: center; gap: 11px; min-width: 0; background: #fff; border: 1px solid #dfe6f0; border-radius: 12px; padding: 13px 15px; box-shadow: 0 1px 2px rgba(15,23,42,.03); }
.afi-sync-meta > div > .dashicons { display: grid; flex: 0 0 auto; width: 34px; height: 34px; place-items: center; border-radius: 9px; color: #1d4ed8; background: #eef4ff; font-size: 18px; }
.afi-sync-meta small,
.afi-sync-history-row span { display: block; color: #64748b; font-size: 11px; margin-bottom: 2px; }
.afi-sync-meta strong { display: block; color: #172033; font-size: 15px; }
.afi-sync-banner-pref { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 0 0 16px; padding: 13px 16px; background: #fff; border: 1px solid #dfe6f0; border-radius: 12px; }
.afi-sync-banner-pref p { margin: 3px 0 0; color: #64748b; max-width: 74ch; font-size: 12px; }
.afi-sync-banner-pref form { margin: 0; }
.afi-sync-toolbar { display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: 16px; margin: 20px 0 12px; padding: 13px 15px; border: 1px solid #dfe6f0; border-radius: 12px; background: #fff; }
.afi-sync-toolbar > div > strong,
.afi-sync-toolbar > div > span { display: block; }
.afi-sync-toolbar > div > span { margin-top: 2px; color: #64748b; font-size: 11px; }
.afi-sync-toolbar label { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; }
.afi-sync-toolbar .button-primary { min-height: 38px; padding: 5px 16px; border: 0; border-radius: 8px; background: #1d4ed8; font-weight: 700; box-shadow: 0 5px 14px rgba(29,78,216,.2); }
.afi-sync-toolbar .button-primary:disabled { color: #94a3b8 !important; background: #e2e8f0 !important; box-shadow: none; }
.afi-sync-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.afi-sync-card { position: relative; display: block; min-height: 150px; background: #fff; border: 1px solid #dfe6f0; border-radius: 14px; padding: 17px 18px; cursor: pointer; box-shadow: 0 1px 2px rgba(15,23,42,.03); transition: transform .15s, border-color .15s, box-shadow .15s; }
.afi-sync-card:not(.is-disabled):hover { transform: translateY(-1px); border-color: #7da2ef; box-shadow: 0 9px 24px rgba(28,63,158,.1); }
.afi-sync-card.is-in_sync { border-color: #bbebd0; background: linear-gradient(145deg,#fff 0%,#f5fcf7 100%); }
.afi-sync-card.is-unavailable { background: #f8fafc; opacity: .72; cursor: default; }
.afi-sync-card-head { display: flex; align-items: center; gap: 10px; }
.afi-sync-card-head > input { flex: 0 0 auto; margin: 0; }
.afi-sync-card-icon { display: grid; flex: 0 0 auto; width: 32px; height: 32px; place-items: center; border-radius: 9px; color: #1d4ed8; background: #eef4ff; font-size: 17px; }
.afi-sync-card.is-in_sync .afi-sync-card-icon { color: #15803d; background: #dcfce7; }
.afi-sync-card.is-unavailable .afi-sync-card-icon { color: #64748b; background: #e2e8f0; }
.afi-sync-card-head > strong { flex: 1; font-size: 14px; }
.afi-sync-card p { color: #64748b; font-size: 12px; line-height: 1.55; margin: 11px 0 3px; }
.afi-sync-card details { margin-top: 8px; color: #1d4ed8; font-size: 11px; }
.afi-sync-card details summary { width: fit-content; padding: 3px 0; font-weight: 700; }
.afi-sync-card details ul { color: #526179; margin: 7px 0 0 18px; list-style: disc; }
.afi-sync-badge { border-radius: 999px; padding: 4px 9px; font-size: 10px; font-weight: 800; white-space: nowrap; }
.afi-sync-badge.is-good { color: #166534; background: #dcfce7; }
.afi-sync-badge.is-warn { color: #9a3412; background: #ffedd5; }
.afi-sync-badge.is-new { color: #1e40af; background: #dbeafe; }
.afi-sync-badge.is-muted { color: #5f6674; background: #e8edf3; }
.afi-sync-history { margin-top: 26px; background: #fff; border: 1px solid #dfe6f0; border-radius: 14px; padding: 20px 22px; box-shadow: 0 1px 2px rgba(15,23,42,.03); }
.afi-sync-history h2 { margin-top: 0; }
.afi-sync-history > p { color: #64748b; font-size: 12px; }
.afi-sync-history-list { border-top: 1px solid #e9eef5; }
.afi-sync-history-row { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 13px 0; border-bottom: 1px solid #e9eef5; }
.afi-sync-history-row span { margin: 4px 0 0; }
.afi-sync-developer { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 18px; padding: 16px 18px; border: 1px dashed #9ba9c4; border-radius: 12px; background: #f8faff; }
.afi-sync-developer p { margin: 4px 0 0; color: #646b7a; }
.afi-sync-modal { display: none; position: fixed; inset: 0; z-index: 100000; align-items: center; justify-content: center; background: rgba(12, 20, 38, .58); }
.afi-sync-modal.is-open { display: flex; }
.afi-sync-modal-box { width: min(520px, calc(100% - 40px)); background: #fff; border-radius: 14px; padding: 24px 26px; box-shadow: 0 24px 70px rgba(0, 0, 0, .3); }
.afi-sync-modal-box h2 { margin-top: 0; }
.afi-sync-modal-box ul { list-style: disc; margin-left: 22px; }
.afi-sync-warning { color: #92400e; background: #fffbeb; border: 1px solid #fcd34d; border-radius: 8px; padding: 10px 12px; }
.afi-sync-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
@media (max-width: 900px) {
.afi-sync-hero { align-items: flex-start; flex-direction: column; }
.afi-sync-meta { grid-template-columns: repeat(2, minmax(0,1fr)); }
.afi-sync-grid { grid-template-columns: 1fr; }
.afi-sync-toolbar { grid-template-columns: 1fr; align-items: start; }
.afi-sync-history-row,
.afi-sync-developer { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 600px) {
.afi-sync-hero { padding: 22px 20px; }
.afi-sync-hero-state { width: 100%; }
.afi-sync-meta { grid-template-columns: 1fr; }
}
.afps-wrap,
.afps-wrap * {
box-sizing: border-box;
}
/* Respect users who ask the OS to reduce motion: kill transitions,
animations and smooth-scroll everywhere inside our surfaces. */
@media (prefers-reduced-motion: reduce) {
.afps-wrap *,
.afps-modal-backdrop,
.afps-modal,
.afps-toast,
.afps-notice {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
scroll-behavior: auto !important;
}
}
.afps-wrap {
background: var(--afps-bg);
margin: 10px 20px 40px 0;
padding: 24px 28px 48px;
border-radius: var(--afps-radius-lg);
font-family: var(--afps-font);
font-size: 14px;
line-height: 1.55;
color: var(--afps-text);
min-height: calc(100vh - 120px);
}
/* Make the WP admin look a bit calmer around us */
#wpbody-content .afps-wrap h1,
#wpbody-content .afps-wrap h2,
#wpbody-content .afps-wrap h3 {
color: var(--afps-text);
font-family: var(--afps-font);
letter-spacing: -0.01em;
}
.afps-wrap h1 { font-size: 24px; font-weight: 700; margin: 0 0 4px; }
.afps-wrap h2 { font-size: 18px; font-weight: 700; margin: 22px 0 10px; }
.afps-wrap h3 { font-size: 15px; font-weight: 600; margin: 16px 0 8px; }
.afps-wrap a { color: var(--afps-brand); text-decoration: none; transition: color var(--afps-t); }
.afps-wrap a:hover { color: var(--afps-brand-dark); }
/* Text links get a crisp offset ring; button-styled links get a subtle
inset halo instead so they don't visibly shift or grow after a click. */
.afps-wrap a:focus-visible {
outline: 2px solid var(--afps-brand);
outline-offset: 2px;
}
.afps-wrap a.button:focus,
.afps-wrap a.button:focus-visible,
.afps-wrap a.button-primary:focus,
.afps-wrap a.button-primary:focus-visible,
.afps-wrap a.button-secondary:focus,
.afps-wrap a.button-secondary:focus-visible,
.afps-wrap h1 .page-title-action:focus,
.afps-wrap h1 .page-title-action:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(28, 63, 158, 0.18);
}
/* After a mouse click, drop focus styling entirely so the button returns
to its resting look. Keyboard users still get :focus-visible. */
.afps-wrap a.button:focus:not(:focus-visible),
.afps-wrap a.button-primary:focus:not(:focus-visible),
.afps-wrap a.button-secondary:focus:not(:focus-visible),
.afps-wrap h1 .page-title-action:focus:not(:focus-visible) {
box-shadow: none;
}
.afps-wrap hr { border: 0; border-top: 1px solid var(--afps-border); margin: 20px 0; }
/* ---------- Quick navigation ---------- */
.afps-command-trigger {
display: inline-flex;
align-items: center;
gap: 7px;
min-height: var(--afps-control-h);
padding: 0 10px;
color: var(--afps-text);
background: var(--afps-surface);
border: 1px solid var(--afps-border-strong);
border-radius: var(--afps-radius-sm);
cursor: pointer;
font: inherit;
font-weight: 600;
white-space: nowrap;
}
.afps-command-trigger:hover { border-color: var(--afps-brand); color: var(--afps-brand); }
.afps-command-trigger:focus-visible { outline: none; box-shadow: var(--afps-ring); }
.afps-command-trigger > span { font-size: 17px; line-height: 1; }
.afps-command-trigger kbd {
padding: 1px 4px;
color: var(--afps-text-mute);
background: var(--afps-surface-2);
border: 1px solid var(--afps-border);
border-radius: 3px;
font: 11px var(--afps-font);
}
.afps-command-palette[hidden] { display: none; }
.afps-command-palette {
position: fixed;
z-index: 100100;
inset: 0;
display: flex;
align-items: flex-start;
justify-content: center;
padding: min(14vh, 130px) 16px 24px;
background: rgba(15,23,42,.48);
}
.afps-command-palette__dialog {
width: min(100%, 560px);
overflow: hidden;
background: var(--afps-surface);
border: 1px solid var(--afps-border);
border-radius: var(--afps-radius-lg);
box-shadow: var(--afps-shadow-lg);
}
.afps-command-palette__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 15px 16px 9px;
}
.afps-command-palette__head label { color: var(--afps-text); font-weight: 700; }
.afps-command-palette__head button {
width: 28px;
height: 28px;
padding: 0;
color: var(--afps-text-mute);
background: transparent;
border: 0;
border-radius: 4px;
cursor: pointer;
font-size: 24px;
line-height: 1;
}
.afps-command-palette__head button:hover { color: var(--afps-text); background: var(--afps-surface-2); }
.afps-command-palette input {
width: calc(100% - 32px);
height: 42px;
margin: 0 16px;
padding: 0 12px;
color: var(--afps-text);
border: 1px solid var(--afps-border-strong);
border-radius: var(--afps-radius-sm);
font: inherit;
}
.afps-command-palette input:focus { outline: none; border-color: var(--afps-brand); box-shadow: var(--afps-ring); }
.afps-command-palette__hint { margin: 8px 16px; color: var(--afps-text-mute); font-size: 12px; }
.afps-command-palette__results { max-height: min(50vh, 360px); padding: 4px 8px 10px; overflow-y: auto; }
.afps-command-palette__results a {
display: block;
padding: 10px 12px;
color: var(--afps-text);
border-radius: var(--afps-radius-sm);
font-weight: 600;
text-decoration: none;
}
.afps-command-palette__results a:hover,
.afps-command-palette__results a[aria-selected="true"] { color: var(--afps-brand-dark); background: var(--afps-brand-soft); }
.afps-command-palette__empty { margin: 12px 8px; color: var(--afps-text-mute); text-align: center; }
/* ---------- Page header (compact: title, subtitle, right-aligned actions) ---------- */
.afps-page-head {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 16px;
flex-wrap: wrap;
margin-bottom: 12px;
}
.afps-page-head .afps-page-title h1 {
margin: 0;
font-size: 22px;
font-weight: 700;
letter-spacing: -0.01em;
}
.afps-page-head .afps-subtitle {
margin: 2px 0 0;
font-size: 13px;
color: var(--afps-text-mute);
}
.afps-page-head .afps-page-actions {
display: inline-flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
/* Legacy page-title-action links used in headings - collapse to secondary links */
.afps-wrap h1 .page-title-action,
.afps-wrap h1 a.page-title-action {
display: inline-flex;
align-items: center;
gap: 6px;
margin-left: 10px;
padding: 6px 12px;
font-size: 13px;
font-weight: 600;
background: var(--afps-surface);
color: var(--afps-text);
border: 1px solid var(--afps-border-strong);
border-radius: 6px;
box-shadow: none;
transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.afps-wrap h1 .page-title-action:hover {
background: var(--afps-brand-soft);
border-color: var(--afps-brand);
color: var(--afps-brand-dark);
}
/* ---------- Toolbar: view toggle + search + filter chips on one row ---------- */
.afps-toolbar {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin: 10px 0 12px;
}
.afps-toolbar .afps-view-toggle {
margin: 0;
}
.afps-toolbar form {
margin: 0;
padding: 0;
background: transparent;
border: 0;
box-shadow: none;
flex: 1;
min-width: 220px;
display: flex;
gap: 6px;
}
.afps-toolbar form input[type="search"] {
flex: 1;
height: var(--afps-control-h);
padding: 0 12px 0 36px;
border: 1px solid var(--afps-border-strong);
border-radius: 6px;
background:
url("data:image/svg+xml;utf8,") no-repeat 10px center,
var(--afps-surface);
font-family: var(--afps-font);
font-size: 13px;
line-height: calc(var(--afps-control-h) - 2px);
min-width: 0;
max-width: none;
}
.afps-toolbar form input[type="search"]:focus {
outline: none;
border-color: var(--afps-brand);
box-shadow: 0 0 0 3px rgba(28,63,158,.14);
}
/* ---------- Hero banner ---------- */
.afps-hero {
position: relative;
overflow: hidden;
background:
radial-gradient(1200px 200px at 90% -20%, rgba(245,180,10,.28), transparent 60%),
radial-gradient(600px 300px at -10% 110%, rgba(245,180,10,.22), transparent 60%),
linear-gradient(135deg, #0b1f4e 0%, #14307a 50%, #122a68 100%);
color: #fff;
padding: 28px 28px;
border-radius: var(--afps-radius-lg);
margin-bottom: 22px;
box-shadow: var(--afps-shadow-md);
}
.afps-hero::after {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
background-size: 32px 32px;
pointer-events: none;
}
/* Hero text must win over #wpbody-content .afps-wrap h1 (specificity 1,1,1) */
#wpbody-content .afps-wrap .afps-hero,
.afps-wrap .afps-hero { color: #fff; }
#wpbody-content .afps-wrap .afps-hero h1,
.afps-wrap .afps-hero h1 {
color: #fff;
font-size: 26px;
margin: 0 0 6px;
font-weight: 700;
letter-spacing: -0.02em;
}
#wpbody-content .afps-wrap .afps-hero p,
.afps-wrap .afps-hero p {
color: #dbeafe;
margin: 0;
font-size: 14px;
}
/* ---------- Cards (KPI grid) ---------- */
.afps-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 14px;
margin-top: 18px;
}
.afps-card {
position: relative;
background: var(--afps-surface);
border: 1px solid var(--afps-border);
border-radius: var(--afps-radius);
padding: var(--afps-card-pad) var(--afps-card-pad) calc(var(--afps-card-pad) - 2px);
box-shadow: var(--afps-shadow-xs);
transition: box-shadow var(--afps-t), transform var(--afps-t), border-color var(--afps-t);
}
.afps-card::before {
content: "";
position: absolute;
left: 0; top: 0; bottom: 0;
width: 3px;
background: linear-gradient(180deg, var(--afps-brand), var(--afps-accent));
border-radius: var(--afps-radius) 0 0 var(--afps-radius);
opacity: 0;
transition: opacity var(--afps-t);
}
.afps-card:hover {
box-shadow: var(--afps-shadow-sm);
border-color: var(--afps-border-strong);
transform: translateY(-1px);
}
.afps-card:hover::before { opacity: 1; }
.afps-card h3 {
margin: 0 0 8px;
font-size: 11px;
text-transform: uppercase;
color: var(--afps-text-mute);
letter-spacing: .7px;
font-weight: 600;
display: flex;
align-items: center;
gap: 8px;
}
.afps-card h3 .afps-ico {
color: var(--afps-brand);
flex-shrink: 0;
}
.afps-card .value {
font-size: 28px;
font-weight: 700;
color: var(--afps-text);
letter-spacing: -0.02em;
line-height: 1.1;
}
.afps-card .sub {
color: var(--afps-text-mute);
font-size: 12px;
margin-top: 6px;
}
.afps-card .trend {
display: inline-flex;
align-items: center;
gap: 4px;
margin-top: 8px;
padding: 2px 8px;
border-radius: 999px;
font-size: 11px;
font-weight: 600;
background: rgba(16,185,129,.1);
color: #047857;
}
.afps-card .trend.down { background: rgba(239,68,68,.1); color: #b91c1c; }
/* ---------- Tabs ---------- */
.afps-tabs {
margin: 20px 0 16px;
display: flex;
flex-wrap: wrap;
gap: 4px;
padding: 4px;
background: var(--afps-surface);
border: 1px solid var(--afps-border);
border-radius: var(--afps-radius);
box-shadow: var(--afps-shadow-xs);
}
.afps-tabs a {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
font-size: 13px;
font-weight: 500;
white-space: nowrap; /* tab labels never wrap mid-phrase inside the pill */
color: var(--afps-text-mute);
border-radius: 7px;
text-decoration: none;
transition: background var(--afps-t), color var(--afps-t);
background: transparent;
border: 0;
}
.afps-tabs a:hover {
background: var(--afps-surface-2);
color: var(--afps-text);
}
.afps-tabs a.active {
background: var(--afps-text);
color: #fff;
font-weight: 600;
box-shadow: var(--afps-shadow-sm);
}
.afps-tabs a.active:hover { color: #fff; }
/* Students reports: keep the year scope and print action in the tab rail. */
.afps-students-reports > .afps-tabs { align-items: center; }
.afps-student-report-controls {
display: flex;
min-width: 0;
align-items: center;
gap: 8px;
margin: 0 0 0 auto;
padding-left: 14px;
border-left: 1px solid var(--afps-border);
}
.afps-student-report-controls label {
margin: 0;
color: var(--afps-text-mute);
font-size: 11px;
font-weight: 700;
white-space: nowrap;
}
.afps-student-report-controls select {
width: 230px;
max-width: 32vw;
min-height: 36px;
margin: 0;
padding: 0 34px 0 11px;
border-color: #d7deea;
border-radius: 8px;
color: var(--afps-text);
background-color: #f8fafc;
font-size: 12.5px;
font-weight: 600;
box-shadow: none;
}
.afps-student-report-controls select:focus {
border-color: #7fa5ed;
box-shadow: 0 0 0 3px rgba(0,68,170,.14);
}
.afps-student-report-controls .button {
display: inline-flex;
min-height: 36px;
align-items: center;
margin: 0;
padding: 0 14px;
border-radius: 8px;
}
@media (max-width: 900px) {
.afps-students-reports > .afps-tabs { overflow: visible; flex-wrap: wrap; }
.afps-student-report-controls {
flex: 1 1 100%;
margin: 4px 0 0;
padding: 8px 0 0;
border-top: 1px solid var(--afps-border);
border-left: 0;
}
.afps-student-report-controls select { width: min(280px, 55vw); max-width: none; }
}
@media (max-width: 520px) {
.afps-student-report-controls label { display: none; }
.afps-student-report-controls select { flex: 1 1 auto; width: auto; min-width: 0; }
}
/* ---------- Forms ---------- */
.afps-form { margin-top: 10px; }
.afps-form label {
display: block;
font-weight: 600;
font-size: 12px;
margin: 14px 0 6px;
color: var(--afps-text);
letter-spacing: 0.01em;
}
.afps-form label > input[type="checkbox"] {
margin-right: 6px;
vertical-align: middle;
}
.afps-form input[type="text"],
.afps-form input[type="email"],
.afps-form input[type="password"],
.afps-form input[type="url"],
.afps-form input[type="date"],
.afps-form input[type="datetime-local"],
.afps-form input[type="time"],
.afps-form input[type="number"],
.afps-form input[type="search"],
.afps-form input[type="tel"],
.afps-form select,
.afps-form textarea {
width: 100%;
max-width: 460px;
height: var(--afps-input-h);
padding: 0 12px;
/* Keep WordPress's single, right-aligned native select arrow. A background
shorthand resets the arrow's repeat mode and tiles it across wide selects. */
background-color: var(--afps-surface);
border: 1px solid var(--afps-border-strong);
border-radius: var(--afps-radius-sm);
font-family: var(--afps-font);
font-size: 14px;
color: var(--afps-text);
/* box-shadow is intentionally NOT transitioned - transitioning it
caused the focus ring to animate outward on auto-focus and clash
with browser autofill chips, producing a visible "extend then
shrink" flash. Keep only the softer property animations. */
transition: border-color var(--afps-t), background var(--afps-t);
box-shadow: none;
line-height: calc(var(--afps-input-h) - 2px);
}
.afps-form textarea {
height: auto;
min-height: 92px;
padding: 10px 12px;
line-height: 1.5;
resize: vertical;
}
.afps-form select[multiple] {
height: auto;
padding: 6px 6px;
line-height: 1.4;
}
.afps-form input:focus,
.afps-form select:focus,
.afps-form textarea:focus {
outline: none;
border-color: var(--afps-brand);
box-shadow: 0 0 0 3px rgba(28,63,158,.18);
background-color: var(--afps-surface);
}
.afps-form input:disabled,
.afps-form textarea:disabled,
.afps-form input[readonly] {
background: var(--afps-surface-2);
color: var(--afps-text-mute);
}
.afps-form .row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
}
.afps-form .afps-actions {
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid var(--afps-border);
display: flex;
gap: 10px;
flex-wrap: wrap;
}
/* Wrap panel style - forms inside white cards */
.afps-form[style*="padding:14px"],
.afps-panel {
background: var(--afps-surface) !important;
border: 1px solid var(--afps-border) !important;
border-radius: var(--afps-radius) !important;
padding: 20px !important;
box-shadow: var(--afps-shadow-xs);
margin-bottom: 18px;
}
/* ---------- Buttons (WordPress .button overrides scoped to afps-wrap) ----------
Flat, subtle. No lift, no shadow growth, no transforms. Just a fast color
shift on hover and a darker state on active. */
.afps-wrap .button,
.afps-wrap .button-primary,
.afps-wrap .button-secondary {
display: inline-flex;
align-items: center;
gap: 6px;
height: var(--afps-control-h);
padding: 0 14px;
font-family: var(--afps-font);
font-size: 13px;
font-weight: 600;
border-radius: 6px;
border: 1px solid var(--afps-border-strong);
background: var(--afps-surface);
color: var(--afps-text);
box-shadow: none;
cursor: pointer;
transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
text-shadow: none;
line-height: calc(var(--afps-control-h) - 2px);
}
.afps-wrap .button:hover {
background: var(--afps-surface-2);
border-color: var(--afps-text-soft);
color: var(--afps-text);
}
.afps-wrap .button:active {
background: #eef2f7;
border-color: var(--afps-text-soft);
}
.afps-wrap .button-primary {
background: var(--afps-brand);
border-color: var(--afps-brand);
color: #fff;
}
.afps-wrap .button-primary:hover {
background: var(--afps-brand-dark);
border-color: var(--afps-brand-dark);
color: #fff;
}
.afps-wrap .button-primary:active {
background: #122a68;
border-color: #122a68;
}
.afps-wrap .button-small {
height: 28px;
padding: 0 10px;
font-size: 12px;
line-height: 26px;
border-radius: 5px;
}
.afps-wrap .button-danger,
.afps-wrap .button.button-danger {
background: var(--afps-danger);
border-color: var(--afps-danger);
color: #fff;
}
.afps-wrap .button-danger:hover {
background: #dc2626;
border-color: #dc2626;
color: #fff;
}
.afps-wrap .button-danger:active {
background: #b91c1c;
border-color: #b91c1c;
}
/* ---------- Tables ---------- */
.afps-table-wrap {
overflow: auto;
background: var(--afps-surface);
border: 1px solid var(--afps-border);
border-radius: var(--afps-radius);
margin-top: 14px;
box-shadow: var(--afps-shadow-xs);
}
.afps-table-wrap table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
}
.afps-table-wrap thead th {
position: sticky;
top: 0;
z-index: 1;
/* Translucent + blurred so rows softly scroll under the header - a subtle
modern cue that the head is pinned. Solid fallback set first. */
background: var(--afps-surface-2);
background: color-mix(in srgb, var(--afps-surface-2) 82%, transparent);
backdrop-filter: saturate(1.4) blur(8px);
-webkit-backdrop-filter: saturate(1.4) blur(8px);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 700;
color: var(--afps-text-mute);
padding: var(--afps-cell-py) 14px;
text-align: left;
border-bottom: 1px solid var(--afps-border);
white-space: nowrap;
}
.afps-table-wrap td {
padding: var(--afps-cell-py) 14px;
border-bottom: 1px solid var(--afps-border);
font-size: 13px;
color: var(--afps-text);
vertical-align: middle;
}
.afps-table-wrap tbody tr:last-child td { border-bottom: 0; }
.afps-table-wrap tbody tr { transition: background var(--afps-t); }
.afps-table-wrap tbody tr:hover { background: var(--afps-brand-soft); }
.afps-table-wrap td a { color: var(--afps-brand); font-weight: 500; }
.afps-table-wrap td input[type="number"],
.afps-table-wrap td input[type="text"],
.afps-table-wrap td select {
height: 32px;
line-height: 30px;
padding: 0 8px;
font-size: 13px;
max-width: 120px;
}
/* Zebra alternative on wider tables */
.afps-table-wrap.zebra tbody tr:nth-child(2n) { background: var(--afps-surface-2); }
/* ---------- Badges / chips ---------- */
.afps-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 10px;
border-radius: 999px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.02em;
text-transform: capitalize;
line-height: 16px;
white-space: nowrap;
background: var(--afps-surface-2);
color: var(--afps-text-mute);
border: 1px solid var(--afps-border);
}
.afps-badge::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
opacity: .7;
}
.afps-badge.active { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.afps-badge.graduated { background: #eff6ff; color: #16327e; border-color: #bfdbfe; }
.afps-badge.withdrawn { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.afps-badge.suspended { background: #fffbeb; color: #b45309; border-color: #fde68a; }
.afps-badge.pending { background: #fffbeb; color: #b45309; border-color: #fde68a; }
.afps-badge.paid,
.afps-badge.approved { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.afps-badge.partial { background: #eff6ff; color: #16327e; border-color: #bfdbfe; }
.afps-badge.waived { background: #f5f3ff; color: #6d28d9; border-color: #ddd6fe; }
.afps-badge.overdue { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.afps-badge.sent { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.afps-badge.failed { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.afps-badge.queued { background: #eff6ff; color: #16327e; border-color: #bfdbfe; }
.afps-badge.delivered { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.afps-badge.retired { background: #f1f5f9; color: #475569; border-color: #cbd5e1; }
/* ---------- Notices ---------- */
.afps-notice {
position: relative;
padding: 12px 38px 12px 16px;
background: #eef2fb;
border: 1px solid #bfdbfe;
border-left: 4px solid var(--afps-brand);
color: #14307a;
margin: 12px 0;
border-radius: var(--afps-radius-sm);
font-size: 13px;
animation: afps-slide-in .24s cubic-bezier(.4,0,.2,1);
}
.afps-notice.success { background: #ecfdf5; border-color: #a7f3d0; border-left-color: var(--afps-success); color: #065f46; }
.afps-notice.warning { background: #fffbeb; border-color: #fde68a; border-left-color: var(--afps-warning); color: #92400e; }
.afps-notice.danger { background: #fef2f2; border-color: #fecaca; border-left-color: var(--afps-danger); color: #991b1b; }
.afps-notice .afps-dismiss {
position: absolute;
top: 8px;
right: 10px;
background: transparent;
border: 0;
color: inherit;
opacity: .55;
cursor: pointer;
padding: 4px;
line-height: 0;
border-radius: 4px;
}
.afps-notice .afps-dismiss:hover { opacity: 1; background: rgba(0,0,0,.05); }
@keyframes afps-slide-in {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
/* ---------- Empty state ---------- */
.afps-empty {
text-align: center;
padding: 56px 24px !important;
color: var(--afps-text-mute) !important;
background: var(--afps-surface);
}
.afps-empty .afps-empty-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
margin: 0 auto 14px;
border-radius: 50%;
background: var(--afps-surface-2);
color: var(--afps-text-soft);
}
.afps-empty strong {
color: var(--afps-text);
display: block;
font-size: 15px;
font-weight: 600;
margin-bottom: 4px;
}
.afps-empty .afps-empty-desc {
display: block;
max-width: 360px;
margin: 0 auto 14px;
color: var(--afps-text-mute);
font-size: 13px;
}
.afps-empty .afps-empty-cta {
display: inline-flex;
gap: 8px;
justify-content: center;
flex-wrap: wrap;
}
/* ---------- Form card with sections ---------- */
.afps-form-card {
background: var(--afps-surface);
border: 1px solid var(--afps-border);
border-radius: 10px;
overflow: hidden;
margin: 0 0 18px;
}
/* ---------- Admissions application review ---------- */
.afps-admission-review .afps-admission-hero {
position: relative;
overflow: hidden;
align-items: center;
gap: 22px;
margin-bottom: 24px;
padding: 24px 26px;
background: linear-gradient(135deg, #f8fbff 0%, #eef4ff 100%);
border: 1px solid #d8e3f5;
border-radius: 18px;
box-shadow: 0 12px 32px rgba(22, 50, 126, .07);
}
.afps-admission-review .afps-admission-hero::after {
content: "";
position: absolute;
top: -70px;
right: -45px;
width: 190px;
height: 190px;
border-radius: 50%;
background: radial-gradient(circle, rgba(37, 87, 190, .12), rgba(37, 87, 190, 0) 70%);
pointer-events: none;
}
.afps-admission-review .afps-admission-hero .afps-page-title,
.afps-admission-review .afps-admission-hero .afps-page-actions { position: relative; z-index: 1; }
.afps-admission-review .afps-admission-hero .afps-page-title h1 {
margin-top: 5px;
font-size: clamp(25px, 2.5vw, 32px);
letter-spacing: -.04em;
}
.afps-admission-review .afps-admission-hero .afps-subtitle {
margin-top: 9px;
color: #53627a;
font-size: 13px;
line-height: 1.65;
}
.afps-admission-review .afps-admission-hero .afps-page-actions .button {
min-height: 40px;
padding: 7px 15px;
background: rgba(255, 255, 255, .88);
border-color: #c9d6eb;
border-radius: 10px;
box-shadow: 0 4px 12px rgba(15, 23, 42, .06);
}
.afps-admission-detail {
display: grid;
grid-template-columns: minmax(0, 1.45fr) minmax(320px, .95fr);
gap: 24px;
align-items: start;
}
.afps-admission-primary,
.afps-admission-actions { display: grid; gap: 20px; min-width: 0; }
.afps-admission-card {
position: relative;
overflow: hidden;
margin: 0;
padding: 24px 26px;
background: #fff;
border: 1px solid #e0e7f1;
border-radius: 16px;
box-shadow: 0 8px 24px rgba(15, 23, 42, .055);
}
.afps-admission-card > h2 {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 6px !important;
color: #172033;
font-size: 18px;
letter-spacing: -.02em;
}
.afps-admission-card > h2::before {
content: "";
flex: 0 0 auto;
width: 4px;
height: 20px;
border-radius: 999px;
background: var(--afps-brand);
}
.afps-admission-card-intro {
max-width: 64ch;
margin: 0 0 18px;
color: #6a7890;
font-size: 12.5px;
line-height: 1.55;
}
.afps-admission-info {
display: block;
overflow: hidden;
margin: 18px 0 0;
background: #e8edf5;
border: 1px solid #e4eaf2 !important;
border-radius: 12px;
box-shadow: none;
}
.afps-admission-info tbody {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1px;
}
.afps-admission-info tr {
display: flex;
min-width: 0;
min-height: 76px;
padding: 14px 16px;
flex-direction: column;
justify-content: center;
gap: 6px;
background: #fff;
}
.afps-admission-info td,
.afps-admission-info tr:nth-child(odd) td,
.afps-admission-info tr:nth-child(even) td {
display: block;
width: auto !important;
min-width: 0;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
color: #263247;
font-size: 13.5px;
line-height: 1.45;
overflow-wrap: anywhere;
}
.afps-admission-info td:first-child strong {
color: #758299;
font-size: 10.5px;
font-weight: 750;
letter-spacing: .07em;
text-transform: uppercase;
}
.afps-admission-info td:last-child a { font-weight: 650; text-decoration: none; }
.afps-admission-notes-card textarea,
.afps-admission-card select,
.afps-admission-card textarea {
min-height: 42px;
padding: 10px 12px;
background: #fbfcfe;
border-color: #cfd9e7;
border-radius: 10px;
box-shadow: inset 0 1px 2px rgba(15, 23, 42, .025);
}
.afps-admission-notes-card textarea { min-height: 112px; resize: vertical; }
.afps-admission-card .button { min-height: 40px; border-radius: 10px; }
.afps-admission-convert-card {
border-color: #cfe6dc;
background: linear-gradient(180deg, #fff 0%, #f9fdfb 100%);
}
.afps-admission-convert-card > h2::before { background: #0f9f6e; }
.afps-admission-convert-card .button-primary { width: 100%; justify-content: center; }
.afps-admission-convert-card .afps-field--checkbox {
padding: 12px;
background: #f1f7f4;
border: 1px solid #dbeae3;
border-radius: 10px;
}
.afps-admission-fee-card.is-empty {
background: linear-gradient(180deg, #fffcf5 0%, #fff 100%);
border-color: #f1dfb9;
}
.afps-admission-fee-card.is-empty > h2::before { background: #e3a008; }
.afps-admission-fee-card > p:last-child { margin-bottom: 0 !important; color: #5f6d82; line-height: 1.55; }
.afps-admission-other-card { border-color: #eadfe2; }
.afps-admission-other-card > h2::before { background: #c2415d; }
.afps-admission-other-card .button-danger { min-height: 40px; }
@media (max-width: 1100px) {
.afps-admission-detail { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
.afps-admission-review .afps-admission-hero { align-items: flex-start; padding: 20px; }
.afps-admission-review .afps-admission-hero .afps-page-actions { width: 100%; }
.afps-admission-card { padding: 20px; }
.afps-admission-info tbody { grid-template-columns: 1fr; }
.afps-admission-info tr { min-height: 68px; }
}
.afps-contact-declaration {
padding: 12px 14px;
background: #f7f9fc;
border: 1px solid #dfe6f0;
border-radius: 10px;
}
.afps-contact-status {
display: inline-flex;
margin-left: 6px;
padding: 2px 7px;
vertical-align: middle;
color: #667085;
background: #f2f4f7;
border: 1px solid #e4e7ec;
border-radius: 999px;
font-size: 10px;
font-weight: 700;
letter-spacing: .025em;
}
.afps-contact-status.verified { color: #047857; background: #ecfdf5; border-color: #a7f3d0; }
.afps-contact-status.declared_none { color: #6941c6; background: #f4f3ff; border-color: #d9d6fe; }
.afps-contact-status.missing { color: #b54708; background: #fffaeb; border-color: #fedf89; }
.afps-status-form {
padding: 14px;
background: #f7f9fc;
border: 1px solid #e2e8f0;
border-radius: 12px;
}
.afps-admissions-owner {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 14px;
margin: 0 0 20px;
padding: 17px 19px;
background: linear-gradient(135deg, #eef4ff 0%, #f8fbff 100%);
border: 1px solid #d4e0f4;
border-radius: 14px;
}
.afps-admissions-owner > div:first-child {
display: grid;
width: 40px;
height: 40px;
place-items: center;
color: #fff;
background: var(--afps-brand);
border-radius: 11px;
}
.afps-admissions-owner strong { display: block; color: #172033; font-size: 14px; }
.afps-admissions-owner p { margin: 3px 0 0; color: #627089; font-size: 12.5px; line-height: 1.45; }
.afps-admissions-setup-form { margin-bottom: 28px; }
.afps-readiness-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 16px;
margin: 0 0 14px;
}
.afps-readiness-head h2 { margin: 0 0 4px; }
.afps-readiness-head p { margin: 0; color: var(--afps-text-mute); font-size: 12.5px; }
.afps-readiness-head > span { color: #64748b; font-size: 12px; font-weight: 700; }
.afps-readiness-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;
}
.afps-readiness-card {
min-width: 0;
padding: 17px;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 13px;
box-shadow: 0 5px 16px rgba(15, 23, 42, .04);
}
.afps-readiness-card.needs-attention { border-top: 3px solid #e3a008; }
.afps-readiness-card.is-clear { border-top: 3px solid #10b981; }
.afps-readiness-value { display: block; margin-bottom: 6px; color: #172033; font-size: 26px; font-weight: 800; line-height: 1; }
.afps-readiness-card strong { display: block; font-size: 12.5px; }
.afps-readiness-card p { margin: 6px 0 0; color: #708096; font-size: 11.5px; line-height: 1.45; }
/* Email-optional student access and one-time credential handoff. */
.afps-credential-reveal { display:grid; grid-template-columns:44px 1fr; gap:16px; margin:0 0 20px; padding:20px; border:1px solid #93c5fd; border-radius:14px; background:linear-gradient(135deg,#eff6ff,#f8fafc); box-shadow:0 10px 28px rgba(30,64,175,.10); }
.afps-credential-reveal > div:first-child { display:grid; place-items:center; width:44px; height:44px; border-radius:12px; background:#1d4ed8; color:#fff; }
.afps-credential-reveal h2{margin:0 0 5px}.afps-credential-reveal p{margin:0 0 14px;color:var(--afps-text-soft)}.afps-credential-reveal dl{display:flex;gap:12px;margin:0 0 10px}.afps-credential-reveal dl>div{flex:1;padding:11px 13px;border:1px solid #bfdbfe;border-radius:10px;background:#fff}.afps-credential-reveal dt{margin-bottom:5px;color:var(--afps-text-soft);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}.afps-credential-reveal dd{margin:0}.afps-credential-reveal code{font-size:16px;font-weight:800;color:#0f172a;user-select:all}.afps-credential-reveal small{color:#475569}
.afps-student-access-card{display:flex;align-items:center;justify-content:space-between;gap:22px;margin:22px 0 0;padding:20px;border:1px solid var(--afps-border);border-radius:14px;background:#fff}.afps-student-access-copy{display:flex;align-items:flex-start;gap:13px}.afps-student-access-copy>.dashicons{color:var(--afps-primary);font-size:25px;width:25px;height:25px}.afps-student-access-copy h2{margin:0 0 7px;font-size:18px}.afps-student-access-copy p{margin:4px 0;color:var(--afps-text-soft)}.afps-student-access-copy p strong{color:var(--afps-text);font-family:ui-monospace,Menlo,monospace}
@media(max-width:720px){.afps-credential-reveal dl{flex-direction:column}.afps-student-access-card{align-items:stretch;flex-direction:column}.afps-student-access-card .button{width:100%;justify-content:center}}
@media (max-width: 1180px) { .afps-readiness-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) {
.afps-admissions-owner { grid-template-columns: auto 1fr; }
.afps-admissions-owner > .afps-badge { grid-column: 2; justify-self: start; }
.afps-readiness-head { align-items: flex-start; flex-direction: column; }
.afps-readiness-grid { grid-template-columns: 1fr; }
}
.afps-form-section {
padding: 20px 22px;
border-bottom: 1px solid var(--afps-border);
}
.afps-form-section:last-of-type { border-bottom: 0; }
.afps-form-section-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 16px;
margin-bottom: 14px;
flex-wrap: wrap;
}
.afps-form-section-title h2 {
font-size: 14px;
font-weight: 700;
margin: 0 0 2px;
color: var(--afps-text);
letter-spacing: 0.01em;
display: inline-flex;
align-items: center;
gap: 8px;
}
.afps-form-section-title p {
margin: 0;
font-size: 12.5px;
color: var(--afps-text-mute);
max-width: 560px;
}
/* 12-column field grid so fields get right-sized widths */
.afps-field-grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 14px 16px;
}
.afps-field {
display: flex;
flex-direction: column;
min-width: 0;
}
.afps-field--full { grid-column: span 12; }
.afps-field--half { grid-column: span 6; }
.afps-field--third { grid-column: span 4; }
.afps-field--quarter { grid-column: span 3; }
.afps-field--twothirds { grid-column: span 8; }
@media (max-width: 820px) {
.afps-field--quarter, .afps-field--third { grid-column: span 6; }
}
@media (max-width: 600px) {
.afps-field--half, .afps-field--third,
.afps-field--quarter, .afps-field--twothirds { grid-column: span 12; }
}
.afps-field label {
font-size: 12px;
font-weight: 600;
margin: 0 0 4px;
color: var(--afps-text);
display: inline-flex;
align-items: center;
gap: 6px;
}
.afps-field label .afps-hint {
color: var(--afps-text-mute);
font-weight: 400;
font-size: 11.5px;
}
/* Stretch text / select / textarea to fill the column width, but NEVER
the small form-control inputs like checkboxes and radios - they must
render at their native size. */
.afps-field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.afps-field select,
.afps-field textarea {
max-width: 100% !important;
width: 100% !important;
}
.afps-field input[type="checkbox"],
.afps-field input[type="radio"] {
width: 16px !important;
height: 16px !important;
max-width: none !important;
min-width: 0;
margin: 0;
padding: 0;
flex: 0 0 auto;
accent-color: var(--afps-brand);
}
.afps-field .afps-help {
font-size: 11.5px;
color: var(--afps-text-mute);
margin: 4px 0 0;
}
.afps-field--checkbox {
flex-direction: row;
align-items: center;
gap: 8px;
padding: 10px 12px;
background: var(--afps-surface-2);
border: 1px solid var(--afps-border);
border-radius: 6px;
min-height: 40px;
}
.afps-field--checkbox label {
margin: 0;
font-weight: 500;
font-size: 13px;
color: var(--afps-text);
cursor: pointer;
user-select: none;
}
/* Sticky footer action bar at the bottom of a form card */
.afps-form-footer {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
padding: 14px 22px;
background: var(--afps-surface-2);
border-top: 1px solid var(--afps-border);
position: sticky;
bottom: 0;
z-index: 2;
}
.afps-form-footer-meta {
color: var(--afps-text-mute);
font-size: 12px;
}
.afps-form-footer-actions {
display: inline-flex;
gap: 8px;
}
/* Breadcrumb in page header */
.afps-breadcrumb {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: var(--afps-text-mute);
margin-bottom: 4px;
}
.afps-breadcrumb a { color: var(--afps-text-mute); text-decoration: none; }
.afps-breadcrumb a:hover { color: var(--afps-brand); }
.afps-breadcrumb .afps-crumb-sep { color: var(--afps-text-soft); }
/* ---------- Stats strip (compact KPI row, used above tables) ---------- */
.afps-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
gap: 10px;
margin: 10px 0 16px;
}
.afps-stats .afps-stat {
background: var(--afps-surface);
border: 1px solid var(--afps-border);
border-radius: 8px;
padding: 12px 14px;
}
.afps-stats .afps-stat .label {
display: block;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--afps-text-mute);
font-weight: 600;
margin-bottom: 4px;
}
.afps-stats .afps-stat .value {
font-size: 20px;
font-weight: 700;
color: var(--afps-text);
letter-spacing: -0.01em;
line-height: 1.1;
}
/* ---------- Legacy search / filter bar (kept for non-toolbar pages) ---------- */
.afps-wrap form[method="get"]:not(.afps-toolbar form) {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
padding: 10px 12px;
background: var(--afps-surface);
border: 1px solid var(--afps-border);
border-radius: 8px;
margin: 12px 0;
box-shadow: none;
}
.afps-wrap form[method="get"] input[type="search"],
.afps-wrap form[method="get"] input[type="text"],
.afps-wrap form[method="get"] input[type="number"],
.afps-wrap form[method="get"] select {
height: 36px;
padding: 0 12px;
border: 1px solid var(--afps-border-strong);
border-radius: 6px;
background: var(--afps-surface);
font-family: var(--afps-font);
font-size: 13px;
line-height: 34px;
min-width: 220px;
}
.afps-wrap form[method="get"] label {
font-size: 12px;
font-weight: 600;
color: var(--afps-text-mute);
display: inline-flex;
align-items: center;
gap: 6px;
}
/* ---------- Icon helpers ---------- */
.afps-ico {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
flex-shrink: 0;
}
.afps-ico svg { width: 100%; height: 100%; }
/* ---------- Trash page - entity tabs with counts ---------- */
.afps-tabs a span {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px !important;
padding: 0 6px !important;
font-size: 10px !important;
font-weight: 700;
background: #e5e7eb !important;
color: var(--afps-text-mute) !important;
border-radius: 10px !important;
margin-left: 4px !important;
}
.afps-tabs a.active span {
background: rgba(255,255,255,.2) !important;
color: #fff !important;
}
/* ---------- Responsive ---------- */
@media (max-width: 782px) {
.afps-wrap {
margin: 8px 10px 32px 0;
padding: 16px 14px 32px;
}
.afps-hero { padding: 20px; }
.afps-hero h1 { font-size: 20px; }
.afps-form .row { grid-template-columns: 1fr; gap: 0; }
.afps-tabs { overflow-x: auto; flex-wrap: nowrap; }
.afps-tabs a { white-space: nowrap; }
.afps-table-wrap { border-radius: 8px; }
.afps-table-wrap th, .afps-table-wrap td { padding: 10px 12px; font-size: 12.5px; }
}
/* ---------- Utility bar + density toggle (injected by admin.js) ----------
A slim, right-aligned row pinned above every page's header. Holds the
Comfortable | Compact segmented control that retunes page density. */
.afps-utilbar {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 10px;
margin: -6px 0 12px;
min-height: 28px;
}
.afps-density-toggle {
display: inline-flex;
align-items: center;
gap: 2px;
padding: 3px;
background: var(--afps-surface-2);
border: 1px solid var(--afps-border);
border-radius: 999px;
box-shadow: var(--afps-shadow-xs);
}
.afps-density-toggle button {
appearance: none;
display: inline-flex;
align-items: center;
gap: 6px;
height: 26px;
padding: 0 12px;
border: 0;
border-radius: 999px;
background: transparent;
color: var(--afps-text-mute);
font-family: var(--afps-font);
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: background var(--afps-t), color var(--afps-t), box-shadow var(--afps-t);
}
.afps-density-toggle button .afps-ico { width: 14px; height: 14px; }
.afps-density-toggle button:hover { color: var(--afps-text); }
.afps-density-toggle button[aria-pressed="true"] {
background: var(--afps-surface);
color: var(--afps-text);
box-shadow: var(--afps-shadow-xs);
}
.afps-density-toggle button:focus-visible {
outline: none;
box-shadow: var(--afps-ring);
}
@media (max-width: 600px) {
/* On phones the layout is already compact; hide the control to save room. */
.afps-utilbar { display: none; }
}
/* ---------- Compact density (opt-in via [data-afps-density="compact"]) ----------
Purely retunes the density tokens + a few one-off metrics. Comfortable
remains the untouched default, so nothing shifts unless a user opts in. */
.afps-wrap[data-afps-density="compact"] {
--afps-control-h: 32px;
--afps-input-h: 34px;
--afps-cell-py: 7px;
--afps-card-pad: 13px;
padding: 18px 20px 36px;
}
.afps-wrap[data-afps-density="compact"] .afps-hero { padding: 20px 22px; margin-bottom: 16px; }
.afps-wrap[data-afps-density="compact"] .afps-cards { gap: 10px; margin-top: 12px; }
.afps-wrap[data-afps-density="compact"] .afps-card .value { font-size: 24px; }
.afps-wrap[data-afps-density="compact"] .afps-stats { gap: 8px; }
.afps-wrap[data-afps-density="compact"] .afps-form label { margin: 10px 0 5px; }
.afps-wrap[data-afps-density="compact"] .afps-form-section { padding: 14px 16px; }
.afps-wrap[data-afps-density="compact"] .afps-field-grid { gap: 10px 14px; }
.afps-wrap[data-afps-density="compact"] h2 { margin: 16px 0 8px; }
/* ---------- View toggle (Active | Trash pill, per module) ---------- */
.afps-view-toggle {
display: inline-flex;
gap: 2px;
padding: 3px;
background: var(--afps-surface-2);
border: 1px solid var(--afps-border);
border-radius: 10px;
margin: 12px 0;
box-shadow: var(--afps-shadow-xs);
}
.afps-view-toggle a {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
font-size: 12.5px;
font-weight: 600;
white-space: nowrap;
color: var(--afps-text-mute);
border-radius: 7px;
text-decoration: none;
transition: background var(--afps-t), color var(--afps-t);
}
.afps-view-toggle a:hover {
color: var(--afps-text);
background: rgba(15,23,42,.04);
}
.afps-view-toggle a.active {
background: var(--afps-surface);
color: var(--afps-text);
box-shadow: var(--afps-shadow-xs);
}
.afps-view-toggle .afps-view-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 6px;
font-size: 10px;
font-weight: 700;
background: #e5e7eb;
color: var(--afps-text-mute);
border-radius: 10px;
}
.afps-view-toggle a.active .afps-view-count {
background: var(--afps-danger);
color: #fff;
}
/* ---------- Modal (confirm dialogs) ---------- */
.afps-modal-backdrop {
position: fixed;
inset: 0;
background: rgba(15,23,42,.48);
backdrop-filter: blur(2px);
display: flex;
align-items: center;
justify-content: center;
z-index: 999999;
animation: afps-fade 140ms ease;
padding: 16px;
}
@keyframes afps-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes afps-pop { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
.afps-modal {
background: #fff;
border-radius: 14px;
box-shadow: 0 24px 48px rgba(15,23,42,.3), 0 2px 6px rgba(15,23,42,.1);
max-width: 440px;
width: 100%;
overflow: hidden;
animation: afps-pop 180ms cubic-bezier(.4,0,.2,1);
font-family: var(--afps-font);
}
.afps-modal-body {
padding: 22px 22px 10px;
}
.afps-modal-body h3 {
margin: 0 0 8px;
font-size: 16px;
font-weight: 700;
color: var(--afps-text);
display: flex;
align-items: center;
gap: 10px;
}
.afps-modal-body h3 .afps-modal-icon {
width: 32px;
height: 32px;
border-radius: 50%;
background: #fef2f2;
color: #b91c1c;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.afps-modal-body p {
margin: 0;
color: var(--afps-text-mute);
font-size: 14px;
line-height: 1.5;
}
.afps-modal-actions {
display: flex;
justify-content: flex-end;
gap: 8px;
padding: 14px 22px 18px;
border-top: 1px solid var(--afps-border);
margin-top: 14px;
}
.afps-modal-actions button {
height: 36px;
padding: 0 16px;
border-radius: 6px;
font-family: var(--afps-font, "Inter", system-ui, sans-serif);
font-size: 13px;
font-weight: 600;
cursor: pointer;
border: 1px solid #cfd6e1;
background: #fff;
color: #0f172a;
transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.afps-modal-actions button:hover {
background: #f1f5f9;
border-color: #94a3b8;
}
.afps-modal-actions button.afps-modal-confirm {
background: #ef4444;
border-color: #ef4444;
color: #fff;
}
.afps-modal-actions button.afps-modal-confirm:hover {
background: #dc2626;
border-color: #dc2626;
color: #fff;
}
.afps-modal-actions button:focus-visible {
outline: 2px solid #1c3f9e;
outline-offset: 2px;
}
/* ---------- Form modal (Add Student popup) ---------- */
.afps-modal-backdrop--hidden { display: none !important; }
.afps-modal--form {
max-width: 640px;
display: flex;
flex-direction: column;
max-height: calc(100vh - 48px);
}
.afps-modal--form form {
display: flex;
flex-direction: column;
min-height: 0;
}
.afps-modal-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 18px 22px 14px;
border-bottom: 1px solid var(--afps-border);
}
.afps-modal-head h3 {
margin: 0;
font-size: 16px;
font-weight: 700;
color: var(--afps-text);
}
.afps-modal-close {
width: 30px;
height: 30px;
border-radius: 6px;
border: 1px solid transparent;
background: transparent;
color: var(--afps-text-mute);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: background 120ms ease, color 120ms ease;
}
.afps-modal-close:hover {
background: var(--afps-surface-2);
color: var(--afps-text);
}
.afps-modal-scroll {
padding: 18px 22px;
overflow-y: auto;
min-height: 0;
}
.afps-modal--form .afps-modal-actions {
margin-top: 0;
align-items: center;
}
.afps-modal-more {
font-size: 12.5px;
color: var(--afps-brand, #1c3f9e);
text-decoration: none;
}
.afps-modal-more:hover { text-decoration: underline; }
/* ---------- Modern student creation popup ---------- */
.afps-student-create-modal .afps-modal--form {
width: min(900px, calc(100vw - 40px));
max-width: none;
max-height: calc(100vh - 40px);
overflow: hidden;
border: 1px solid rgba(148,163,184,.35);
border-radius: 16px;
box-shadow: 0 28px 70px rgba(15,23,42,.24);
}
.afps-student-create-modal .afps-modal-head {
padding: 18px 22px 16px;
background: linear-gradient(120deg, #fff 55%, #f5f8ff);
}
.afps-student-create-heading {
display: flex;
min-width: 0;
align-items: center;
gap: 12px;
}
.afps-student-create-heading__icon {
display: inline-flex;
width: 42px;
height: 42px;
flex: 0 0 42px;
align-items: center;
justify-content: center;
border: 1px solid #ccdbff;
border-radius: 12px;
color: var(--afps-brand);
background: #edf3ff;
}
.afps-student-create-heading__icon .dashicons { width: 22px; height: 22px; font-size: 22px; }
.afps-student-create-heading h3 { margin: 1px 0 2px; font-size: 19px; line-height: 1.25; }
.afps-student-create-heading p { margin: 0; color: var(--afps-text-mute); font-size: 12px; line-height: 1.35; }
.afps-student-create-modal .afps-modal-scroll {
flex: 1 1 auto;
padding: 16px 18px 18px;
background: #f5f7fb;
}
.afps-student-create-grid {
display: grid;
grid-template-columns: 1.08fr .92fr;
gap: 14px;
align-items: stretch;
}
.afps-student-create-section {
min-width: 0;
padding: 16px;
border: 1px solid var(--afps-border);
border-radius: 12px;
background: #fff;
box-shadow: 0 1px 2px rgba(15,23,42,.025);
}
.afps-student-create-section__head {
display: flex;
min-height: 39px;
align-items: flex-start;
gap: 10px;
margin-bottom: 14px;
padding-bottom: 12px;
border-bottom: 1px solid #e9edf4;
}
.afps-student-create-section__head > span {
display: inline-flex;
width: 24px;
height: 24px;
flex: 0 0 24px;
align-items: center;
justify-content: center;
border-radius: 50%;
color: #fff;
background: var(--afps-brand);
font-size: 11px;
font-weight: 800;
}
.afps-student-create-section__head h4 { margin: 0 0 2px; color: var(--afps-text); font-size: 14px; line-height: 1.25; }
.afps-student-create-section__head p { margin: 0; color: var(--afps-text-mute); font-size: 11px; line-height: 1.35; }
.afps-student-create-modal .afps-field-grid { gap: 11px 12px; }
.afps-student-create-modal .afps-field label { margin-bottom: 4px; }
.afps-student-create-modal .afps-field label .afps-hint {
padding: 2px 6px;
border-radius: 999px;
color: #526787;
background: #eef3fa;
font-size: 9.5px;
font-weight: 600;
white-space: nowrap;
}
.afps-student-create-modal .afps-field input:not([type="checkbox"]),
.afps-student-create-modal .afps-field select { min-height: 38px; border-radius: 8px; }
.afps-student-create-modal .afps-monospace-input { font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: .02em; }
.afps-student-create-section:first-child .afps-field:nth-child(2) { grid-column: span 12; }
.afps-student-create-section:first-child .afps-field:nth-child(3),
.afps-student-create-section:first-child .afps-field:nth-child(4) { grid-column: span 6; }
.afps-student-create-section:nth-child(2) .afps-field:nth-child(1),
.afps-student-create-section:nth-child(2) .afps-field:nth-child(2) { grid-column: span 6; }
.afps-student-create-section:nth-child(2) .afps-field:nth-child(3) { grid-column: span 12; }
.afps-student-create-declaration,
.afps-student-create-portal {
box-sizing: border-box;
min-height: 56px;
padding: 10px 12px;
border: 1px solid #dbe4f0;
border-radius: 9px;
background: #f8fafc;
}
.afps-student-create-declaration { margin-top: 1px; }
.afps-student-create-declaration label { color: #475569; font-size: 11.5px; line-height: 1.35; }
.afps-student-create-portal { margin-top: 2px; border-color: #ccdbff; background: #f5f8ff; }
.afps-student-create-portal label { align-items: flex-start; flex-direction: column; gap: 1px; }
.afps-student-create-portal label strong { color: var(--afps-text); font-size: 12px; }
.afps-student-create-portal label small { color: var(--afps-text-mute); font-size: 10.5px; font-weight: 400; line-height: 1.35; }
.afps-student-create-modal .afps-modal-actions {
margin: 0;
padding: 12px 20px 14px;
background: #fff;
box-shadow: 0 -8px 20px rgba(15,23,42,.035);
}
.afps-student-create-modal .afps-modal-actions .button { min-height: 38px; padding-right: 17px; padding-left: 17px; border-radius: 8px; }
@media (max-width: 800px) {
.afps-student-create-grid { grid-template-columns: 1fr; }
.afps-student-create-modal .afps-modal--form { width: min(620px, calc(100vw - 24px)); max-height: calc(100vh - 24px); }
}
@media (max-width: 600px) {
.afps-modal-backdrop.afps-student-create-modal { padding: 0; }
.afps-student-create-modal .afps-modal--form { width: 100%; max-height: 100%; border: 0; border-radius: 0; }
.afps-student-create-modal .afps-modal-head { padding: 14px 16px; }
.afps-student-create-heading__icon { display: none; }
.afps-student-create-heading p { display: none; }
.afps-student-create-modal .afps-modal-scroll { padding: 12px; }
.afps-student-create-section { padding: 14px; }
.afps-student-create-modal .afps-modal-more { display: none; }
}
/* ---------- Academic Structure AJAX form modal ---------- */
.afps-academic-modal .afps-modal--form { max-width: 760px; }
.afps-academic-modal .afps-modal-scroll { flex: 1 1 auto; }
.afps-academic-modal .afps-modal-title { flex: 1 1 auto; min-width: 0; }
.afps-academic-modal .afps-academic-full-page { flex: 0 0 auto; }
/* The academic forms carry .afps-form-card chrome for the full page; inside
the modal the modal itself is the card, so strip the inner framing. */
.afps-academic-modal .afps-modal-scroll .afps-form-card {
background: transparent;
border: 0;
box-shadow: none;
padding: 0;
margin: 0;
}
.afps-academic-modal .afps-modal-scroll .afps-form-footer {
margin-top: 8px;
padding-top: 14px;
}
.afps-roster-modal .afps-modal--form {
width: min(980px, calc(100vw - 40px));
max-width: none;
}
.afps-roster-modal .afps-modal-scroll {
padding: 18px 22px 22px;
background: #f6f8fc;
}
.afps-roster-modal .afps-class-roster > p { margin: 0 0 14px !important; }
.afps-roster-modal .afps-table-wrap {
margin: 0;
background: #fff;
}
@media (max-width: 600px) {
.afps-roster-modal .afps-modal--form { width: calc(100vw - 20px); }
.afps-roster-modal .afps-modal-scroll { padding: 14px; }
}
/* ---------- Toast container ---------- */
.afps-toasts {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 999998;
display: flex;
flex-direction: column;
gap: 8px;
max-width: 360px;
pointer-events: none;
}
.afps-toast {
pointer-events: auto;
background: var(--afps-text);
color: #fff;
padding: 12px 36px 12px 14px;
border-radius: 10px;
font-size: 13px;
font-weight: 500;
box-shadow: 0 12px 32px rgba(15,23,42,.2);
animation: afps-toast-in 200ms cubic-bezier(.4,0,.2,1);
position: relative;
display: flex;
align-items: center;
gap: 10px;
}
@keyframes afps-toast-in {
from { opacity: 0; transform: translateX(12px); }
to { opacity: 1; transform: none; }
}
.afps-toast.success { background: #065f46; }
.afps-toast.danger { background: #991b1b; }
.afps-toast.warning { background: #92400e; }
.afps-toast .afps-dismiss {
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
background: transparent;
border: 0;
color: rgba(255,255,255,.65);
cursor: pointer;
padding: 4px;
line-height: 0;
border-radius: 4px;
}
.afps-toast .afps-dismiss:hover { color: #fff; background: rgba(255,255,255,.1); }
/* ---------- Print (for bordereau / transcripts inside admin) ---------- */
@media print {
.afps-wrap { background: #fff; box-shadow: none; padding: 0; margin: 0; }
.afps-tabs, .afps-actions, .afps-utilbar, h1 .page-title-action, form[method="get"] { display: none !important; }
.afps-card, .afps-table-wrap { box-shadow: none; border-color: #000; }
/* Keep KPI badges, stat tiles and report bars visible on paper.
print-color-adjust is inherited, so the containers cover the
inline-styled bar divs rendered inside them. */
.afps-badge,
.afps-stat,
.afps-stats,
.afps-form-card,
.afps-table-wrap {
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
}
/* ==========================================================================
Dashboard command center
========================================================================== */
.afps-dashboard {
--afps-dashboard-navy: #0d1f4b;
--afps-dashboard-blue: #1d4ed8;
--afps-dashboard-indigo: #4f46e5;
--afps-dashboard-green: #059669;
--afps-dashboard-amber: #d97706;
--afps-dashboard-red: #dc2626;
}
.afps-dashboard-header {
position: relative;
isolation: isolate;
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
overflow: hidden;
padding: 28px 30px;
border-radius: 18px;
color: #fff;
background:
radial-gradient(circle at 82% 20%, rgba(99,102,241,.42), transparent 30%),
linear-gradient(125deg, #0b1736 0%, #112d70 58%, #1e3a8a 100%);
box-shadow: 0 16px 38px rgba(15,23,42,.18);
}
.afps-dashboard-header::after {
content: "";
position: absolute;
z-index: -1;
inset: 0;
opacity: .32;
background-image:
linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
background-size: 42px 42px;
mask-image: linear-gradient(90deg, transparent, #000 48%);
}
.afps-dashboard-header__copy { max-width: 720px; }
.afps-dashboard-eyebrow,
.afps-dashboard-section__eyebrow {
display: block;
margin-bottom: 5px;
color: #93c5fd;
font-size: 11px;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
}
.afps-dashboard-eyebrow {
letter-spacing: .04em;
text-transform: none;
}
#wpbody-content .afps-wrap .afps-dashboard-header h1 {
margin: 0;
color: #fff;
font-size: clamp(26px, 2.4vw, 36px);
line-height: 1.1;
letter-spacing: -.04em;
}
#wpbody-content .afps-wrap .afps-dashboard-header__copy > p {
margin: 9px 0 0;
color: #cbd5e1;
font-size: 15px;
}
.afps-dashboard-context {
display: flex;
flex-wrap: wrap;
gap: 9px;
margin-top: 18px;
}
.afps-dashboard-context > span {
display: inline-flex;
align-items: center;
gap: 7px;
min-height: 30px;
padding: 4px 10px;
border: 1px solid rgba(255,255,255,.16);
border-radius: 999px;
color: #e2e8f0;
background: rgba(255,255,255,.08);
font-size: 12px;
font-weight: 600;
backdrop-filter: blur(8px);
}
.afps-dashboard-context .afps-ico { width: 14px; height: 14px; color: #bfdbfe; }
.afps-dashboard-header__actions {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 10px;
min-width: 190px;
}
.afps-dashboard-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 40px;
padding: 8px 15px;
border: 1px solid rgba(255,255,255,.24);
border-radius: 10px;
font-size: 13px;
font-weight: 700;
transition: transform var(--afps-t), background var(--afps-t), box-shadow var(--afps-t);
}
.afps-wrap .afps-dashboard-btn,
.afps-wrap .afps-dashboard-btn:hover { color: #fff; }
.afps-dashboard-btn:hover { transform: translateY(-1px); }
.afps-dashboard-btn--primary {
color: #10204a !important;
border-color: #fff;
background: #fff;
box-shadow: 0 8px 20px rgba(2,6,23,.2);
}
.afps-dashboard-btn--primary:hover { color: #10204a !important; background: #eff6ff; }
.afps-dashboard-btn--secondary { background: rgba(255,255,255,.09); backdrop-filter: blur(8px); }
.afps-dashboard-btn--secondary:hover { background: rgba(255,255,255,.16); }
.afps-dashboard-btn .afps-ico { width: 16px; height: 16px; }
.afps-dashboard-btn > span:not(.afps-ico) {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
height: 20px;
padding: 0 6px;
border-radius: 999px;
color: #7f1d1d;
background: #fee2e2;
font-size: 11px;
}
/* The brief is intentionally a live operational strip, not another set of
decorative KPIs. It makes the first scan of the page about today. */
.afps-dashboard-brief {
display: grid;
grid-template-columns: minmax(220px, 1.2fr) minmax(360px, 1fr) auto;
align-items: center;
gap: 20px;
margin-top: 14px;
padding: 14px 17px;
border: 1px solid #cbdaf6;
border-radius: 14px;
background: linear-gradient(105deg, #f8fbff 0%, #f1f5ff 100%);
box-shadow: 0 7px 18px rgba(30,58,138,.06);
}
.afps-dashboard-brief__lead { display: flex; align-items: center; gap: 11px; min-width: 0; }
.afps-dashboard-brief__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
flex: 0 0 auto;
border-radius: 11px;
color: #1d4ed8;
background: #dbeafe;
}
.afps-dashboard-brief__icon .afps-ico { width: 18px; height: 18px; }
.afps-dashboard-brief__lead span { display: block; color: #64748b; font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.afps-dashboard-brief__lead strong { display: block; overflow: hidden; margin-top: 2px; color: #172554; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.afps-dashboard-brief__metrics { display: grid; grid-template-columns: repeat(3, minmax(82px, 1fr)); gap: 1px; border-radius: 9px; overflow: hidden; background: #dbe4f3; }
.afps-dashboard-brief__metrics > div { min-width: 0; padding: 7px 10px; background: rgba(255,255,255,.75); }
.afps-dashboard-brief__metrics > div.is-alert { background: #fff7ed; }
.afps-dashboard-brief__metrics span,
.afps-dashboard-brief__metrics small { display: block; overflow: hidden; color: #64748b; font-size: 9px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.afps-dashboard-brief__metrics strong { display: block; margin: 2px 0 1px; color: #172554; font-size: 16px; line-height: 1; font-variant-numeric: tabular-nums; }
.afps-dashboard-brief__metrics .is-alert strong { color: #c2410c; }
.afps-dashboard-brief__link { display: inline-flex; align-items: center; gap: 5px; justify-self: end; white-space: nowrap; font-size: 11px; font-weight: 800; }
.afps-dashboard-brief__link .afps-ico { width: 13px; height: 13px; }
.afps-dashboard-kpis {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;
margin-top: 16px;
}
.afps-dashboard-kpi {
position: relative;
overflow: hidden;
min-width: 0;
padding: 18px 19px 16px;
border: 1px solid var(--afps-border);
border-radius: 14px;
background: var(--afps-surface);
box-shadow: var(--afps-shadow-xs);
}
.afps-dashboard-kpi::after {
content: "";
position: absolute;
top: -24px;
right: -24px;
width: 90px;
height: 90px;
border-radius: 50%;
background: currentColor;
opacity: .055;
}
.afps-dashboard-kpi__top {
display: flex;
align-items: center;
gap: 9px;
color: var(--afps-text-mute);
font-size: 11px;
font-weight: 800;
letter-spacing: .05em;
text-transform: uppercase;
}
.afps-dashboard-kpi__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 9px;
color: var(--afps-dashboard-blue);
background: #eff6ff;
}
.afps-dashboard-kpi__icon .afps-ico { width: 16px; height: 16px; }
.afps-dashboard-kpi > strong {
display: block;
overflow-wrap: anywhere;
margin-top: 13px;
color: var(--afps-text);
font-size: clamp(24px, 2vw, 31px);
line-height: 1;
letter-spacing: -.035em;
font-variant-numeric: tabular-nums;
}
.afps-dashboard-kpi > strong small {
color: var(--afps-text-mute);
font-size: 11px;
font-weight: 700;
letter-spacing: .02em;
}
.afps-dashboard-kpi > p {
min-height: 19px;
margin: 8px 0 0;
color: var(--afps-text-mute);
font-size: 12px;
}
.afps-dashboard-kpi > a {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 12px;
font-size: 12px;
font-weight: 700;
}
.afps-dashboard-kpi > a .afps-ico { width: 13px; height: 13px; transition: transform var(--afps-t); }
.afps-dashboard-kpi > a:hover .afps-ico { transform: translateX(3px); }
.afps-dashboard-kpi--revenue { color: var(--afps-dashboard-green); }
.afps-dashboard-kpi--revenue .afps-dashboard-kpi__icon { color: #047857; background: #ecfdf5; }
.afps-dashboard-kpi--outstanding { color: var(--afps-dashboard-amber); }
.afps-dashboard-kpi--outstanding .afps-dashboard-kpi__icon { color: #b45309; background: #fffbeb; }
.afps-dashboard-kpi--staff { color: var(--afps-dashboard-indigo); }
.afps-dashboard-kpi--staff .afps-dashboard-kpi__icon { color: #4338ca; background: #eef2ff; }
.afps-dashboard-progress {
height: 5px;
overflow: hidden;
margin-top: 13px;
border-radius: 999px;
background: #e2e8f0;
}
.afps-dashboard-progress span {
display: block;
width: var(--afps-progress, 0%);
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, #059669, #34d399);
}
.afps-dashboard-levels {
display: flex;
align-items: stretch;
gap: 8px;
margin: 10px 0 0;
}
.afps-dashboard-levels__label {
display: flex;
align-items: center;
padding: 0 12px;
color: var(--afps-text-mute);
font-size: 11px;
font-weight: 800;
letter-spacing: .05em;
text-transform: uppercase;
}
.afps-dashboard-level {
display: grid;
grid-template-columns: auto auto 1fr;
align-items: center;
gap: 8px;
min-width: 0;
padding: 8px 11px;
border: 1px solid var(--afps-border);
border-radius: 9px;
background: rgba(255,255,255,.72);
}
.afps-dashboard-level > span {
padding: 2px 6px;
border-radius: 5px;
color: #1e3a8a;
background: #dbeafe;
font-size: 10px;
font-weight: 800;
}
.afps-dashboard-level > strong { font-size: 15px; font-variant-numeric: tabular-nums; }
.afps-dashboard-level > small {
overflow: hidden;
color: var(--afps-text-mute);
font-size: 11px;
text-overflow: ellipsis;
white-space: nowrap;
}
.afps-dashboard-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
align-items: start;
gap: 16px;
margin-top: 18px;
}
.afps-dashboard-main,
.afps-dashboard-sidebar {
display: grid;
gap: 16px;
min-width: 0;
}
.afps-dashboard-section {
min-width: 0;
padding: 20px;
border: 1px solid var(--afps-border);
border-radius: 14px;
background: var(--afps-surface);
box-shadow: var(--afps-shadow-xs);
}
.afps-dashboard-section__heading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
margin-bottom: 15px;
}
.afps-dashboard-section__eyebrow { margin-bottom: 2px; color: #64748b; font-size: 9px; }
#wpbody-content .afps-dashboard .afps-dashboard-section__heading h2 {
margin: 0;
font-size: 18px;
line-height: 1.2;
}
.afps-dashboard-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 30px;
height: 30px;
padding: 0 9px;
border-radius: 9px;
color: #1e3a8a;
background: #dbeafe;
font-size: 12px;
font-weight: 800;
}
.afps-dashboard-heading-link,
.afps-dashboard-footer-link {
display: inline-flex;
align-items: center;
gap: 5px;
white-space: nowrap;
font-size: 12px;
font-weight: 700;
}
.afps-dashboard-heading-link .afps-ico,
.afps-dashboard-footer-link .afps-ico { width: 13px; height: 13px; }
.afps-attention-list { display: grid; gap: 9px; }
.afps-attention-item {
display: grid;
grid-template-columns: 38px minmax(0, 1fr) auto;
align-items: center;
gap: 12px;
padding: 12px;
border: 1px solid var(--afps-border);
border-left-width: 3px;
border-radius: 10px;
background: #fff;
}
.afps-attention-item__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 10px;
}
.afps-attention-item__icon .afps-ico { width: 18px; height: 18px; }
.afps-attention-item h3 { margin: 0; font-size: 13px; }
.afps-attention-item p { margin: 3px 0 0; color: var(--afps-text-mute); font-size: 12px; }
.afps-attention-item > a {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 6px 8px;
border-radius: 7px;
white-space: nowrap;
font-size: 11px;
font-weight: 700;
}
.afps-attention-item > a:hover { background: var(--afps-brand-soft); }
.afps-attention-item > a .afps-ico { width: 12px; height: 12px; }
.afps-attention-item--info { border-left-color: #2563eb; }
.afps-attention-item--info .afps-attention-item__icon { color: #1d4ed8; background: #eff6ff; }
.afps-attention-item--warning { border-left-color: #f59e0b; }
.afps-attention-item--warning .afps-attention-item__icon { color: #b45309; background: #fffbeb; }
.afps-attention-item--danger { border-left-color: #ef4444; }
.afps-attention-item--danger .afps-attention-item__icon { color: #b91c1c; background: #fef2f2; }
.afps-dashboard-all-clear {
display: flex;
align-items: center;
gap: 13px;
padding: 16px;
border: 1px solid #a7f3d0;
border-radius: 10px;
color: #065f46;
background: #ecfdf5;
}
.afps-dashboard-all-clear > span {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 50%;
background: #d1fae5;
}
.afps-dashboard-all-clear .afps-ico { width: 19px; height: 19px; }
.afps-dashboard-all-clear strong { display: block; }
.afps-dashboard-all-clear p { margin: 2px 0 0; color: #047857; font-size: 12px; }
.afps-dashboard-day { overflow: hidden; }
.afps-day-schedule { position: relative; list-style: none; margin: 0; padding: 0; }
.afps-day-schedule::before { content: ""; position: absolute; top: 17px; bottom: 18px; left: 74px; width: 1px; background: #dbe4f2; }
.afps-day-schedule li { position: relative; display: grid; grid-template-columns: 56px 18px minmax(0, 1fr) minmax(110px, auto); align-items: center; gap: 9px; min-height: 53px; padding: 5px 0; }
.afps-day-schedule time { color: #1e3a8a; font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
.afps-day-schedule time small { display: block; margin-top: 2px; color: #94a3b8; font-size: 9px; font-weight: 700; }
.afps-day-schedule__line { z-index: 1; width: 9px; height: 9px; border: 3px solid #eff6ff; border-radius: 50%; background: #2563eb; box-shadow: 0 0 0 1px #93c5fd; }
.afps-day-schedule li > div:nth-of-type(1) { min-width: 0; }
.afps-day-schedule li strong { display: block; overflow: hidden; color: var(--afps-text); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.afps-day-schedule li p { overflow: hidden; margin: 2px 0 0; color: var(--afps-text-mute); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.afps-day-schedule__meta { min-width: 0; text-align: right; }
.afps-day-schedule__meta > span { display: block; overflow: hidden; color: #475569; font-size: 10px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.afps-day-schedule__meta > span.is-unassigned { color: #b45309; }
.afps-day-schedule__meta small { display: block; margin-top: 2px; color: #94a3b8; font-size: 9px; }
.afps-dashboard-day__more { margin: 8px 0 0 83px; color: #64748b; font-size: 10px; font-weight: 700; }
.afps-dashboard-day__empty { display: flex; align-items: center; gap: 12px; padding: 15px; border: 1px dashed #cbd5e1; border-radius: 10px; background: #fafcff; }
.afps-dashboard-day__empty > span { display: inline-flex; align-items: center; justify-content: center; width: 35px; height: 35px; border-radius: 10px; color: #475569; background: #e2e8f0; }
.afps-dashboard-day__empty .afps-ico { width: 17px; height: 17px; }
.afps-dashboard-day__empty strong { display: block; font-size: 12px; }
.afps-dashboard-day__empty p { margin: 2px 0 0; color: var(--afps-text-mute); font-size: 11px; }
.afps-dashboard-enrollment {
border-radius: 10px;
box-shadow: none;
}
.afps-dashboard-enrollment th { padding-top: 10px; padding-bottom: 10px; font-size: 10px; }
.afps-dashboard-enrollment td { padding-top: 10px; padding-bottom: 10px; }
.afps-dashboard-enrollment .afps-number { text-align: right; font-variant-numeric: tabular-nums; }
.afps-program-code {
display: inline-flex;
padding: 3px 7px;
border-radius: 6px;
color: #3730a3;
background: #eef2ff;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 10px;
font-weight: 800;
}
.afps-enrollment-share {
display: grid;
grid-template-columns: minmax(70px, 1fr) 34px;
align-items: center;
gap: 8px;
}
.afps-enrollment-share > div {
height: 7px;
overflow: hidden;
border-radius: 999px;
background: #e2e8f0;
}
.afps-enrollment-share > div span {
display: block;
width: var(--afps-progress, 0%);
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, #2563eb, #6366f1);
}
.afps-enrollment-share small { color: var(--afps-text-mute); font-size: 10px; font-variant-numeric: tabular-nums; }
.afps-dashboard-actions { padding-bottom: 12px; }
.afps-dashboard-health { padding-bottom: 14px; }
.afps-dashboard-health__badge { display: inline-flex; align-items: center; justify-content: center; width: 31px; height: 31px; border-radius: 9px; color: #047857; background: #ecfdf5; }
.afps-dashboard-health__badge .afps-ico { width: 16px; height: 16px; }
.afps-health-list { display: grid; gap: 3px; }
.afps-health-list > div { display: grid; grid-template-columns: 9px minmax(0, 1fr); align-items: start; gap: 9px; padding: 7px 2px; }
.afps-health-list__dot { width: 7px; height: 7px; margin-top: 4px; border-radius: 50%; background: #10b981; box-shadow: 0 0 0 3px #d1fae5; }
.afps-health-list .is-watch .afps-health-list__dot { background: #f59e0b; box-shadow: 0 0 0 3px #fef3c7; }
.afps-health-list strong { display: block; color: var(--afps-text); font-size: 11px; }
.afps-health-list small { display: block; margin-top: 2px; color: var(--afps-text-mute); font-size: 10px; line-height: 1.35; }
.afps-quick-action-list { display: grid; gap: 4px; }
.afps-quick-action {
display: grid;
grid-template-columns: 36px minmax(0, 1fr) 14px;
align-items: center;
gap: 10px;
padding: 9px 7px;
border-radius: 9px;
}
.afps-quick-action:hover { background: #f8fafc; }
.afps-quick-action__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border: 1px solid #dbeafe;
border-radius: 9px;
color: #1d4ed8;
background: #eff6ff;
}
.afps-quick-action__icon .afps-ico { width: 16px; height: 16px; }
.afps-quick-action strong { display: block; color: var(--afps-text); font-size: 12px; }
.afps-quick-action small {
display: block;
overflow: hidden;
margin-top: 1px;
color: var(--afps-text-mute);
font-size: 10px;
text-overflow: ellipsis;
white-space: nowrap;
}
.afps-quick-action > .afps-ico { width: 13px; height: 13px; color: var(--afps-text-soft); transition: transform var(--afps-t); }
.afps-quick-action:hover > .afps-ico { transform: translateX(3px); color: var(--afps-brand); }
.afps-activity-list {
position: relative;
list-style: none;
margin: 0;
padding: 0;
}
.afps-activity-list::before {
content: "";
position: absolute;
top: 8px;
bottom: 10px;
left: 4px;
width: 1px;
background: #dbe2ea;
}
.afps-activity-list li {
position: relative;
display: grid;
grid-template-columns: 10px minmax(0, 1fr);
gap: 10px;
padding: 0 0 14px;
}
.afps-activity-list li:last-child { padding-bottom: 4px; }
.afps-activity-dot {
z-index: 1;
width: 9px;
height: 9px;
margin-top: 4px;
border: 2px solid #fff;
border-radius: 50%;
background: #3b82f6;
box-shadow: 0 0 0 1px #93c5fd;
}
.afps-activity-list strong { display: block; color: var(--afps-text); font-size: 11px; }
.afps-activity-list p { margin: 2px 0 0; color: var(--afps-text-mute); font-size: 10px; }
.afps-activity-list time { display: block; margin-top: 1px; color: var(--afps-text-soft); font-size: 9px; }
.afps-dashboard-footer-link { margin-top: 12px; }
.afps-dashboard-empty-copy { margin: 0; color: var(--afps-text-mute); font-size: 12px; }
.afps-dashboard-delivery {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 15px 17px;
border: 1px solid #dbeafe;
border-radius: 14px;
background: linear-gradient(135deg, #eff6ff, #eef2ff);
}
.afps-dashboard-delivery > div:first-child {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.afps-dashboard-delivery > div:first-child > span {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
flex-shrink: 0;
border-radius: 9px;
color: #1d4ed8;
background: #dbeafe;
}
.afps-dashboard-delivery .afps-ico { width: 16px; height: 16px; }
.afps-dashboard-delivery strong { display: block; color: #1e3a8a; font-size: 11px; }
.afps-dashboard-delivery p { margin: 1px 0 0; color: #64748b; font-size: 9px; }
.afps-dashboard-delivery__stats {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 3px;
flex-shrink: 0;
font-size: 10px;
font-weight: 800;
}
.afps-dashboard-delivery__stats .is-success { color: #047857; }
.afps-dashboard-delivery__stats .is-danger { color: #b91c1c; }
.afps-dashboard-delivery__stats .is-muted { color: #64748b; }
/* Workflow grouping for the native WordPress submenu. Classes are added by
admin.js only when the corresponding visible menu item exists. */
#adminmenu #toplevel_page_afps-dashboard .wp-submenu {
padding-top: 7px;
padding-bottom: 10px;
}
#adminmenu #toplevel_page_afps-dashboard .wp-submenu li {
position: relative;
}
#adminmenu #toplevel_page_afps-dashboard .wp-submenu a {
padding-top: 6px;
padding-bottom: 6px;
line-height: 1.25;
}
#adminmenu #toplevel_page_afps-dashboard .wp-submenu li.afps-menu-group-start {
margin-top: 5px;
padding-top: 19px;
border-top: 1px solid rgba(148,163,184,.18);
}
#adminmenu #toplevel_page_afps-dashboard .wp-submenu li.afps-menu-group-start::before {
content: attr(data-afps-group);
position: absolute;
top: 4px;
left: 12px;
color: #7f8ca3;
font-size: 8px;
font-weight: 800;
letter-spacing: .1em;
line-height: 1;
text-transform: uppercase;
pointer-events: none;
}
#adminmenu #toplevel_page_afps-dashboard .wp-submenu li.current > a {
color: #fff;
font-weight: 700;
}
@media (max-width: 900px) {
.afps-dashboard-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.afps-dashboard-brief { grid-template-columns: minmax(0, 1fr) auto; }
.afps-dashboard-brief__metrics { grid-column: 1 / -1; }
}
@media (max-width: 1100px) {
.afps-dashboard-grid { grid-template-columns: 1fr; }
.afps-dashboard-sidebar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.afps-dashboard-delivery { grid-column: 1 / -1; }
}
@media (max-width: 782px) {
.afps-dashboard-header {
align-items: flex-start;
flex-direction: column;
padding: 22px 20px;
}
.afps-dashboard-header__actions {
flex-direction: row;
width: 100%;
}
.afps-dashboard-header__actions > a { flex: 1; }
.afps-dashboard-brief { grid-template-columns: 1fr; gap: 13px; }
.afps-dashboard-brief__metrics { grid-column: auto; }
.afps-dashboard-brief__link { justify-self: start; }
.afps-dashboard-kpis { grid-template-columns: 1fr; }
.afps-dashboard-levels { overflow-x: auto; padding-bottom: 3px; }
.afps-dashboard-levels__label,
.afps-dashboard-level { flex: 0 0 auto; }
.afps-dashboard-sidebar { grid-template-columns: 1fr; }
.afps-dashboard-delivery { grid-column: auto; }
.afps-attention-item { grid-template-columns: 38px minmax(0, 1fr); }
.afps-attention-item > a { grid-column: 2; justify-self: start; padding-left: 0; }
.afps-dashboard-section { padding: 16px; }
.afps-day-schedule li { grid-template-columns: 51px 16px minmax(0, 1fr); gap: 7px; }
.afps-day-schedule::before { left: 66px; }
.afps-day-schedule__meta { grid-column: 3; text-align: left; }
.afps-dashboard-day__more { margin-left: 74px; }
}
@media (max-width: 480px) {
.afps-dashboard-header__actions { flex-direction: column; }
.afps-dashboard-context > span:last-child { display: none; }
.afps-dashboard-section__heading { align-items: flex-start; }
.afps-dashboard-heading-link { white-space: normal; text-align: right; }
.afps-dashboard-brief { padding: 13px; }
.afps-dashboard-brief__metrics { grid-template-columns: 1fr; gap: 1px; }
.afps-dashboard-brief__metrics > div { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; align-items: center; }
.afps-dashboard-brief__metrics strong { grid-row: span 2; grid-column: 2; margin: 0; }
}
/* ==========================================================================
Shared module workspace
========================================================================== */
.afps-module-bar {
position: relative;
z-index: 20;
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
min-height: 44px;
margin: 0 0 18px;
padding: 7px 8px 7px 14px;
border: 1px solid var(--afps-border);
border-radius: 12px;
background: rgba(255,255,255,.92);
box-shadow: var(--afps-shadow-xs);
backdrop-filter: blur(14px);
}
.afps-module-bar__trail {
display: flex;
align-items: center;
min-width: 0;
gap: 7px;
color: var(--afps-text-soft);
font-size: 11px;
}
.afps-module-bar__trail a { font-weight: 700; }
.afps-module-bar__trail strong {
overflow: hidden;
color: var(--afps-text);
font-size: 12px;
text-overflow: ellipsis;
white-space: nowrap;
}
.afps-module-switcher-toggle {
appearance: none;
display: inline-flex;
align-items: center;
gap: 7px;
min-height: 30px;
padding: 4px 9px;
border: 1px solid var(--afps-border);
border-radius: 8px;
color: var(--afps-text);
background: var(--afps-surface-2);
font-family: var(--afps-font);
font-size: 11px;
font-weight: 700;
cursor: pointer;
}
.afps-module-switcher-toggle:hover,
.afps-module-bar.is-open .afps-module-switcher-toggle {
border-color: #bfdbfe;
color: #1d4ed8;
background: #eff6ff;
}
.afps-module-switcher-toggle:focus-visible {
outline: none;
box-shadow: var(--afps-ring);
}
.afps-module-switcher-toggle .dashicons {
width: 15px;
height: 15px;
font-size: 15px;
}
.afps-module-switcher-toggle kbd {
padding: 1px 5px;
border: 1px solid var(--afps-border);
border-bottom-width: 2px;
border-radius: 4px;
color: var(--afps-text-mute);
background: #fff;
font-family: var(--afps-font);
font-size: 8px;
line-height: 1.4;
}
.afps-module-drawer {
position: absolute;
top: calc(100% + 8px);
right: 0;
width: min(760px, calc(100vw - 220px));
max-height: min(680px, calc(100vh - 150px));
overflow: auto;
padding: 18px;
border: 1px solid var(--afps-border);
border-radius: 16px;
background: #fff;
box-shadow: 0 22px 60px rgba(15,23,42,.22);
}
.afps-module-drawer__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 20px;
padding: 0 2px 14px;
border-bottom: 1px solid var(--afps-border);
}
.afps-module-drawer__head strong { display: block; font-size: 16px; }
.afps-module-drawer__head span { display: block; margin-top: 2px; color: var(--afps-text-mute); font-size: 11px; }
.afps-module-drawer__close {
appearance: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border: 0;
border-radius: 8px;
color: var(--afps-text-mute);
background: transparent;
cursor: pointer;
}
.afps-module-drawer__close:hover { color: var(--afps-text); background: #f1f5f9; }
.afps-module-drawer__groups {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px 22px;
padding-top: 15px;
}
#wpbody-content .afps-module-drawer__groups h2 {
margin: 0 0 7px;
color: var(--afps-text-mute);
font-size: 9px;
letter-spacing: .1em;
text-transform: uppercase;
}
.afps-module-drawer__groups section > div { display: grid; gap: 3px; }
.afps-module-drawer__groups a {
display: grid;
grid-template-columns: 30px minmax(0, 1fr);
align-items: center;
gap: 9px;
padding: 8px;
border: 1px solid transparent;
border-radius: 9px;
}
.afps-module-drawer__groups a:hover { border-color: #dbeafe; background: #f8fbff; }
.afps-module-drawer__groups a[aria-current="page"] {
border-color: #bfdbfe;
background: #eff6ff;
}
.afps-module-drawer__groups a > .dashicons {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 8px;
color: #1d4ed8;
background: #eaf2ff;
font-size: 16px;
}
.afps-module-drawer__groups a strong { display: block; color: var(--afps-text); font-size: 11px; }
.afps-module-drawer__groups a small {
display: block;
overflow: hidden;
margin-top: 1px;
color: var(--afps-text-mute);
font-size: 9px;
text-overflow: ellipsis;
white-space: nowrap;
}
.afps-module-page-head {
align-items: center;
margin-bottom: 14px;
padding: 0 2px;
}
.afps-module-page-head .afps-page-title h1 { font-size: 24px; letter-spacing: -.025em; }
.afps-module-page-head .afps-subtitle { max-width: 82ch; line-height: 1.45; }
.afps-wrap > .afps-tabs {
position: sticky;
z-index: 9;
top: 32px;
margin-top: 0;
box-shadow: 0 5px 14px rgba(15,23,42,.06);
}
.afps-wrap > .afps-tabs a[aria-selected="true"] { box-shadow: var(--afps-shadow-brand); }
/* Directory/report switching is supporting navigation, not a separate
workspace. Remove the full-width floating card so it does not create an
empty visual band between the page heading and the staff data. */
.afps-wrap > .afps-tabs--compact {
position: static;
gap: 2px;
min-height: 38px;
margin: 10px 0 12px;
padding: 0 2px;
border: 0;
border-bottom: 1px solid var(--afps-border);
border-radius: 0;
background: transparent;
box-shadow: none;
}
.afps-wrap > .afps-tabs--compact a {
position: relative;
min-height: 38px;
padding: 8px 12px;
border-radius: 7px 7px 0 0;
color: #333333;
font-size: 12px;
font-weight: 700;
}
.afps-wrap > .afps-tabs--compact a:hover {
color: var(--afps-brand);
background: #f1f5ff;
}
.afps-wrap > .afps-tabs--compact a.active,
.afps-wrap > .afps-tabs--compact a.active:hover {
color: var(--afps-brand);
background: transparent;
box-shadow: inset 0 -2px 0 var(--afps-brand);
}
.afps-workspace-card {
margin: 14px 0;
padding: 18px;
border: 1px solid var(--afps-border) !important;
border-radius: 12px !important;
background: var(--afps-surface) !important;
box-shadow: var(--afps-shadow-xs);
}
.afps-filter-bar,
.afps-wrap form.afps-filter-bar {
display: flex;
align-items: flex-end;
gap: 10px;
flex-wrap: wrap;
margin: 12px 0 !important;
padding: 11px 12px !important;
border: 1px solid var(--afps-border) !important;
border-radius: 10px !important;
background: #fff !important;
box-shadow: var(--afps-shadow-xs) !important;
}
.afps-filter-bar label { margin: 0; font-size: 11px; font-weight: 700; color: var(--afps-text-mute); }
.afps-filter-bar select,
.afps-filter-bar input { margin-top: 4px; }
/* Short Programs fee register: keep the full filter set easy to scan without
leaving a large dead area beside the controls. */
section.afps-payment-register[aria-labelledby="afps-short-program-fees-title"] > form.afps-filter-bar {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr));
align-items: end !important;
gap: 14px 12px;
margin: 16px 0 20px !important;
padding: 16px !important;
border-color: #d9e2ef !important;
border-radius: 14px !important;
background: linear-gradient(145deg, #fff 0%, #f8fbff 100%) !important;
box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 10px 28px rgba(30, 64, 175, .06) !important;
}
section.afps-payment-register[aria-labelledby="afps-short-program-fees-title"] > form.afps-filter-bar > div:not(.afps-filter-bar__actions) {
display: flex;
min-width: 0;
flex-direction: column;
gap: 7px;
}
section.afps-payment-register[aria-labelledby="afps-short-program-fees-title"] > form.afps-filter-bar label {
display: block;
margin: 0;
color: #52627a;
font-size: 10px;
font-weight: 800;
line-height: 1.25;
letter-spacing: .055em;
text-transform: uppercase;
}
section.afps-payment-register[aria-labelledby="afps-short-program-fees-title"] > form.afps-filter-bar select,
section.afps-payment-register[aria-labelledby="afps-short-program-fees-title"] > form.afps-filter-bar input[type="search"] {
width: 100%;
max-width: none;
min-height: 40px;
margin: 0 !important;
border: 1px solid #cfd9e7;
border-radius: 9px;
background-color: #fff;
color: #172033;
box-shadow: 0 1px 2px rgba(15, 23, 42, .025);
transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}
section.afps-payment-register[aria-labelledby="afps-short-program-fees-title"] > form.afps-filter-bar select:hover,
section.afps-payment-register[aria-labelledby="afps-short-program-fees-title"] > form.afps-filter-bar input[type="search"]:hover {
border-color: #aebed2;
}
section.afps-payment-register[aria-labelledby="afps-short-program-fees-title"] > form.afps-filter-bar select:focus,
section.afps-payment-register[aria-labelledby="afps-short-program-fees-title"] > form.afps-filter-bar input[type="search"]:focus {
border-color: var(--afps-primary);
outline: 0;
background-color: #fff;
box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}
section.afps-payment-register[aria-labelledby="afps-short-program-fees-title"] .afps-filter-bar__actions {
display: flex;
min-width: 0;
align-items: center;
justify-content: flex-end;
gap: 8px;
}
section.afps-payment-register[aria-labelledby="afps-short-program-fees-title"] .afps-filter-bar__actions .button {
display: inline-flex;
min-height: 40px;
align-items: center;
justify-content: center;
margin: 0;
border-radius: 9px;
white-space: nowrap;
}
section.afps-payment-register[aria-labelledby="afps-short-program-fees-title"] .afps-filter-bar__actions .button-primary {
padding-inline: 18px;
box-shadow: 0 5px 12px rgba(30, 64, 175, .16);
}
@media (max-width: 1100px) {
section.afps-payment-register[aria-labelledby="afps-short-program-fees-title"] > form.afps-filter-bar {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 900px) {
section.afps-payment-register[aria-labelledby="afps-short-program-fees-title"] > form.afps-filter-bar {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 560px) {
section.afps-payment-register[aria-labelledby="afps-short-program-fees-title"] > form.afps-filter-bar {
grid-template-columns: minmax(0, 1fr);
padding: 14px !important;
}
section.afps-payment-register[aria-labelledby="afps-short-program-fees-title"] .afps-filter-bar__actions,
section.afps-payment-register[aria-labelledby="afps-short-program-fees-title"] .afps-filter-bar__actions .button {
width: 100%;
}
}
/* Short Programs uses a purpose-built register toolbar: a quiet context rail
anchors the controls, search receives enough room to be useful, and the
actions read as one group instead of two unrelated buttons. */
.afps-short-programs-list form.afps-short-program-filters {
display: grid !important;
grid-template-columns: 150px minmax(145px, 1fr) minmax(140px, .95fr) minmax(110px, .7fr) minmax(155px, 1fr) minmax(190px, 1.25fr) max-content;
align-items: stretch !important;
gap: 0 12px;
flex-wrap: nowrap !important;
overflow: hidden;
margin: 0 0 10px !important;
padding: 0 14px 0 0 !important;
border-color: #dce4f0 !important;
border-radius: 12px !important;
box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 6px 18px rgba(15,23,42,.035) !important;
}
.afps-short-programs-list .afps-short-program-filters__intro {
display: flex;
min-width: 0;
align-items: center;
gap: 10px;
padding: 14px 15px;
border-right: 1px solid #dce5f3;
background: linear-gradient(135deg, #f6f9ff 0%, #edf3ff 100%);
}
.afps-short-programs-list .afps-short-program-filters__intro > .dashicons {
display: inline-grid;
width: 34px;
height: 34px;
flex: 0 0 34px;
place-items: center;
border: 1px solid #cad8f5;
border-radius: 10px;
color: var(--afps-brand);
background: rgba(255,255,255,.82);
font-size: 18px;
line-height: 1;
}
.afps-short-programs-list .afps-short-program-filters__intro strong,
.afps-short-programs-list .afps-short-program-filters__intro small { display: block; white-space: nowrap; }
.afps-short-programs-list .afps-short-program-filters__intro strong { color: #1e293b; font-size: 12px; line-height: 1.2; }
.afps-short-programs-list .afps-short-program-filters__intro small { margin-top: 3px; color: #70819a; font-size: 10px; line-height: 1.2; }
.afps-short-programs-list .afps-short-program-filters__field {
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: center;
gap: 5px;
min-width: 0;
padding: 11px 0;
}
.afps-short-programs-list .afps-short-program-filters label {
white-space: nowrap;
color: #6b7b91;
font-size: 11px;
font-weight: 700;
letter-spacing: .01em;
}
.afps-short-programs-list .afps-short-program-filters select,
.afps-short-programs-list .afps-short-program-filters input {
width: 100%;
min-width: 0;
height: 38px;
margin-top: 0;
padding: 6px 10px;
border-color: #d5deeb;
border-radius: 8px;
color: #334155;
background-color: #fff;
font-size: 13px;
box-shadow: none;
transition: border-color var(--afps-t), box-shadow var(--afps-t), background-color var(--afps-t);
}
.afps-short-programs-list .afps-short-program-filters select:hover,
.afps-short-programs-list .afps-short-program-filters input:hover { border-color: #b8c6da; }
.afps-short-programs-list .afps-short-program-filters select:focus,
.afps-short-programs-list .afps-short-program-filters input:focus {
border-color: var(--afps-brand);
box-shadow: 0 0 0 3px rgba(28,63,158,.11);
}
.afps-short-programs-list .afps-short-program-filters .afps-filter-bar__search input {
padding-left: 34px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: 11px center;
}
.afps-short-programs-list .afps-short-program-filters .afps-filter-bar__actions {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
align-self: stretch;
gap: 7px;
white-space: nowrap;
width: max-content;
padding: 27px 0 11px;
}
.afps-short-programs-list .afps-short-program-filters .button {
display: inline-flex;
min-height: 38px;
align-items: center;
justify-content: center;
gap: 5px;
padding: 6px 12px;
border-radius: 8px;
font-size: 12px;
font-weight: 700;
box-shadow: none;
}
.afps-short-programs-list .afps-short-program-filters .button .dashicons {
width: 15px;
height: 15px;
font-size: 15px;
line-height: 1;
}
.afps-short-programs-list .afps-table-filter { padding: 7px 10px; }
.afps-short-programs-list .afps-table-filter input[type="search"] { height: 34px; max-width: 320px; font-size: 13px; }
.afps-short-programs-list .afps-table-wrap thead th { padding: 10px 12px; font-size: 10.5px; }
.afps-short-programs-list .afps-table-wrap tbody td { padding: 10px 12px; font-size: 13px; line-height: 1.3; }
.afps-short-programs-list .afps-table-wrap tbody td strong { font-size: 14px; }
.afps-short-programs-list .afps-table-wrap .afps-badge { padding: 4px 9px; font-size: 12px; }
@media (max-width: 1280px) {
.afps-short-programs-list form.afps-short-program-filters {
grid-template-columns: 150px repeat(3, minmax(0, 1fr));
padding-right: 12px !important;
}
.afps-short-programs-list .afps-short-program-filters__intro { grid-row: 1 / span 2; }
.afps-short-programs-list .afps-short-program-filters__field { padding: 9px 0; }
.afps-short-programs-list .afps-short-program-filters .afps-filter-bar__actions { align-self: end; padding: 9px 0; }
}
@media (max-width: 900px) {
.afps-short-programs-list form.afps-short-program-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0 12px 12px !important; }
.afps-short-programs-list .afps-short-program-filters__intro { grid-column: 1 / -1; grid-row: auto; margin: 0 -12px; border-right: 0; border-bottom: 1px solid #dce5f3; padding: 10px 12px; }
.afps-short-programs-list .afps-short-program-filters__field { padding: 6px 0 0; }
.afps-short-programs-list .afps-short-program-filters .afps-filter-bar__actions { width: 100%; padding: 6px 0 0; }
.afps-short-programs-list .afps-short-program-filters .afps-filter-bar__actions .button { flex: 1 1 auto; }
}
@media (max-width: 520px) {
.afps-short-programs-list form.afps-short-program-filters { grid-template-columns: 1fr; }
.afps-short-programs-list .afps-short-program-filters__intro { grid-column: 1; }
}
.afps-sticky-actions {
position: sticky;
z-index: 7;
bottom: 0;
margin: 18px -18px -18px !important;
padding: 11px 18px !important;
border-top: 1px solid var(--afps-border);
border-radius: 0 0 12px 12px;
background: rgba(255,255,255,.94);
box-shadow: 0 -8px 22px rgba(15,23,42,.08);
backdrop-filter: blur(12px);
}
.afps-table-filter {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 10px 12px;
border-bottom: 1px solid var(--afps-border);
background: #fbfcfe;
}
.afps-table-filter label { flex: 1; max-width: 420px; }
.afps-table-filter input[type="search"] {
width: 100%;
height: 34px;
padding: 0 12px 0 35px;
border: 1px solid var(--afps-border-strong);
border-radius: 8px;
background:
url("data:image/svg+xml;utf8,") no-repeat 11px center,
#fff;
font-size: 12px;
}
.afps-table-filter input[type="search"]:focus {
outline: 0;
border-color: var(--afps-brand);
box-shadow: var(--afps-ring);
}
.afps-table-result-count {
flex-shrink: 0;
color: var(--afps-text-mute);
font-size: 10px;
font-weight: 700;
}
.afps-table-wrap tbody tr { transition: background var(--afps-t); }
.afps-table-wrap tbody tr:hover { background: #f8fbff; }
/* Compact summary tiles used by operational modules such as Audit Trail. */
.afps-module-stats {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
margin: 0 0 14px;
}
.afps-module-stats article {
display: flex;
align-items: center;
gap: 11px;
min-width: 0;
padding: 13px 14px;
border: 1px solid var(--afps-border);
border-radius: 11px;
background: #fff;
box-shadow: var(--afps-shadow-xs);
}
.afps-module-stats .dashicons {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
flex-shrink: 0;
border-radius: 9px;
color: #1d4ed8;
background: #eff6ff;
font-size: 17px;
}
.afps-module-stats strong { display: block; color: var(--afps-text); font-size: 20px; line-height: 1; }
.afps-module-stats small {
display: block;
overflow: hidden;
margin-top: 3px;
color: var(--afps-text-mute);
font-size: 9px;
text-overflow: ellipsis;
white-space: nowrap;
}
.afps-audit-action {
display: inline-flex;
padding: 3px 7px;
border-radius: 6px;
color: #3730a3;
background: #eef2ff;
font-size: 10px;
font-weight: 700;
}
.afps-audit-actor { font-weight: 700; }
.afps-table-wrap td time strong { display: block; font-size: 11px; white-space: nowrap; }
.afps-table-wrap td time small,
.afps-table-wrap td > small { display: block; margin-top: 2px; color: var(--afps-text-soft); font-size: 9px; }
.afps-table-wrap td code { font-size: 9px; }
.afps-settings-layout {
display: grid;
grid-template-columns: minmax(244px, 268px) minmax(0, 1fr);
gap: 18px;
align-items: start;
margin-top: 12px;
}
.afps-settings-sidebar {
position: sticky;
z-index: 8;
top: 76px;
max-height: calc(100vh - 96px);
overflow: auto;
padding: 11px;
border: 1px solid var(--afps-border);
border-radius: 12px;
background: rgba(255,255,255,.97);
box-shadow: var(--afps-shadow-sm);
backdrop-filter: blur(12px);
}
.afps-settings-sidebar__title {
display: flex;
flex-direction: column;
gap: 3px;
padding: 8px 9px 12px;
border-bottom: 1px solid var(--afps-border);
}
.afps-settings-sidebar__title strong {
color: var(--afps-text);
font-size: 16px;
line-height: 1.25;
}
.afps-settings-sidebar__title span {
color: var(--afps-text-soft);
font-size: 12.5px;
line-height: 1.35;
}
.afps-settings-nav {
display: flex;
flex-direction: column;
gap: 12px;
padding-top: 11px;
}
.afps-settings-nav__group { display: flex; flex-direction: column; gap: 4px; }
.afps-settings-nav__group-title {
padding: 4px 9px 3px;
color: #718096;
font-size: 10px;
font-weight: 800;
letter-spacing: .09em;
line-height: 1.25;
text-transform: uppercase;
}
.afps-settings-nav a {
position: relative;
display: flex;
min-width: 0;
flex-direction: column;
gap: 2px;
padding: 9px 10px 9px 13px;
border-radius: 8px;
color: var(--afps-text-mute);
text-decoration: none;
transition: color var(--afps-t), background var(--afps-t), box-shadow var(--afps-t);
}
.afps-settings-nav a > span {
overflow: hidden;
font-size: 13.5px;
font-weight: 750;
line-height: 1.3;
text-overflow: ellipsis;
white-space: nowrap;
}
.afps-settings-nav a > small {
overflow: hidden;
color: var(--afps-text-soft);
font-size: 11.5px;
line-height: 1.35;
text-overflow: clip;
white-space: normal;
}
.afps-settings-nav a:hover { color: var(--afps-text); background: #f5f7fb; }
.afps-settings-nav a:focus-visible { outline: 2px solid var(--afps-brand); outline-offset: 1px; }
.afps-settings-nav a.active {
color: var(--afps-brand);
background: #eef3ff;
box-shadow: inset 3px 0 0 var(--afps-brand);
}
.afps-settings-nav a.active > small { color: #6175a7; }
.afps-settings-stage { min-width: 0; }
.afps-settings-stage > .afps-workspace-card,
.afps-settings-stage > .afps-form-card { margin: 0 !important; }
.afps-settings-stage > form.afps-workspace-card { padding: 18px !important; }
.afps-settings-panel[hidden],
.afps-settings-stage > form[hidden] { display: none !important; }
.afps-settings-page .afps-doc-phase-grid[hidden] { display: none !important; }
.afps-settings-panel--form.afps-form-section {
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
}
.afps-settings-panel--form > h2 {
margin-top: 0 !important;
padding-top: 0 !important;
}
.afps-settings-panel--external { margin: 0 !important; }
.afps-settings-save { margin-top: 18px !important; }
#fee-collection-access td:nth-child(3) select {
width: 210px;
max-width: 100%;
}
@media (max-width: 900px) {
.afps-settings-layout { display: block; }
.afps-settings-sidebar {
top: 46px;
max-height: none;
margin-bottom: 12px;
padding: 6px;
overflow-x: auto;
overflow-y: hidden;
border-radius: 10px;
}
.afps-settings-sidebar__title,
.afps-settings-nav__group-title { display: none; }
.afps-settings-nav { flex-direction: row; gap: 4px; padding: 0; }
.afps-settings-nav__group { display: contents; }
.afps-settings-nav a { flex: 0 0 auto; min-width: 148px; padding: 9px 11px; box-shadow: none; }
.afps-settings-nav a.active { box-shadow: inset 0 -2px 0 var(--afps-brand); }
}
.afps-attendance-batch {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin: 14px 0 8px;
padding: 9px 11px;
border: 1px solid var(--afps-border);
border-radius: 9px;
background: #f8fafc;
}
.afps-attendance-batch > strong { color: var(--afps-text); font-size: 11px; }
.afps-attendance-batch > div { display: flex; flex-wrap: wrap; gap: 4px; }
.afps-attendance-batch button {
appearance: none;
padding: 5px 9px;
border: 1px solid var(--afps-border-strong);
border-radius: 7px;
color: var(--afps-text-mute);
background: #fff;
font-size: 10px;
font-weight: 700;
cursor: pointer;
}
.afps-attendance-batch button:hover,
.afps-attendance-batch button.active { color: #1d4ed8; border-color: #93c5fd; background: #eff6ff; }
.afps-attendance-batch > span { margin-left: auto; color: var(--afps-text-mute); font-size: 10px; }
.afps-attendance-page tr[data-attendance-status="present"] { box-shadow: inset 3px 0 #10b981; }
.afps-attendance-page tr[data-attendance-status="late"] { box-shadow: inset 3px 0 #f59e0b; }
.afps-attendance-page tr[data-attendance-status="absent"] { box-shadow: inset 3px 0 #ef4444; }
.afps-attendance-page tr[data-attendance-status="excused"] { box-shadow: inset 3px 0 #64748b; }
@media (max-width: 1100px) {
.afps-module-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 782px) {
.afps-module-bar { margin-bottom: 14px; }
.afps-module-bar__trail > span:not(:last-of-type) { display: none; }
.afps-module-switcher-toggle kbd { display: none; }
.afps-module-drawer {
position: fixed;
top: 56px;
right: 10px;
left: 10px;
width: auto;
max-height: calc(100vh - 72px);
}
.afps-module-drawer__groups { grid-template-columns: 1fr; }
.afps-wrap > .afps-tabs { top: 46px; }
.afps-filter-bar { align-items: stretch; flex-direction: column; }
}
@media (max-width: 520px) {
.afps-module-bar__trail span,
.afps-module-bar__trail strong { display: none; }
.afps-module-switcher-toggle { margin-left: auto; }
.afps-module-stats { grid-template-columns: 1fr; }
.afps-table-filter { align-items: stretch; flex-direction: column; gap: 7px; }
.afps-table-filter label { max-width: none; }
.afps-attendance-batch > span { width: 100%; margin-left: 0; }
}
/* ---------- Custom month picker (for ) ---------- */
.afps-monthpicker-pop {
background: #fff;
border: 1px solid var(--afps-border);
border-radius: 10px;
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.15);
width: 280px;
padding: 0;
overflow: hidden;
font-family: inherit;
}
.afps-mp-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 16px;
background: var(--afps-brand);
color: #fff;
margin: 0;
}
.afps-mp-head .afps-mp-year { font-weight: 600; font-size: 15px; color: #fff; }
.afps-mp-head button {
background: transparent;
border: 0;
cursor: pointer;
font-size: 20px;
line-height: 1;
padding: 4px 10px;
color: #fff;
border-radius: 6px;
opacity: .9;
}
.afps-mp-head button:hover { background: rgba(255, 255, 255, .18); opacity: 1; }
.afps-mp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 12px; }
.afps-mp-month {
background: #fff;
border: 1px solid transparent;
border-radius: 6px;
padding: 12px 0;
font-size: 13px;
cursor: pointer;
color: var(--afps-text);
transition: background .15s, color .15s;
}
.afps-mp-month:hover { background: var(--afps-surface-2); color: var(--afps-brand-dark); }
.afps-mp-month.is-active { background: var(--afps-brand); color: #fff; font-weight: 600; }
.afps-monthpicker-wrap { position: relative; display: inline-block; }
.afps-form-field .afps-monthpicker-wrap,
.afps-field .afps-monthpicker-wrap { width: 100%; }
.afps-monthpicker-wrap .afps-monthpicker-display { padding-right: 34px !important; }
.afps-monthpicker-icon {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
pointer-events: auto;
cursor: pointer;
font-size: 14px;
opacity: .65;
}
/* ---------- Multi-select checklist (afps-multiselect) ---------- */
.afps-ms-hidden-native {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
.afps-ms {
font-family: var(--afps-font);
color: var(--afps-text);
border: 1px solid var(--afps-border-strong);
border-radius: 8px;
background: var(--afps-surface);
overflow: hidden;
}
/* Toolbar - shown only when the list is long enough to need filtering. */
.afps-ms-toolbar {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border-bottom: 1px solid var(--afps-border);
background: var(--afps-surface-2);
flex-wrap: wrap;
}
.afps-ms input.afps-ms-filter {
flex: 1;
min-width: 180px;
height: 32px;
padding: 0 10px 0 30px;
border: 1px solid var(--afps-border-strong);
border-radius: 6px;
background:
url("data:image/svg+xml;utf8,") no-repeat 9px center,
var(--afps-surface);
font-family: inherit;
font-size: 13px;
color: var(--afps-text);
}
.afps-ms input.afps-ms-filter:focus {
outline: none;
border-color: var(--afps-brand);
box-shadow: 0 0 0 3px rgba(28, 63, 158, 0.14);
}
.afps-ms-counter {
font-size: 12px;
color: var(--afps-text-mute);
white-space: nowrap;
}
.afps-ms-actions {
display: inline-flex;
gap: 10px;
margin-left: auto;
}
.afps-ms-link {
appearance: none;
background: transparent;
border: 0;
color: var(--afps-brand);
cursor: pointer;
font-size: 12px;
font-weight: 600;
padding: 2px 4px;
border-radius: 4px;
}
.afps-ms-link:hover {
color: var(--afps-brand-dark);
background: var(--afps-brand-soft);
}
/* Vertical checklist. Grows to fit content; scrolls only when very long. */
.afps-ms-grid {
display: flex;
flex-direction: column;
gap: 2px;
padding: 6px;
max-height: 520px;
overflow-y: auto;
}
.afps-ms-row {
position: relative;
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border: 1px solid transparent;
border-radius: 6px;
cursor: pointer;
font-size: 13px;
line-height: 1.3;
transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
user-select: none;
}
.afps-ms-row input[type="checkbox"] {
position: absolute;
top: 50%;
left: 10px;
z-index: 1;
margin: 0;
width: 18px;
height: 18px;
transform: translateY(-50%);
opacity: 0;
cursor: pointer;
pointer-events: auto;
}
.afps-ms-check {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
box-sizing: border-box;
flex: 0 0 18px;
border: 1px solid #8c8f94;
border-radius: 3px;
background: var(--afps-surface);
pointer-events: none;
transition: background 80ms ease, border-color 80ms ease, box-shadow 80ms ease;
}
.afps-ms-row.is-on .afps-ms-check {
border-color: var(--afps-brand);
background: var(--afps-brand);
}
.afps-ms-row.is-on .afps-ms-check::after {
content: "";
width: 4px;
height: 8px;
margin-top: -2px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.afps-ms-row input[type="checkbox"]:focus-visible + .afps-ms-check {
box-shadow: 0 0 0 3px rgba(28, 63, 158, 0.24);
}
.afps-ms-row:hover {
background: var(--afps-brand-soft);
border-color: var(--afps-border);
}
.afps-ms-row.is-on {
background: var(--afps-brand-soft);
border-color: var(--afps-brand);
color: var(--afps-brand-dark);
font-weight: 600;
}
.afps-ms-row:focus-within {
outline: none;
box-shadow: 0 0 0 3px rgba(28, 63, 158, 0.18);
}
.afps-ms.is-invalid {
border-color: #dc2626;
box-shadow: 0 0 0 2px rgba(220, 38, 38, .14);
}
.afps-selection-error {
display: block;
margin-top: 6px;
color: #b91c1c;
font-size: 12px;
font-weight: 600;
}
.afps-selection-error[hidden] { display: none !important; }
.afps-ms-label {
flex: 1;
min-width: 0;
word-break: break-word;
}
/* Enrollment filters for bulk-recipient checklists. */
.afps-bulk-student-filters {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
margin: 0 0 10px;
padding: 11px 12px 12px;
border: 1px solid var(--afps-border);
border-radius: 8px;
background: var(--afps-surface-2);
}
.afps-bulk-student-filters > div { min-width: 0; }
.afps-form .afps-bulk-student-filters label {
margin: 0 0 5px;
color: var(--afps-text-soft);
font-size: 12px;
font-weight: 600;
}
.afps-form .afps-bulk-student-filters select {
width: 100%;
max-width: none;
height: 36px;
min-height: 36px;
font-size: 13px;
}
@media (max-width: 900px) {
.afps-bulk-student-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
.afps-bulk-student-filters { grid-template-columns: 1fr; }
}
.afps-bulk-custom-message {
padding: 13px 14px 12px;
border: 1px solid var(--afps-border);
border-radius: 8px;
background: var(--afps-surface-2);
}
.afps-bulk-custom-message[hidden],
.afps-bulk-custom-message [hidden] { display: none !important; }
.afps-bulk-custom-message [data-afps-bulk-custom-subject] { margin-bottom: 11px; }
.afps-form .afps-bulk-custom-message input {
width: 100%;
max-width: none;
background: var(--afps-surface);
}
.afps-form .afps-bulk-custom-message textarea.wp-editor-area {
width: 100%;
max-width: none;
min-height: 180px;
}
.afps-bulk-custom-message .wp-editor-wrap {
width: 100%;
max-width: none;
}
.afps-bulk-custom-message .wp-editor-container {
border-color: var(--afps-border-strong);
border-radius: 0 0 7px 7px;
background: var(--afps-surface);
}
.afps-bulk-custom-message .mce-tinymce,
.afps-bulk-custom-message .mce-toolbar-grp {
border-color: var(--afps-border-strong);
box-shadow: none;
}
.afps-bulk-custom-message .wp-editor-wrap.is-invalid .wp-editor-container {
box-shadow: 0 0 0 2px #dc2626;
}
.afps-rich-editor__error {
display: block;
margin-top: 6px;
color: #b91c1c;
font-size: 12px;
font-weight: 600;
}
.afps-bulk-custom-message__meta {
display: flex;
justify-content: space-between;
gap: 12px;
margin-top: 7px;
color: var(--afps-text-mute);
font-size: 12px;
}
body.afps-message-preview-open { overflow: hidden; }
.afps-message-preview {
position: fixed;
inset: 0;
z-index: 100100;
display: grid;
place-items: center;
padding: 24px;
background: rgba(15, 23, 42, .64);
backdrop-filter: blur(2px);
}
.afps-message-preview[hidden] { display: none !important; }
.afps-message-preview [hidden] { display: none !important; }
.afps-message-preview__panel {
display: flex;
flex-direction: column;
width: min(760px, 100%);
max-height: min(86vh, 760px);
overflow: hidden;
border-radius: 12px;
background: var(--afps-surface);
box-shadow: 0 24px 64px rgba(15, 23, 42, .28);
}
.afps-message-preview__head,
.afps-message-preview__actions {
display: flex;
align-items: center;
gap: 12px;
padding: 16px 20px;
border-bottom: 1px solid var(--afps-border);
}
.afps-message-preview__head { justify-content: space-between; }
.afps-message-preview__head h3 { margin: 2px 0 0; font-size: 20px; }
.afps-message-preview__body {
min-height: 180px;
padding: 20px;
overflow-y: auto;
}
.afps-message-preview__actions {
justify-content: flex-end;
border-top: 1px solid var(--afps-border);
border-bottom: 0;
background: var(--afps-surface-2);
}
.afps-message-preview__summary {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
margin: 0 0 14px;
}
.afps-message-preview__summary > div {
padding: 10px 12px;
border: 1px solid var(--afps-border);
border-radius: 7px;
background: var(--afps-surface-2);
}
.afps-message-preview__summary dt {
margin-bottom: 3px;
color: var(--afps-text-mute);
font-size: 11px;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
}
.afps-message-preview__summary dd { margin: 0; color: var(--afps-text); font-weight: 600; }
.afps-message-preview__note {
margin: 0 0 14px;
color: var(--afps-text-mute);
font-size: 12px;
}
.afps-message-preview__subject,
.afps-message-preview__message {
margin-top: 12px;
}
.afps-message-preview__subject > div,
.afps-message-preview__message > div {
margin-top: 6px;
padding: 13px 14px;
border: 1px solid var(--afps-border-strong);
border-radius: 7px;
background: #fff;
color: #172033;
}
.afps-message-preview__message > div { min-height: 110px; white-space: pre-wrap; }
.afps-message-preview__message > div.is-html { white-space: normal; }
@media (max-width: 620px) {
.afps-message-preview { padding: 10px; }
.afps-message-preview__summary { grid-template-columns: 1fr; }
.afps-message-preview__actions { flex-wrap: wrap; }
}
@media (max-width: 620px) {
.afps-bulk-custom-message__meta { flex-direction: column; gap: 3px; }
}
/* ---------- Installments repeater ---------- */
.afps-installments {
border: 1px solid var(--afps-border-strong);
border-radius: 8px;
background: var(--afps-surface);
padding: 8px;
}
.afps-installments-rows {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 8px;
}
.afps-installments-rows:empty {
margin-bottom: 0;
}
.afps-installment-row {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr auto;
gap: 8px;
align-items: center;
padding: 6px 8px;
border: 1px solid var(--afps-border);
border-radius: 6px;
background: var(--afps-surface-2);
}
.afps-installment-row input {
height: 34px;
padding: 0 10px;
border: 1px solid var(--afps-border-strong);
border-radius: 5px;
background: var(--afps-surface);
font-family: inherit;
font-size: 13px;
color: var(--afps-text);
width: 100%;
}
.afps-installment-row input:focus {
outline: none;
border-color: var(--afps-brand);
box-shadow: 0 0 0 3px rgba(28, 63, 158, 0.14);
}
.afps-installment-remove {
appearance: none;
background: transparent;
border: 1px solid transparent;
border-radius: 5px;
cursor: pointer;
width: 30px;
height: 30px;
font-size: 18px;
line-height: 1;
color: var(--afps-text-mute);
transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.afps-installment-remove:hover {
background: rgba(239, 68, 68, 0.1);
border-color: rgba(239, 68, 68, 0.3);
color: var(--afps-danger);
}
.afps-installments-add {
align-self: flex-start;
}
@media (max-width: 640px) {
.afps-installment-row {
grid-template-columns: 1fr 1fr auto;
grid-template-areas:
"title title remove"
"date amount remove";
}
.afps-installment-row .afps-installment-title { grid-area: title; }
.afps-installment-row .afps-installment-date { grid-area: date; }
.afps-installment-row .afps-installment-amount { grid-area: amount; }
.afps-installment-row .afps-installment-remove { grid-area: remove; align-self: center; }
}
/* ---------- Timetable grid ---------- */
.afps-tt-toolbar {
display: flex;
gap: 10px;
align-items: center;
flex-wrap: wrap;
padding: 10px 12px;
background: var(--afps-surface-2);
border: 1px solid var(--afps-border);
border-radius: 8px;
margin: 12px 0;
}
.afps-tt-toolbar select {
height: 34px;
padding: 0 10px;
border: 1px solid var(--afps-border-strong);
border-radius: 6px;
background: var(--afps-surface);
font-size: 13px;
}
.afps-tt-toolbar-mode {
display: inline-flex;
flex-shrink: 0; /* never shrink below content -> no shaved text */
border: 1px solid var(--afps-border-strong);
border-radius: 8px;
overflow: hidden;
background: var(--afps-surface);
}
.afps-tt-toolbar-mode label {
display: inline-flex;
align-items: center;
padding: 7px 14px;
font-size: 13px;
font-weight: 600;
white-space: nowrap; /* labels stay on one line, never clipped/wrapped */
cursor: pointer;
color: var(--afps-text-mute);
border-right: 1px solid var(--afps-border);
transition: background 120ms ease, color 120ms ease;
}
.afps-tt-toolbar-mode label:last-child { border-right: 0; }
/* Visually hide the radio without dropping it from the keyboard tab order,
and without relying on display:none winning a specificity race with wp-admin core. */
.afps-tt-toolbar-mode label input {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
border: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
}
.afps-tt-toolbar-mode label.is-on {
background: var(--afps-brand);
}
/* Target both the label and its inner span, with !important, so the active-tab
text stays readable white even if a theme or other plugin scopes a darker
color on labels/spans via an ID selector or !important. */
.afps-tt-toolbar-mode label.is-on,
.afps-tt-toolbar-mode label.is-on span {
color: #fff !important;
}
.afps-tt-toolbar-mode label:hover:not(.is-on) {
background: var(--afps-brand-soft);
color: var(--afps-brand-dark);
}
.afps-tt-grid {
display: grid;
grid-template-columns: 64px repeat(var(--afps-tt-days, 5), minmax(0, 1fr));
grid-auto-rows: 22px;
background: var(--afps-surface);
border: 1px solid var(--afps-border);
border-radius: 10px;
overflow: hidden;
box-shadow: var(--afps-shadow-xs);
}
.afps-tt-corner { background: var(--afps-surface-2); border-bottom: 1px solid var(--afps-border); border-right: 1px solid var(--afps-border); }
.afps-tt-dayhead {
background: var(--afps-surface-2);
color: var(--afps-text);
font-size: 12px;
font-weight: 700;
text-align: center;
padding: 10px 6px;
border-bottom: 1px solid var(--afps-border);
border-right: 1px solid var(--afps-border);
letter-spacing: 0.02em;
text-transform: uppercase;
}
.afps-tt-dayhead:last-child { border-right: 0; }
.afps-tt-hour {
font-size: 11px;
color: var(--afps-text-mute);
padding: 2px 8px 0 8px;
text-align: right;
border-right: 1px solid var(--afps-border);
background: var(--afps-surface-2);
font-variant-numeric: tabular-nums;
}
.afps-tt-cell {
border-right: 1px solid var(--afps-border);
}
.afps-tt-cell:last-child { border-right: 0; }
.afps-tt-cell--hour {
border-top: 1px solid var(--afps-border);
}
.afps-tt-slot {
position: relative;
margin: 2px;
border-radius: 6px;
padding: 6px 8px;
background: hsl(var(--tt-hue, 220) 75% 96%);
border: 1px solid hsl(var(--tt-hue, 220) 70% 75%);
color: hsl(var(--tt-hue, 220) 50% 22%);
font-size: 11.5px;
line-height: 1.25;
overflow: hidden;
display: flex;
flex-direction: column;
gap: 2px;
z-index: 1;
}
.afps-tt-slot:hover {
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
z-index: 2;
}
.afps-tt-slot-head {
display: flex;
align-items: baseline;
gap: 6px;
flex-wrap: wrap;
}
.afps-tt-slot-code {
font-family: ui-monospace, Menlo, monospace;
font-weight: 700;
font-size: 12px;
color: hsl(var(--tt-hue, 220) 55% 28%);
}
.afps-tt-slot-title {
font-weight: 500;
color: hsl(var(--tt-hue, 220) 40% 20%);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
}
.afps-tt-slot-meta {
color: hsl(var(--tt-hue, 220) 30% 32%);
font-variant-numeric: tabular-nums;
font-size: 10.5px;
display: flex;
gap: 4px;
flex-wrap: wrap;
align-items: center;
}
.afps-tt-slot-extra {
font-weight: 600;
}
.afps-tt-slot-actions {
margin-top: auto;
font-size: 10.5px;
opacity: 0;
transition: opacity 120ms ease;
}
.afps-tt-slot:hover .afps-tt-slot-actions,
.afps-tt-slot:focus-within .afps-tt-slot-actions { opacity: 1; }
.afps-tt-slot-actions a {
color: hsl(var(--tt-hue, 220) 55% 30%);
text-decoration: none;
}
.afps-tt-slot-actions a:hover { text-decoration: underline; }
.afps-tt-empty {
padding: 28px 20px;
text-align: center;
border: 1px dashed var(--afps-border-strong);
border-radius: 10px;
background: var(--afps-surface);
color: var(--afps-text-mute);
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
}
.afps-tt-empty strong { color: var(--afps-text); font-size: 15px; }
/* ==========================================================================
School operations workspace
--------------------------------------------------------------------------
The SMS is a single operating system. These shared rules deliberately keep
navigation, headers, secondary navigation, filters and data surfaces in the
same visual language across every module.
========================================================================== */
/* Let the work define the canvas. The previous rounded, full-height panel
made every short page look like it was floating in a large blank container. */
/* The portal supplies its own 24px canvas padding below. Remove WordPress's
additional 20px admin-content gutter so the sidebar-to-content spacing is
consistent with the rest of the interface. This stylesheet is loaded only
on Afritech Portal System screens. */
body.wp-admin #wpcontent {
padding-left: 0;
}
#wpbody-content .afps-wrap {
max-width: 1600px;
min-height: 0;
margin: 0 24px 36px 0;
padding: 18px 24px 36px;
border-radius: 0;
background: transparent;
}
.afps-utilbar { display: none !important; }
/* Breadcrumbs are orientation aids, not a second card above the page. */
.afps-module-bar {
min-height: 30px;
margin: 0 0 12px;
padding: 0 0 9px;
border: 0;
border-bottom: 1px solid var(--afps-border);
border-radius: 0;
background: transparent;
box-shadow: none;
backdrop-filter: none;
}
.afps-module-bar__trail { gap: 6px; font-size: 11px; }
.afps-module-switcher-toggle {
min-height: 29px;
padding: 3px 8px;
border-color: #d9e1ec;
background: #fff;
}
/* A concise page header gives every area a repeatable task hierarchy. */
.afps-page-head,
.afps-module-page-head {
align-items: flex-start;
gap: 14px;
margin-bottom: 14px;
padding: 2px 0 0;
}
.afps-page-head .afps-page-title h1,
.afps-module-page-head .afps-page-title h1 {
font-size: 25px;
letter-spacing: -.035em;
}
.afps-page-head .afps-subtitle,
.afps-module-page-head .afps-subtitle {
max-width: 78ch;
margin-top: 4px;
line-height: 1.5;
}
.afps-page-head .afps-page-actions { padding-top: 3px; }
/* Compact, actionable wayfinding for high-consequence workflows. The line
stays short enough to aid orientation without creating another empty panel. */
.afps-workflow-hint {
display: flex;
align-items: center;
gap: 14px;
margin: 0 0 13px;
padding: 8px 11px;
border-left: 3px solid #2563eb;
border-radius: 0 9px 9px 0;
background: #f7faff;
}
.afps-workflow-hint > strong {
flex: 0 0 auto;
color: #1e3a8a;
font-size: 11px;
letter-spacing: .02em;
}
.afps-workflow-hint ol { display: flex; flex-wrap: wrap; gap: 5px 22px; margin: 0; padding: 0; list-style: none; }
.afps-workflow-hint li { display: inline-flex; align-items: center; gap: 5px; color: #64748b; font-size: 10px; font-weight: 700; }
.afps-workflow-hint li::before {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
border-radius: 50%;
color: #1d4ed8;
background: #dbeafe;
content: counter(list-item);
font-size: 9px;
}
.afps-ledger-picker {
display: grid;
grid-template-columns: auto minmax(260px, 440px) auto;
align-items: end;
gap: 8px;
margin: 0 0 14px;
padding: 10px 11px;
border: 1px solid var(--afps-border);
border-radius: 10px;
background: #fff;
box-shadow: var(--afps-shadow-xs);
}
.afps-ledger-picker label { margin: 0; padding-bottom: 8px; color: var(--afps-text-mute); font-size: 11px; font-weight: 700; }
.afps-ledger-picker select { width: 100%; }
.afps-workflow-picker {
display: grid;
grid-template-columns: minmax(200px, 1fr) minmax(280px, 1.2fr);
align-items: center;
gap: 16px;
padding: 16px;
border: 1px solid #cbdaf6;
border-radius: 12px;
background: linear-gradient(115deg, #f8fbff, #f2f6ff);
}
.afps-workflow-picker strong { display: block; color: #172554; font-size: 13px; }
.afps-workflow-picker p { margin: 3px 0 0; color: #64748b; font-size: 11px; }
.afps-workflow-picker form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; }
.afps-workflow-picker select { min-width: 0; }
/* Secondary navigation becomes a clear section rail, rather than a large
empty box. This applies to Academic Setup and every other tabbed module. */
.afps-wrap > .afps-tabs {
position: static;
z-index: auto;
display: flex;
gap: 2px;
min-height: 40px;
margin: 0 0 14px;
padding: 0 2px;
overflow-x: auto;
flex-wrap: nowrap;
border: 0;
border-bottom: 1px solid var(--afps-border);
border-radius: 0;
background: transparent;
box-shadow: none;
}
.afps-wrap > .afps-tabs a,
.afps-wrap > .afps-tabs--compact a {
position: relative;
display: inline-flex;
min-height: 40px;
align-items: center;
padding: 8px 12px;
border-radius: 7px 7px 0 0;
color: #333333;
font-size: 12px;
font-weight: 700;
}
.afps-wrap > .afps-tabs a:hover { color: var(--afps-brand); background: #f1f5ff; }
.afps-wrap > .afps-tabs a.active,
.afps-wrap > .afps-tabs a.active:hover,
.afps-wrap > .afps-tabs a[aria-selected="true"] {
color: var(--afps-brand);
background: transparent;
box-shadow: inset 0 -2px 0 var(--afps-brand);
}
.afps-wrap > .afps-tabs a.active span { color: var(--afps-brand) !important; background: #e8efff !important; }
/* Lists should move cleanly from scope -> search -> data. */
.afps-stats { gap: 10px; margin: 0 0 12px; }
.afps-stats .afps-stat {
min-height: 68px;
padding: 11px 13px;
border-radius: 10px;
box-shadow: none;
}
.afps-stats .afps-stat .value { font-size: 21px; }
.afps-toolbar {
gap: 8px;
margin: 0 0 10px;
padding: 8px;
border: 1px solid var(--afps-border);
border-radius: 10px;
background: #fff;
box-shadow: var(--afps-shadow-xs);
}
.afps-toolbar form input[type="search"] { max-width: 520px; border-radius: 7px; }
.afps-view-toggle { margin: 0; box-shadow: none; }
.afps-table-wrap {
border-color: #dde4ee;
border-radius: 12px;
box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
.afps-table-wrap thead th { background: #f8fafc; }
.afps-table-wrap tbody tr:hover { background: #f7faff; }
/* The native WordPress submenu remains the fast global navigator. Give only
the SMS branch a branded, calm hierarchy so its categories read as one app.
The branch must stay FLUSH with the rest of #adminmenu: WordPress menu items
are full-bleed, so any horizontal margin here leaves a visible step down the
sidebar's edge. Inset the hover/current pill instead of the block. */
#adminmenu #toplevel_page_afps-dashboard > a.menu-top {
margin: 0 0 2px;
border-radius: 0;
background: linear-gradient(135deg, #1d4ed8, #3730a3);
box-shadow: none;
}
/* Remove WordPress's protruding current-menu pointer. The branded menu already
communicates selection and the triangle creates a distracting extension
past the sidebar edge. */
#adminmenu #toplevel_page_afps-dashboard.wp-has-current-submenu::after,
#adminmenu #toplevel_page_afps-dashboard.current::after,
#adminmenu #toplevel_page_afps-dashboard > a.menu-top::after,
#adminmenu #toplevel_page_afps-dashboard > a.wp-has-current-submenu::after {
display: none !important;
}
#adminmenu #toplevel_page_afps-dashboard .wp-submenu {
margin: 0 0 10px;
padding: 7px 0 9px;
border-radius: 0;
background: #111c36;
}
#adminmenu #toplevel_page_afps-dashboard .wp-submenu a {
margin: 1px 8px;
padding: 7px 8px;
border-radius: 6px;
color: #b7c4d8;
}
#adminmenu #toplevel_page_afps-dashboard .wp-submenu a:hover { color: #fff; background: rgba(255,255,255,.08); }
#adminmenu #toplevel_page_afps-dashboard .wp-submenu li.current > a {
color: #fff;
background: rgba(255,255,255,.12);
box-shadow: inset 3px 0 0 #fbbf24;
}
/* The group-start row must sit on the SAME left edge as every other row: its
anchor already carries the 8px pill inset, so any margin on the stacks
on top of it and steps the first item of each group inward. Keep the block
full-bleed and draw the divider with ::after so only the rule is inset. */
#adminmenu #toplevel_page_afps-dashboard .wp-submenu li.afps-menu-group-start {
margin: 7px 0 2px;
padding: 17px 0 0;
border-top: 0;
}
#adminmenu #toplevel_page_afps-dashboard .wp-submenu li.afps-menu-group-start::after {
content: "";
position: absolute;
top: 0;
right: 8px;
left: 8px;
height: 1px;
background: rgba(148,163,184,.16);
pointer-events: none;
}
#adminmenu #toplevel_page_afps-dashboard .wp-submenu li.afps-menu-group-start::before { left: 16px; color: #70819e; }
@media (max-width: 782px) {
#wpbody-content .afps-wrap { margin-right: 10px; padding: 14px 14px 28px; }
.afps-module-bar { margin-bottom: 10px; }
.afps-page-head .afps-page-title h1,
.afps-module-page-head .afps-page-title h1 { font-size: 22px; }
.afps-wrap > .afps-tabs { margin-bottom: 12px; }
.afps-toolbar form input[type="search"] { max-width: none; }
.afps-workflow-hint { align-items: flex-start; flex-direction: column; gap: 6px; }
.afps-ledger-picker,
.afps-workflow-picker { grid-template-columns: 1fr; }
.afps-ledger-picker label { padding-bottom: 0; }
.afps-workflow-picker form { grid-template-columns: 1fr; }
}
/* ---------- Readable type scale ----------
The admin application is used for sustained, detail-heavy work. Its former
14px base and 9–11px supporting text made it feel smaller than WordPress
itself, particularly on standard 1080p office displays. Keep 16px as the
reading baseline, reserve 12px only for genuinely secondary metadata, and
use the same scale on every module rather than fixing individual screens. */
.afps-wrap {
font-size: 16px;
line-height: 1.55;
}
.afps-wrap h1 { font-size: 28px; }
.afps-wrap h2 { font-size: 22px; }
.afps-wrap h3 { font-size: 17px; }
.afps-page-head .afps-page-title h1,
.afps-module-page-head .afps-page-title h1 { font-size: 28px; }
.afps-page-head .afps-subtitle,
.afps-module-page-head .afps-subtitle { font-size: 15px; }
/* Forms, filters, actions and tabular data make up most operational screens. */
.afps-form label,
.afps-field label,
.afps-wrap form[method="get"] label { font-size: 14px; }
.afps-form input[type="text"],
.afps-form input[type="email"],
.afps-form input[type="password"],
.afps-form input[type="url"],
.afps-form input[type="date"],
.afps-form input[type="datetime-local"],
.afps-form input[type="time"],
.afps-form input[type="number"],
.afps-form input[type="search"],
.afps-form input[type="tel"],
.afps-form select,
.afps-form textarea,
.afps-wrap form[method="get"] input[type="search"],
.afps-wrap form[method="get"] input[type="text"],
.afps-wrap form[method="get"] input[type="number"],
.afps-wrap form[method="get"] select,
.afps-wrap .button,
.afps-wrap .button-primary,
.afps-wrap .button-secondary { font-size: 15px; }
.afps-table-wrap thead th { font-size: 12px; }
.afps-table-wrap td { font-size: 15px; }
.afps-table-wrap td input[type="number"],
.afps-table-wrap td input[type="text"],
.afps-table-wrap td select { font-size: 14px; }
.afps-badge { font-size: 12px; }
.afps-notice,
.afps-empty .afps-empty-desc,
.afps-form-section-title p,
.afps-form-footer-meta,
.afps-breadcrumb { font-size: 14px; }
.afps-form-section-title h2,
.afps-empty strong { font-size: 16px; }
.afps-field label .afps-hint,
.afps-field .afps-help { font-size: 13px; }
.afps-wrap > .afps-tabs a,
.afps-wrap > .afps-tabs--compact a { font-size: 14px; }
.afps-workflow-hint > strong,
.afps-ledger-picker label,
.afps-workflow-picker strong { font-size: 13px; }
.afps-workflow-hint li,
.afps-workflow-picker p { font-size: 12px; }
/* Dashboard: increase small labels and supporting values without inflating
the financial figures or changing the responsive grid. */
.afps-dashboard-eyebrow,
.afps-dashboard-section__eyebrow,
.afps-dashboard-kpi__top { font-size: 12px; }
#wpbody-content .afps-wrap .afps-dashboard-header h1 { font-size: clamp(30px, 2.7vw, 40px); }
#wpbody-content .afps-wrap .afps-dashboard-header__copy > p { font-size: 17px; }
.afps-dashboard-context > span { font-size: 14px; }
.afps-dashboard-btn { font-size: 15px; }
.afps-dashboard-brief__lead span { font-size: 12px; }
.afps-dashboard-brief__lead strong { font-size: 16px; }
.afps-dashboard-brief__metrics span,
.afps-dashboard-brief__metrics small { font-size: 12px; }
.afps-dashboard-brief__metrics strong { font-size: 18px; }
.afps-dashboard-brief__link { font-size: 13px; }
.afps-dashboard-kpi > strong { font-size: clamp(28px, 2.2vw, 34px); }
.afps-dashboard-kpi > strong small,
.afps-dashboard-kpi > p,
.afps-dashboard-kpi > a { font-size: 14px; }
.afps-dashboard-levels__label { font-size: 12px; }
.afps-dashboard-level > span { font-size: 11px; }
.afps-dashboard-level > strong { font-size: 17px; }
.afps-dashboard-level > small { font-size: 13px; }
#wpbody-content .afps-dashboard .afps-dashboard-section__heading h2 { font-size: 21px; }
.afps-dashboard-count,
.afps-dashboard-heading-link,
.afps-dashboard-footer-link { font-size: 13px; }
.afps-attention-item h3,
.afps-dashboard-day__empty strong,
.afps-health-list strong,
.afps-quick-action strong,
.afps-activity-list strong,
.afps-dashboard-delivery strong { font-size: 14px; }
.afps-attention-item p,
.afps-dashboard-all-clear p,
.afps-dashboard-day__empty p,
.afps-health-list small,
.afps-quick-action small,
.afps-activity-list p,
.afps-dashboard-empty-copy { font-size: 13px; }
.afps-attention-item > a,
.afps-day-schedule time,
.afps-day-schedule li strong,
.afps-dashboard-day__more,
.afps-dashboard-delivery__stats { font-size: 12px; }
.afps-day-schedule time small,
.afps-day-schedule li p,
.afps-day-schedule__meta > span,
.afps-day-schedule__meta small,
.afps-activity-list time,
.afps-dashboard-delivery p { font-size: 12px; }
@media (max-width: 782px) {
.afps-wrap { font-size: 16px; }
.afps-page-head .afps-page-title h1,
.afps-module-page-head .afps-page-title h1 { font-size: 25px; }
#wpbody-content .afps-wrap .afps-dashboard-header h1 { font-size: clamp(27px, 8vw, 34px); }
#wpbody-content .afps-wrap .afps-dashboard-header__copy > p { font-size: 16px; }
}
/* =========================================================================
List screens, refined
-------------------------------------------------------------------------
Every index page in the portal should read the same way: understand the
scope, narrow it, then work the rows. Three earlier passes each appended
their own layer for these components, so this block is deliberately the
last word on anything it touches and states final values rather than
nudging the previous layer again.
========================================================================= */
/* ---- Workflow rail ------------------------------------------------------
The step numbers rendered as "0" on every screen that uses this. The
content was counter(list-item), but the implicit list-item counter is only
incremented by boxes with display:list-item, and these are inline-flex
for the pill layout. An explicit named counter is independent of the
display type, so it survives the layout choice. */
.afps-workflow-hint {
gap: 12px;
padding: 9px 13px;
border: 1px solid #dbe6fb;
border-left: 3px solid var(--afps-brand);
border-radius: 0 10px 10px 0;
background: linear-gradient(90deg, #f5f9ff, #fcfdff 65%);
}
.afps-workflow-hint > strong {
color: #1e3a8a;
font-size: 13px;
font-weight: 700;
letter-spacing: .01em;
}
.afps-workflow-hint ol {
counter-reset: afps-step;
gap: 4px 6px;
}
.afps-workflow-hint li {
counter-increment: afps-step;
gap: 6px;
color: #475569;
font-size: 12px;
font-weight: 600;
}
.afps-workflow-hint li::before {
content: counter(afps-step);
width: 17px;
height: 17px;
border: 1px solid #bfd3f7;
color: #1d4ed8;
background: #fff;
font-size: 10px;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
/* A chevron between steps reads as sequence without adding another element
to the markup, and disappears cleanly when the row wraps. */
.afps-workflow-hint li + li {
padding-left: 18px;
background: url("data:image/svg+xml;utf8,") no-repeat left center;
background-size: 11px 11px;
}
/* ---- KPI tiles inherit the same shape ----------------------------------
Students, Staff, Guardians, Documents, Announcements, Internships and
Communications all render .afps-stats above their table. Sized off the same
scale as the segmented tabs above them so the modules feel like one app
rather than seven screens built in sequence. Admissions deliberately has no
tile row: its tabs already carry those figures. */
.afps-stats {
grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
gap: 8px;
margin: 0 0 12px;
}
.afps-stats .afps-stat {
min-height: 0;
padding: 9px 12px 10px;
border-radius: 10px;
box-shadow: var(--afps-shadow-xs);
}
.afps-stats .afps-stat .label {
margin-bottom: 3px;
font-size: 11px;
font-weight: 700;
letter-spacing: .045em;
}
.afps-stats .afps-stat .value {
font-size: 22px;
font-variant-numeric: tabular-nums;
letter-spacing: -.025em;
line-height: 1.1;
}
/* ---- Application statuses had no badge colours -------------------------
.afps-badge shipped variants for students, fees and messaging, but none of
the five admission statuses, so every row and the detail header rendered
the neutral grey fallback and the list gave no colour signal at all. */
.afps-badge.new,
.afps-badge.submitted { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.afps-badge.draft { background: #f8fafc; color: #475569; border-color: #cbd5e1; }
.afps-badge.reviewing { background: #fffbeb; color: #b45309; border-color: #fde68a; }
.afps-badge.information_required { background: #faf5ff; color: #7e22ce; border-color: #e9d5ff; }
.afps-workspace-followup { display: grid; gap: 12px; border-color: #bfdbfe !important; background: #f8fbff !important; }
.afps-workspace-followup > div { padding: 12px; border: 1px solid #dbeafe; border-radius: 10px; background: #fff; }
.afps-workspace-followup p { margin: 5px 0 0; }
.afps-workspace-uploads { display: grid; gap: 10px; }
.afps-upload-review { display: grid; grid-template-columns: minmax(170px, .8fr) minmax(360px, 1.5fr); gap: 12px; align-items: center; padding: 11px 12px; border: 1px solid #dfe6f1; border-radius: 11px; background: #fff; }
.afps-upload-review > div { display: grid; gap: 3px; }
.afps-upload-review > div small { color: #64748b; }
.afps-upload-review form { display: grid; grid-template-columns: minmax(130px, .6fr) minmax(160px, 1fr) auto; gap: 7px; align-items: center; margin: 0; }
.afps-workspace-duplicates { border-color: #fed7aa !important; background: #fffaf5 !important; }
.afps-workspace-duplicates ul { display: grid; gap: 7px; margin: 10px 0 0; padding: 0; list-style: none; }
.afps-workspace-duplicates li { display: grid; grid-template-columns: 115px minmax(0, 1fr) minmax(150px, auto); gap: 9px; padding: 9px 10px; border: 1px solid #fed7aa; border-radius: 9px; background: #fff; }
.afps-workspace-duplicates small { color: #9a3412; }
.afps-activation-campaign { padding: 20px; }
.afps-activation-campaign td small { display: block; margin-top: 3px; color: #64748b; }
.afps-admissions-stalled { display: flex; align-items: center; gap: 8px; margin: -4px 0 12px; padding: 9px 12px; border: 1px solid #f6c66b; border-radius: 10px; background: #fff9e8; color: #8a4b08; font-size: 13px; }
.afps-activation-slip { max-width: 720px; margin: 0 auto 20px; padding: 26px; border: 2px solid #173b8f; border-radius: 15px; background: #fff; box-shadow: 0 12px 32px rgba(30,64,175,.12); }
.afps-activation-slip header { display: flex; justify-content: space-between; gap: 20px; padding-bottom: 12px; border-bottom: 1px solid #cbd5e1; color: #173b8f; }
.afps-activation-slip dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: 18px 0; overflow: hidden; border: 1px solid #dbe4f0; border-radius: 10px; background: #dbe4f0; }
.afps-activation-slip dl > div { padding: 14px; background: #f8fafc; }
.afps-activation-slip dt { color: #64748b; font-size: 11px; font-weight: 800; text-transform: uppercase; }
.afps-activation-slip dd { margin: 5px 0 0; font-family: ui-monospace, Menlo, monospace; font-size: 16px; font-weight: 800; word-break: break-word; }
@media (max-width: 900px) { .afps-upload-review, .afps-upload-review form, .afps-workspace-duplicates li, .afps-activation-slip dl { grid-template-columns: 1fr; } }
@media print { .afps-activation-desk > * { visibility: hidden !important; } #afps-activation-slip, #afps-activation-slip * { visibility: visible !important; } #afps-activation-slip { position: absolute; inset: 0 auto auto 0; width: 100%; max-width: none; box-shadow: none; } #afps-activation-slip button { display: none !important; } }
.afps-badge.accepted { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.afps-badge.rejected,
.afps-badge.withdrawn { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.afps-badge.converted { background: #eef2ff; color: #4338ca; border-color: #c7d2fe; }
/* ---- Row actions -------------------------------------------------------
The row partials separated their links with a literal " | ". Real targets
with hover affordances are easier to hit and stop the last column reading
like plain text. */
.afps-row-actions {
display: inline-flex;
align-items: center;
gap: 2px;
}
.afps-guardians-list .afps-row-actions { gap: 10px; }
/* The actions column is the widest free space in the table; anchoring the
controls to the right edge keeps them in one predictable place per row. */
.afps-table-wrap td.afps-actions-cell {
text-align: right;
white-space: nowrap;
}
.afps-table-wrap .afps-row-actions a {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 9px;
border-radius: 6px;
color: var(--afps-brand);
font-size: 12px;
font-weight: 600;
text-decoration: none;
transition: background var(--afps-t), color var(--afps-t);
}
.afps-table-wrap .afps-row-actions a:hover { background: var(--afps-brand-soft); }
.afps-table-wrap .afps-row-actions a.is-danger { color: var(--afps-text-mute); }
.afps-table-wrap .afps-row-actions a.is-danger:hover { color: #b91c1c; background: #fef2f2; }
/* Admissions eye-button quick view. The icon is deliberately compact so the
Review and Trash actions keep their existing positions. */
.afps-table-wrap .afps-row-actions a.afps-application-preview-trigger,
.afps-table-wrap .afps-row-actions a.afps-student-preview-trigger,
.afps-table-wrap .afps-row-actions a.afps-person-preview-trigger,
.afps-table-wrap .afps-row-actions a.afps-announcement-preview-trigger {
display: inline-flex;
width: 30px;
height: 30px;
padding: 0;
align-items: center;
justify-content: center;
flex: 0 0 auto;
border: 1px solid transparent;
border-radius: 8px;
color: var(--afps-brand);
background: transparent;
cursor: pointer;
transition: color var(--afps-t), background var(--afps-t), border-color var(--afps-t);
}
.afps-table-wrap .afps-row-actions a.afps-student-record-trigger,
.afps-table-wrap .afps-row-actions a.afps-guardian-record-trigger,
.afps-table-wrap .afps-row-actions a.afps-staff-record-trigger,
.afps-table-wrap .afps-row-actions a.afps-announcement-record-trigger {
width: auto;
gap: 6px;
padding: 0 9px;
font-weight: 600;
}
.afps-table-wrap .afps-row-actions a.afps-application-preview-trigger .dashicons,
.afps-table-wrap .afps-row-actions a.afps-student-preview-trigger .dashicons,
.afps-table-wrap .afps-row-actions a.afps-person-preview-trigger .dashicons,
.afps-table-wrap .afps-row-actions a.afps-announcement-preview-trigger .dashicons { width: 18px; height: 18px; font-size: 18px; }
.afps-table-wrap .afps-row-actions a.afps-application-preview-trigger:hover,
.afps-table-wrap .afps-row-actions a.afps-student-preview-trigger:hover,
.afps-table-wrap .afps-row-actions a.afps-person-preview-trigger:hover,
.afps-table-wrap .afps-row-actions a.afps-announcement-preview-trigger:hover { color: var(--afps-brand-dark); background: var(--afps-brand-soft); }
.afps-table-wrap .afps-row-actions a.afps-application-preview-trigger:focus-visible,
.afps-table-wrap .afps-row-actions a.afps-student-preview-trigger:focus-visible,
.afps-table-wrap .afps-row-actions a.afps-person-preview-trigger:focus-visible,
.afps-table-wrap .afps-row-actions a.afps-announcement-preview-trigger:focus-visible {
outline: none;
border-color: #93b4f4;
box-shadow: 0 0 0 3px rgba(0,68,170,.18);
}
.afps-preview-open { overflow: hidden; }
.afps-application-preview-modal .afps-modal--form { max-width: 780px; }
.afps-application-preview-modal .afps-modal-scroll { flex: 1 1 auto; padding: 0; }
.afps-application-preview-modal .afps-modal-head { padding: 15px 20px 13px; }
.afps-application-preview-modal .afps-modal-head h3 { margin-top: 2px; font-size: 18px; }
.afps-preview-eyebrow {
display: block;
color: var(--afps-brand);
font-size: 10px;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
}
.afps-preview-loading,
.afps-preview-error {
display: flex;
min-height: 220px;
padding: 24px;
align-items: center;
justify-content: center;
gap: 9px;
color: var(--afps-text-mute);
font-size: 13px;
}
.afps-preview-loading .afps-spinner {
width: 16px;
height: 16px;
border: 2px solid #cbd5e1;
border-top-color: var(--afps-brand);
border-radius: 50%;
animation: afps-spin 600ms linear infinite;
}
.afps-preview-error { color: #b91c1c; background: #fff7f7; }
.afps-application-preview-modal .afps-modal-actions { margin-top: 0; padding: 12px 20px 15px; }
.afps-application-preview-modal .afps-modal-actions .button { min-height: 36px; padding: 0 15px; }
.afps-application-preview { color: var(--afps-text); }
.afps-application-preview__hero {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 20px;
padding: 18px 20px 16px;
border-bottom: 1px solid var(--afps-border);
background: linear-gradient(110deg, #f8fbff, #f5f7fb);
}
.afps-application-preview__hero h4 { margin: 3px 0 2px; color: var(--afps-text); font-size: 20px; line-height: 1.2; }
.afps-application-preview__hero p { margin: 0; color: var(--afps-text-mute); font-size: 13px; }
.afps-application-preview__ref { color: var(--afps-brand); font-family: ui-monospace, Menlo, monospace; font-size: 11px; font-weight: 700; }
.afps-application-preview__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0;
padding: 4px 20px 12px;
}
.afps-application-preview__grid section { padding: 15px 14px 10px 0; }
.afps-application-preview__grid section:nth-child(even) { padding-right: 0; padding-left: 18px; border-left: 1px solid var(--afps-border); }
.afps-application-preview h5 {
margin: 0 0 8px;
color: #475569;
font-size: 10px;
font-weight: 800;
letter-spacing: .07em;
text-transform: uppercase;
}
.afps-application-preview dl { margin: 0; }
.afps-application-preview dl > div {
display: grid;
grid-template-columns: 112px minmax(0, 1fr);
gap: 10px;
padding: 5px 0;
}
.afps-application-preview dt { color: var(--afps-text-mute); font-size: 11px; font-weight: 600; }
.afps-application-preview dd { min-width: 0; margin: 0; overflow-wrap: anywhere; color: var(--afps-text); font-size: 12px; font-weight: 600; }
.afps-application-preview__note { margin: 0 20px 14px; padding: 12px 14px; border-radius: 9px; background: #f8fafc; }
.afps-application-preview__note.is-internal { background: #fffbea; }
.afps-application-preview__note p { margin: 0; color: #475569; font-size: 12px; line-height: 1.5; }
.afps-student-preview__identity { display: flex; align-items: center; gap: 12px; }
.afps-student-preview__avatar {
display: inline-flex;
width: 40px;
height: 40px;
align-items: center;
justify-content: center;
flex: 0 0 auto;
border-radius: 12px;
color: #fff;
background: linear-gradient(135deg, #2563eb, #7c3aed);
font-size: 13px;
font-weight: 800;
}
.afps-person-preview__identity { display: flex; align-items: center; gap: 12px; }
.afps-person-preview__avatar {
display: inline-flex;
width: 42px;
height: 42px;
align-items: center;
justify-content: center;
flex: 0 0 auto;
border-radius: 12px;
color: #fff;
background: linear-gradient(135deg, #1d4ed8, #7c3aed);
font-size: 13px;
font-weight: 800;
}
.afps-person-preview__links { margin: 0 20px 18px; padding: 14px; border-radius: 10px; background: #f8fafc; }
.afps-person-preview__links p { margin: 0; color: #475569; font-size: 12px; line-height: 1.55; }
.afps-person-preview__links ul { display: grid; gap: 7px; margin: 0; }
.afps-person-preview__links li { display: flex; min-height: 42px; margin: 0; padding: 8px 10px; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--afps-border); border-radius: 8px; background: #fff; }
.afps-person-preview__links li > span:first-child { display: grid; min-width: 0; }
.afps-person-preview__links li strong { overflow: hidden; color: var(--afps-text); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.afps-person-preview__links li small { color: var(--afps-text-mute); font-family: ui-monospace, Menlo, monospace; font-size: 10px; }
.afps-student-modal-spacer { flex: 1 1 auto; }
.afps-student-full-record { white-space: nowrap; }
.afps-inline-save-success { margin: 14px 20px 0; padding: 9px 12px; border: 1px solid #a7f3d0; border-radius: 8px; color: #047857; background: #ecfdf5; font-size: 12px; font-weight: 700; }
.afps-student-inline-edit { padding: 18px 20px 22px; color: var(--afps-text); }
.afps-student-inline-edit__intro { display: flex; margin-bottom: 14px; align-items: center; justify-content: space-between; gap: 16px; }
.afps-student-inline-edit__intro > div { display: grid; gap: 2px; }
.afps-student-inline-edit__intro strong { font-size: 15px; }
.afps-student-inline-edit__intro span { color: var(--afps-text-mute); font-size: 11px; }
.afps-student-inline-edit__intro .afps-student-inline-edit__id { padding: 5px 8px; border: 1px solid #dbe5f3; border-radius: 7px; color: var(--afps-brand); background: #f7faff; font-family: ui-monospace, Menlo, monospace; font-size: 11px; font-weight: 800; }
.afps-student-inline-edit > .afps-workspace-message { margin-bottom: 12px; }
.afps-student-inline-edit__sections { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: start; }
.afps-student-inline-edit__sections section { padding: 15px; border: 1px solid var(--afps-border); border-radius: 10px; background: #fff; box-shadow: 0 1px 2px rgba(15,23,42,.025); }
.afps-student-inline-edit__sections h5 { margin: 0 0 11px; color: #475569; font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.afps-student-inline-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 10px; }
.afps-student-inline-fields label { display: grid; min-width: 0; gap: 4px; color: #475569; font-size: 11px; font-weight: 700; }
.afps-student-inline-fields label.is-wide { grid-column: 1 / -1; }
.afps-student-inline-fields input:not([type="checkbox"]),
.afps-student-inline-fields select,
.afps-student-inline-fields textarea { box-sizing: border-box; width: 100%; min-width: 0; margin: 0; border-color: #cbd5e1; border-radius: 7px; color: var(--afps-text); background: #fff; font-size: 12px; }
.afps-student-inline-fields input:not([type="checkbox"]),
.afps-student-inline-fields select { min-height: 38px; }
.afps-student-inline-fields textarea { min-height: 64px; resize: vertical; }
.afps-student-inline-fields input:focus,
.afps-student-inline-fields select:focus,
.afps-student-inline-fields textarea:focus { border-color: var(--afps-brand); box-shadow: 0 0 0 3px rgba(28,63,158,.12); outline: none; }
.afps-student-inline-fields input:disabled { color: var(--afps-text-soft); background: #f1f5f9; }
.afps-student-inline-fields .afps-student-inline-check { display: flex; min-height: 38px; padding: 8px 10px; align-items: center; gap: 7px; border: 1px solid #dbe5f3; border-radius: 7px; background: #f8fafc; }
.afps-student-inline-check input { margin: 0; }
.afps-student-inline-check span { color: #475569; font-size: 11px; font-weight: 700; }
.afps-student-inline-edit__advanced { margin: 13px 2px 0; color: var(--afps-text-mute); font-size: 11px; line-height: 1.45; }
@media (max-width: 1100px) {
.afps-student-inline-edit__sections { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.afps-student-inline-edit__sections section:last-child { grid-column: 1 / -1; }
}
@media (max-width: 680px) {
.afps-application-preview__grid { grid-template-columns: 1fr; }
.afps-application-preview__grid section:nth-child(even) { padding-left: 0; border-left: 0; }
.afps-application-preview dl > div { grid-template-columns: 96px minmax(0, 1fr); }
.afps-student-inline-edit { padding: 14px 16px 18px; }
.afps-student-inline-edit__intro { align-items: flex-start; flex-direction: column; gap: 8px; }
.afps-student-inline-edit__sections { grid-template-columns: 1fr; }
.afps-student-inline-edit__sections section:last-child { grid-column: auto; }
.afps-student-inline-fields { grid-template-columns: 1fr; }
.afps-student-inline-fields label.is-wide { grid-column: auto; }
.afps-student-full-record { width: 100%; }
}
.afps-guardian-inline-edit .afps-student-inline-edit__sections {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.afps-guardian-inline-edit .afps-student-inline-edit__sections section:last-child {
grid-column: auto;
}
.afps-person-preview-modal [data-afps-person-save].is-busy {
cursor: wait;
opacity: .72;
}
@media (max-width: 680px) {
.afps-guardian-inline-edit .afps-student-inline-edit__sections {
grid-template-columns: 1fr;
}
}
/* ---- Section and scope tabs as one segmented control --------------------
The rail was a row of flat links with a hairline under the active one, so
at a glance it read as body copy rather than a control - and on a fresh
install, where every count is zero and the markup suppresses the pills, it
read as almost nothing at all. A recessed track with the active tab raised
on white makes the group one object and the current choice unmistakable.
`width: fit-content` rather than `display: inline-flex`: the track has to
hug its labels (two tabs on Staff, six on Admissions) without becoming an
inline box that drags a stray line box under it. */
.afps-wrap > .afps-tabs,
.afps-wrap > .afps-tabs--compact {
position: static;
z-index: auto;
display: flex;
gap: 2px;
width: fit-content;
max-width: 100%;
min-height: 0;
margin: 0 0 14px;
padding: 4px;
overflow-x: auto;
flex-wrap: nowrap;
border: 1px solid #e2e8f0;
border-radius: 11px;
background: #f1f4f9;
box-shadow: none;
scrollbar-width: thin;
}
.afps-wrap > .afps-tabs a,
.afps-wrap > .afps-tabs--compact a {
position: relative;
display: inline-flex;
min-height: 34px;
align-items: center;
padding: 0 14px;
border-radius: 8px;
color: #5b6880;
font-size: 14px;
font-weight: 600;
white-space: nowrap;
box-shadow: none;
transition: background var(--afps-t), color var(--afps-t), box-shadow var(--afps-t);
}
.afps-wrap > .afps-tabs a:hover,
.afps-wrap > .afps-tabs--compact a:hover {
color: var(--afps-text);
background: rgba(15,23,42,.05);
}
.afps-wrap > .afps-tabs a:focus-visible,
.afps-wrap > .afps-tabs--compact a:focus-visible {
outline: none;
box-shadow: var(--afps-ring);
}
.afps-wrap > .afps-tabs a.active,
.afps-wrap > .afps-tabs a.active:hover,
.afps-wrap > .afps-tabs a[aria-selected="true"],
.afps-wrap > .afps-tabs--compact a.active,
.afps-wrap > .afps-tabs--compact a.active:hover,
.afps-wrap > .afps-tabs--compact a[aria-selected="true"] {
color: var(--afps-brand);
background: var(--afps-surface);
box-shadow: 0 1px 2px rgba(15,23,42,.09);
}
/* The trash-page rules that style these pills use !important throughout, so
matching them is the only way to restate the values here. */
.afps-wrap > .afps-tabs a span,
.afps-wrap > .afps-tabs--compact a span {
min-width: 19px;
height: 19px !important;
margin-left: 6px !important;
padding: 0 6px !important;
border-radius: 10px !important;
background: #e3e9f2 !important;
color: #5b6880 !important;
font-size: 11px !important;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.afps-wrap > .afps-tabs a.active span,
.afps-wrap > .afps-tabs--compact a.active span {
background: #e8efff !important;
color: var(--afps-brand) !important;
}
/* ---- Active tab: solid brand blue --------------------------------------
The selected tab used to fill with `--afps-text` (near-black), which read
as a disabled or "dark mode" chip rather than the current choice. It is
now a solid #0044aa pill with white text.
Both selector shapes are restated because the rail is styled at two
depths: the base `.afps-tabs` layer, and the `.afps-wrap > .afps-tabs`
segmented-control layer above it. The child combinator stops matching once
afps-list.js wraps the rail in `.afps-list-panel` at runtime (Admissions,
Students), so whichever layer wins, the active pill is the same blue. */
.afps-tabs a.active,
.afps-tabs a.active:hover,
.afps-tabs a[aria-selected="true"],
.afps-tabs--compact a.active,
.afps-tabs--compact a.active:hover,
.afps-tabs--compact a[aria-selected="true"],
.afps-wrap > .afps-tabs a.active,
.afps-wrap > .afps-tabs a.active:hover,
.afps-wrap > .afps-tabs a[aria-selected="true"],
.afps-wrap > .afps-tabs--compact a.active,
.afps-wrap > .afps-tabs--compact a.active:hover,
.afps-wrap > .afps-tabs--compact a[aria-selected="true"] {
background: #0044aa;
color: #fff;
font-weight: 600;
box-shadow: 0 1px 2px rgba(0,68,170,.30);
}
/* The count pill has to invert with it, or a grey chip on blue goes muddy.
`!important` matches the trash-page rules these values have to beat. */
.afps-tabs a.active span,
.afps-tabs a[aria-selected="true"] span,
.afps-tabs--compact a.active span,
.afps-tabs--compact a[aria-selected="true"] span,
.afps-wrap > .afps-tabs a.active span,
.afps-wrap > .afps-tabs a[aria-selected="true"] span,
.afps-wrap > .afps-tabs--compact a.active span,
.afps-wrap > .afps-tabs--compact a[aria-selected="true"] span {
background: rgba(255,255,255,.24) !important;
color: #fff !important;
}
.afps-tabs a:focus-visible,
.afps-tabs--compact a:focus-visible,
.afps-wrap > .afps-tabs a:focus-visible,
.afps-wrap > .afps-tabs--compact a:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(0,68,170,.28);
}
@media (max-width: 782px) {
/* Below the WP breakpoint the track should span the screen and scroll
inside itself, rather than hugging content and clipping the last tab. */
.afps-wrap > .afps-tabs,
.afps-wrap > .afps-tabs--compact { width: 100%; }
.afps-wrap > .afps-tabs a,
.afps-wrap > .afps-tabs--compact a { padding: 0 12px; font-size: 13.5px; }
}
/* ---- Toolbar: scope, then search, then how much you are looking at ------ */
.afps-toolbar { align-items: center; }
.afps-toolbar form { flex: 1 1 260px; }
.afps-toolbar__count {
margin-left: auto;
padding-right: 4px;
color: var(--afps-text-mute);
font-size: 12px;
font-weight: 600;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.afps-toolbar__count strong { color: var(--afps-text); font-weight: 700; }
/* ---- Table ------------------------------------------------------------- */
.afps-table-wrap thead th { color: #5b6880; }
/* References, dates and amounts sit in columns; lining figures keep them
aligned down the page without a monospace face. */
.afps-table-wrap td { font-variant-numeric: tabular-nums; }
.afps-table-wrap tbody tr:hover { background: #f6f9ff; }
.afps-table-wrap tbody tr:focus-within { background: #eff5ff; }
.afps-title-count { display: inline-grid; min-width: 28px; height: 28px; margin-left: 6px; padding: 0 8px; place-items: center; border-radius: 999px; color: #1d4ed8; background: #e8f0ff; font-size: 14px; vertical-align: middle; }
.afps-admissions-drafts .afps-table-wrap table { table-layout: fixed; }
.afps-admissions-drafts .afps-table-wrap th:nth-child(1) { width: 14%; }
.afps-admissions-drafts .afps-table-wrap th:nth-child(2) { width: 17%; }
.afps-admissions-drafts .afps-table-wrap th:nth-child(3) { width: 26%; }
.afps-admissions-drafts .afps-table-wrap th:nth-child(4) { width: 17%; }
.afps-admissions-drafts .afps-table-wrap th:nth-child(5) { width: 14%; }
.afps-admissions-drafts .afps-table-wrap th:nth-child(6) { width: 12%; }
.afps-admissions-drafts .afps-table-wrap td { overflow-wrap: anywhere; }
.afps-admissions-drafts .afps-table-wrap td:last-child { text-align: right; }
.afps-admissions-drafts .afps-table-wrap td:last-child form { display: flex; justify-content: flex-end; }
.afps-admissions-drafts .afps-table-wrap .button-link-delete { white-space: nowrap; }
/* ---- Empty state -------------------------------------------------------
The old 56px block left a table that was mostly void on a fresh install.
Tightened, and the icon now reads as an object rather than a grey blob. */
/* A column header row above nothing is just noise, and on a fresh install it
was the first thing a new user met. Opt in per table with .is-empty. */
.afps-table-wrap.is-empty thead { display: none; }
.afps-empty { padding: 44px 24px 42px !important; }
.afps-empty .afps-empty-icon {
width: 52px;
height: 52px;
margin-bottom: 13px;
border: 1px solid var(--afps-border);
background: linear-gradient(180deg, #ffffff, #f2f6fd);
color: var(--afps-text-soft);
box-shadow: var(--afps-shadow-xs);
}
.afps-empty strong { font-size: 15.5px; }
.afps-empty .afps-empty-desc {
max-width: 46ch;
margin-bottom: 16px;
line-height: 1.55;
}
@media (max-width: 782px) {
.afps-stats { grid-template-columns: repeat(auto-fit, minmax(116px, 1fr)); }
.afps-stats .afps-stat .value { font-size: 20px; }
.afps-workflow-hint { flex-wrap: wrap; }
.afps-toolbar__count { margin-left: 0; }
}
/* ---- Admissions list: data-first layout ---------------------------------
Header, scope, search and table form one compact working surface. Status
counts live in the rail, so the table starts immediately below the controls. */
.afps-admissions-list > .wp-header-end { display: none; }
.afps-admissions-list {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(430px, 39%);
gap: 8px;
padding-top: 12px !important;
min-height: 0;
margin-bottom: 0;
}
.afps-admissions-list .afps-page-head {
grid-column: 1 / -1;
align-items: center;
margin-bottom: 2px;
}
.afps-admissions-list .afps-page-title {
display: flex;
min-width: 0;
align-items: baseline;
gap: 14px;
}
.afps-admissions-list .afps-page-title h1 {
flex: 0 0 auto;
font-size: 26px;
}
.afps-admissions-list .afps-subtitle {
max-width: none;
margin: 0;
font-size: 14px;
line-height: 1.35;
}
/* The module bar already provides a persistent area switcher. Ctrl+K remains
available, but its duplicate button does not take room from admissions. */
.afps-admissions-list .afps-command-trigger { display: none; }
.afps-admissions-list > .afps-tabs,
.afps-admissions-list .afps-list-panel > .afps-tabs {
width: 100%;
margin: 0;
overflow-x: visible;
flex-wrap: wrap;
}
.afps-admissions-list > .afps-tabs a,
.afps-admissions-list .afps-list-panel > .afps-tabs a {
min-height: 36px;
padding: 0 9px;
font-size: 12px;
}
.afps-admissions-list > .afps-list-panel {
grid-column: 1 / -1;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(430px, 39%);
gap: 8px;
align-items: center;
}
.afps-admissions-list .afps-toolbar {
display: grid;
grid-template-columns: auto minmax(210px, 1fr);
align-items: center;
gap: 8px;
min-height: 0;
margin: 0;
padding: 4px;
border-radius: 11px;
}
.afps-admissions-list .afps-toolbar form { min-width: 0; }
.afps-admissions-list .afps-toolbar form input[type="search"] {
width: 100%;
height: 36px;
min-width: 0;
max-width: none;
border-color: transparent;
background: #f8fafc;
}
.afps-admissions-list .afps-toolbar form input[type="search"]:focus {
border-color: var(--afps-brand);
background: #fff;
}
.afps-admissions-list .afps-table-wrap,
.afps-admissions-list .afps-admissions-trash {
grid-column: 1 / -1;
margin-top: 0;
}
/* Give the review and trash controls a deliberate final column while keeping
reference, applicant, programme and contact values readable at desktop size. */
.afps-admissions-list .afps-admissions-table { width: 100%; min-width: 0; max-width: 100%; table-layout: fixed; }
.afps-admissions-list .afps-admissions-table th,
.afps-admissions-list .afps-admissions-table td { padding-right: 10px; padding-left: 10px; }
.afps-admissions-list .afps-admissions-table th:nth-child(1) { width: 9%; }
.afps-admissions-list .afps-admissions-table th:nth-child(2) { width: 12%; }
.afps-admissions-list .afps-admissions-table th:nth-child(3) { width: 18%; }
.afps-admissions-list .afps-admissions-table th:nth-child(4) { width: 14%; }
.afps-admissions-list .afps-admissions-table th:nth-child(5) { width: 7%; }
.afps-admissions-list .afps-admissions-table th:nth-child(6) { width: 10%; }
.afps-admissions-list .afps-admissions-table th:nth-child(7) { width: 13%; }
.afps-admissions-list .afps-admissions-table th:nth-child(8) { width: 17%; }
.afps-admissions-list .afps-admissions-table td:nth-child(-n+7) { overflow: hidden; text-overflow: ellipsis; }
.afps-admissions-list .afps-admissions-table td.afps-actions-cell { padding-right: 6px; padding-left: 6px; }
@media (max-width: 1250px) {
.afps-admissions-list,
.afps-admissions-list > .afps-list-panel { grid-template-columns: 1fr; }
.afps-admissions-list > .afps-tabs,
.afps-admissions-list .afps-list-panel > .afps-tabs,
.afps-admissions-list .afps-toolbar { grid-column: 1; }
}
@media (max-width: 782px) {
.afps-admissions-list .afps-page-head { align-items: flex-start; }
.afps-admissions-list .afps-page-title { align-items: flex-start; flex-direction: column; gap: 3px; }
.afps-admissions-list .afps-page-actions { width: 100%; }
.afps-admissions-list .afps-page-actions .button { flex: 1 1 auto; justify-content: center; }
.afps-admissions-list .afps-toolbar { grid-template-columns: 1fr; }
}
/* ---- Students roster: data-first layout ---------------------------------
Mirror Admissions: the counts sit in the tabs, scope and search share the
same control band, and the roster starts immediately below it. */
.afps-students-list > .wp-header-end { display: none; }
.afps-students-list { padding-top: 12px !important; }
.afps-students-list .afps-page-head { align-items: center; margin-bottom: 2px; }
.afps-students-list .afps-page-title { display: flex; min-width: 0; align-items: baseline; gap: 14px; }
.afps-students-list .afps-page-title h1 { flex: 0 0 auto; font-size: 26px; }
.afps-students-list .afps-subtitle { max-width: none; margin: 0; font-size: 14px; line-height: 1.35; }
.afps-students-list .afps-command-trigger { display: none; }
.afps-students-roster {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(430px, 39%);
gap: 8px;
}
.afps-students-roster > .afps-page-head { grid-column: 1 / -1; }
.afps-students-roster > .afps-tabs,
.afps-students-roster .afps-list-panel > .afps-tabs { width: 100%; margin: 0; }
.afps-students-roster > .afps-tabs a,
.afps-students-roster .afps-list-panel > .afps-tabs a { min-height: 36px; padding: 0 11px; font-size: 12px; }
.afps-students-roster > .afps-list-panel {
grid-column: 1 / -1;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(430px, 39%);
gap: 8px;
align-items: center;
}
.afps-students-roster .afps-toolbar {
display: grid;
grid-template-columns: auto minmax(210px, 1fr);
align-items: center;
gap: 8px;
min-height: 0;
margin: 0;
padding: 4px;
border-radius: 11px;
}
.afps-students-roster .afps-toolbar form { min-width: 0; }
.afps-students-roster .afps-toolbar form input[type="search"] {
width: 100%;
height: 36px;
min-width: 0;
max-width: none;
border-color: transparent;
background: #f8fafc;
}
.afps-students-roster .afps-toolbar form input[type="search"]:focus { border-color: var(--afps-brand); background: #fff; }
.afps-students-roster > #afps-bulk-form,
.afps-students-roster .afps-list-panel > #afps-bulk-form,
.afps-students-roster .afps-students-trash,
.afps-students-roster > .afps-notice,
.afps-students-roster .afps-list-panel > .afps-notice { grid-column: 1 / -1; margin-top: 0; }
.afps-students-roster #afps-bulk-form > .afps-table-wrap { margin-top: 0; }
.afps-students-roster .afps-pagination {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
margin: 12px 0 0;
padding: 12px 14px;
border: 1px solid var(--afps-border);
border-radius: var(--afps-radius);
background: var(--afps-surface);
box-shadow: var(--afps-shadow-xs);
}
.afps-students-roster .afps-pagination__summary {
margin: 0;
color: var(--afps-text-mute);
font-size: 12px;
line-height: 1.4;
}
.afps-students-roster .afps-pagination__summary strong { color: var(--afps-text); font-weight: 700; }
.afps-students-roster .afps-pagination__links {
display: inline-flex;
align-items: center;
gap: 4px;
flex-wrap: wrap;
justify-content: flex-end;
}
.afps-students-roster .afps-pagination .page-numbers {
display: inline-flex;
min-width: 32px;
height: 32px;
align-items: center;
justify-content: center;
padding: 0 8px;
border: 1px solid transparent;
border-radius: 7px;
color: var(--afps-brand);
background: transparent;
box-shadow: none;
font-size: 12px;
font-weight: 700;
line-height: 1;
text-decoration: none;
transition: background var(--afps-t), border-color var(--afps-t), color var(--afps-t), transform var(--afps-t);
}
.afps-students-roster .afps-pagination a.page-numbers:hover {
border-color: #cdd8ed;
color: var(--afps-brand-dark);
background: var(--afps-brand-soft);
}
.afps-students-roster .afps-pagination a.page-numbers:focus-visible {
outline: none;
box-shadow: var(--afps-ring);
}
.afps-students-roster .afps-pagination .page-numbers.current {
border-color: var(--afps-brand);
color: #fff;
background: var(--afps-brand);
box-shadow: 0 3px 8px rgba(28,63,158,.2);
}
.afps-students-roster .afps-pagination .page-numbers.prev,
.afps-students-roster .afps-pagination .page-numbers.next {
min-width: auto;
padding-right: 10px;
padding-left: 10px;
border-color: var(--afps-border-strong);
color: var(--afps-text);
background: #fff;
}
.afps-students-roster .afps-pagination .page-numbers.prev:hover,
.afps-students-roster .afps-pagination .page-numbers.next:hover { color: var(--afps-brand); background: var(--afps-brand-soft); }
.afps-students-roster .afps-pagination .page-numbers.dots { min-width: 18px; padding: 0; color: var(--afps-text-soft); }
/* Student roster filters mirror the finance register controls so staff can
narrow the roster by the same academic and fee context before opening a
record. */
.afps-wrap.afps-students-roster form.afps-student-roster-filters {
display: grid !important;
grid-column: 1 / -1;
grid-template-columns: repeat(4, minmax(145px, .82fr)) minmax(235px, 1.35fr) auto;
gap: 10px;
align-items: end;
margin: 0;
padding: 16px;
border: 1px solid #e1e7f0;
border-radius: 10px;
background: #fff;
box-shadow: none;
}
.afps-wrap.afps-students-roster .afps-student-roster-filters__actions { align-self: end; }
.afps-wrap.afps-students-roster .afps-student-roster-filters > div { min-width: 0; }
.afps-wrap.afps-students-roster .afps-student-roster-filters label {
display: block;
margin: 0 0 6px;
color: #718198;
font-size: 12px;
font-weight: 700;
letter-spacing: 0;
}
.afps-wrap.afps-students-roster .afps-student-roster-filters select {
width: 100%;
min-height: 42px;
padding: 0 13px;
border-color: #d4ddea;
border-radius: 7px;
background-color: #fff;
color: #4a4f58;
font-size: 16px;
box-shadow: none;
}
.afps-wrap.afps-students-roster .afps-student-roster-filters select:hover {
border-color: #b8c7da;
}
.afps-wrap.afps-students-roster .afps-student-roster-filters select:focus {
border-color: #2448a5;
box-shadow: 0 0 0 2px rgba(36,72,165,.12);
}
.afps-wrap.afps-students-roster .afps-student-roster-filters__actions {
display: flex;
gap: 7px;
}
.afps-wrap.afps-students-roster .afps-student-roster-filters__actions .button {
min-height: 42px;
padding: 0 16px;
border-radius: 7px;
font-size: 14px;
font-weight: 700;
white-space: nowrap;
}
.afps-wrap.afps-students-roster .afps-student-roster-filters__actions .button-primary {
border-color: #2448a5;
background: #2448a5;
box-shadow: none;
}
.afps-wrap.afps-students-roster .afps-student-roster-filters__actions .button:not(.button-primary) {
border-color: #d4ddea;
background: #fff;
color: #334155;
}
@media (max-width: 1180px) {
.afps-wrap.afps-students-roster form.afps-student-roster-filters {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 782px) {
.afps-wrap.afps-students-roster form.afps-student-roster-filters {
grid-template-columns: repeat(2, minmax(0, 1fr));
padding: 13px;
}
}
@media (max-width: 480px) {
.afps-wrap.afps-students-roster form.afps-student-roster-filters { grid-template-columns: 1fr; }
.afps-wrap.afps-students-roster .afps-student-roster-filters__actions .button { flex: 1 1 auto; }
}
.afps-admissions-list > .afps-module-bar,
.afps-students-roster > .afps-module-bar { grid-column: 1 / -1; }
@media (max-width: 1250px) {
.afps-students-roster,
.afps-students-roster > .afps-list-panel { grid-template-columns: 1fr; }
.afps-students-roster > .afps-tabs,
.afps-students-roster .afps-list-panel > .afps-tabs,
.afps-students-roster .afps-toolbar { grid-column: 1; }
}
@media (max-width: 782px) {
.afps-students-list .afps-page-head { align-items: flex-start; }
.afps-students-list .afps-page-title { align-items: flex-start; flex-direction: column; gap: 3px; }
.afps-students-list .afps-page-actions { width: 100%; }
.afps-students-list .afps-page-actions .button { flex: 1 1 auto; justify-content: center; }
.afps-students-roster .afps-toolbar { grid-template-columns: 1fr; }
.afps-students-roster .afps-pagination { align-items: flex-start; flex-direction: column; }
.afps-students-roster .afps-pagination__links { justify-content: flex-start; }
}
/* ---- People directories: compact, data-first Guardians and Staff --------
Summary counts live beside the title, controls share one band and the
directory table starts immediately below the decisions that affect it. */
.afps-directory-list > .wp-header-end { display: none; }
.afps-directory-list { padding-top: 12px !important; }
.afps-directory-list .afps-page-head { align-items: center; margin-bottom: 2px; }
.afps-directory-list .afps-page-title { display: flex; min-width: 0; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.afps-directory-list .afps-page-title h1 { flex: 0 0 auto; font-size: 26px; }
.afps-directory-list .afps-subtitle { max-width: none; margin: 0; font-size: 14px; line-height: 1.35; }
.afps-directory-list .afps-command-trigger { display: none; }
.afps-directory-summary { display: inline-flex; align-items: center; gap: 5px; color: var(--afps-text-mute); font-size: 11px; white-space: nowrap; }
.afps-directory-summary span { display: inline-flex; align-items: baseline; gap: 3px; padding: 3px 7px; border: 1px solid #dce5f1; border-radius: 999px; background: rgba(255,255,255,.72); }
.afps-directory-summary strong { color: var(--afps-text); font-size: 12px; }
.afps-directory-person { display: flex; min-width: 0; align-items: center; gap: 9px; }
.afps-directory-person > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.afps-directory-avatar { display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; flex: 0 0 auto; border-radius: 9px; color: #fff; background: linear-gradient(135deg, #2563eb, #7c3aed); font-size: 10px; font-weight: 800; }
.afps-directory-empty { color: var(--afps-text-soft); }
.afps-directory-list .afps-toolbar {
display: grid;
grid-template-columns: auto minmax(210px, 1fr);
align-items: center;
gap: 8px;
min-height: 0;
margin: 0;
padding: 4px;
border-radius: 11px;
}
.afps-directory-list .afps-toolbar form { min-width: 0; }
.afps-directory-list .afps-toolbar form input[type="search"] { width: 100%; height: 36px; min-width: 0; max-width: none; border-color: transparent; background: #f8fafc; }
.afps-directory-list .afps-toolbar form input[type="search"]:focus { border-color: var(--afps-brand); background: #fff; }
.afps-directory-list .afps-table-wrap { margin-top: 0; }
/* Keep the staff directory dense enough to scan comfortably without changing
the reading scale used by forms and detail screens. */
.afps-staff-list .afps-table-wrap tbody td { font-size: 14px; }
.afps-staff-list .afps-table-wrap thead th { font-size: 10px; }
.afps-staff-list .afps-table-wrap .afps-badge { font-size: 11px; }
.afps-staff-list .afps-table-wrap .afps-row-actions a { font-size: 13px; }
.afps-guardians-list .afps-table-wrap tbody td { font-size: 14px; }
.afps-guardians-list .afps-table-wrap thead th { font-size: 10px; }
.afps-guardians-list .afps-table-wrap .afps-badge { font-size: 11px; }
.afps-guardians-list .afps-table-wrap .afps-row-actions a { font-size: 13px; }
.afps-guardians-list .afps-toolbar { width: min(100%, 760px); }
.afps-guardians-list > .afps-table-wrap,
.afps-guardians-list > .afps-directory-trash { margin-top: 8px; }
.afps-directory-roster {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(430px, 39%);
gap: 8px;
}
.afps-directory-roster > .afps-module-bar,
.afps-directory-roster > .afps-page-head,
.afps-directory-roster > .afps-notice,
.afps-directory-roster > #afps-bulk-form,
.afps-directory-roster > .afps-directory-trash { grid-column: 1 / -1; }
.afps-directory-roster > .afps-tabs { width: 100%; margin: 0; }
.afps-directory-roster > .afps-tabs a { min-height: 36px; padding: 0 12px; font-size: 12px; }
.afps-directory-roster #afps-bulk-form > .afps-table-wrap { margin-top: 0; }
@media (max-width: 1250px) {
.afps-directory-roster { grid-template-columns: 1fr; }
.afps-directory-roster > .afps-tabs,
.afps-directory-roster > .afps-toolbar { grid-column: 1; }
}
@media (max-width: 782px) {
.afps-directory-list .afps-page-head { align-items: flex-start; }
.afps-directory-list .afps-page-title { align-items: flex-start; flex-direction: column; gap: 3px; }
.afps-directory-list .afps-page-actions { width: 100%; }
.afps-directory-list .afps-page-actions .button { flex: 1 1 auto; justify-content: center; }
.afps-directory-summary { flex-wrap: wrap; white-space: normal; }
.afps-directory-list .afps-toolbar { width: 100%; grid-template-columns: 1fr; }
}
/* Scope and search form one operational control cluster on the four People &
Intake lists. A restrained cool tint distinguishes controls from both the
section tabs above and the data surface below without looking like a status. */
.afps-admissions-list .afps-toolbar,
.afps-students-list .afps-toolbar,
.afps-guardians-list .afps-toolbar,
.afps-staff-list .afps-toolbar {
border-color: #d6e2f4;
background: linear-gradient(180deg, #f7faff 0%, #f1f6ff 100%);
box-shadow: 0 1px 2px rgba(30, 64, 175, .05);
}
.afps-admissions-list .afps-toolbar .afps-view-toggle,
.afps-students-list .afps-toolbar .afps-view-toggle,
.afps-guardians-list .afps-toolbar .afps-view-toggle,
.afps-staff-list .afps-toolbar .afps-view-toggle {
border-color: #d6e2f4;
background: rgba(255, 255, 255, .62);
}
.afps-admissions-list .afps-toolbar form input[type="search"],
.afps-students-list .afps-toolbar form input[type="search"],
.afps-guardians-list .afps-toolbar form input[type="search"],
.afps-staff-list .afps-toolbar form input[type="search"] {
border-color: rgba(214, 226, 244, .55);
background: #fff;
}
/* ---- No-reload list panel ------------------------------------------------
afps-list.js wraps the tab rail and everything under it in .afps-list-panel
and swaps its contents when you switch a status tab, page or search. The
panel is created at runtime, so no view carries this class: style it as a
plain block and keep the state visual to the loading moment only.
Reserving the height of the progress line above the rail would push the
layout down on every list, so it is drawn inside the panel's own top edge. */
.afps-list-panel { position: relative; }
.afps-list-panel.is-loading {
opacity: .55;
pointer-events: none;
transition: opacity 120ms ease;
}
.afps-list-panel.is-loading::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 2px;
border-radius: 2px;
background: linear-gradient(90deg, transparent, var(--afps-brand), transparent);
animation: afps-list-progress 900ms ease-in-out infinite;
z-index: 2;
}
@keyframes afps-list-progress {
0% { transform: scaleX(.25) translateX(-140%); }
100% { transform: scaleX(.25) translateX(140%); }
}
@media (prefers-reduced-motion: reduce) {
.afps-list-panel.is-loading { transition: none; }
.afps-list-panel.is-loading::before { animation: none; opacity: .6; }
}
/* Pending/History keeps its rail as a direct child so the compact segmented
control styling does not shift when AJAX enhancement is active. */
[data-afps-document-requests-page] > .afps-tabs.is-loading,
[data-afps-document-requests-page] > .afps-table-wrap.is-loading {
opacity: .55;
pointer-events: none;
transition: opacity 120ms ease;
}
[data-afps-document-requests-page] > .afps-table-wrap.is-loading {
position: relative;
}
[data-afps-document-requests-page] > .afps-table-wrap.is-loading::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 2px;
border-radius: 2px;
background: linear-gradient(90deg, transparent, var(--afps-brand), transparent);
animation: afps-list-progress 900ms ease-in-out infinite;
z-index: 2;
}
@media (prefers-reduced-motion: reduce) {
[data-afps-document-requests-page] > .afps-tabs.is-loading,
[data-afps-document-requests-page] > .afps-table-wrap.is-loading { transition: none; }
[data-afps-document-requests-page] > .afps-table-wrap.is-loading::before { animation: none; opacity: .6; }
}
/* ==========================================================================
Read-only screens and the locked-down app shell (added 1.8.21)
--------------------------------------------------------------------------
`body.afps-read-only` is set by Admin\Menu::read_only_body_class() when the
current user may open a screen but holds none of its write capabilities -
the Auditor everywhere, an Instructor on Students.
THIS IS PRESENTATION, NOT SECURITY. Every mutating handler in all seventeen
modules checks a capability and a nonce before touching the database, and
that is what makes read-only safe. What this block does is stop offering an
action that would only be refused - which before 1.8.21 meant an Instructor
saw "+ Add student", "Edit" and "Trash" on the Students screen and got
"Not allowed." on click. Nothing here may ever be the only thing standing
between a user and a write.
THREE RULES ABOUT WHAT NOT TO HIDE. Each of these was a bug in the first
draft of this block, found by reading the actual markup:
1. `.button` is navigation as often as it is submission. `timetable.php`
puts `` in
`.afps-page-actions`, right beside `+ Add slot` - and every detail view
puts "Back to list" in that same container and nothing else. So hiding
`.afps-page-actions` wholesale strands a read-only user on a detail page
and removes Print from the one screen designed to be printed. Only
`.button-primary` and confirm-carrying controls go.
2. A link to `admin-post.php` is not necessarily a write. `Download` in
`partials/document-row.php` and `View / Print` in `grading.php` both post
there and are exactly what an auditor is here to do. Destructive controls
are identified by their confirmation prompt, never by their endpoint.
3. `action=edit` appears outside the actions column. In
`partials/students-row.php` the matricule itself links to the edit
screen, and it is the only way to open a student record. Scope every
href rule to the last cell.
GET forms are search and filter, not mutation: `.afps-ajax-search` and
`form[method="get"]` must keep working. An Auditor whose whole job is
looking things up needs the search box more than anyone does.
========================================================================== */
/* Mutating forms: everything that posts to admin-post.php. Dimmed rather than
removed, so the FIELDS stay readable - an auditor reading a fee structure
still needs to see its values. admin.js adds the `inert` attribute, which is
what actually blocks pointer and keyboard input; this is the visual half. */
body.afps-read-only form[action*="admin-post.php"] {
opacity: .62;
filter: grayscale(18%);
}
body.afps-read-only form[action*="admin-post.php"] input,
body.afps-read-only form[action*="admin-post.php"] select,
body.afps-read-only form[action*="admin-post.php"] textarea {
background: #f6f7f9;
cursor: not-allowed;
}
/* Primary calls to action, wherever they sit. `.button-primary` is the save or
create button on every form and the "+ Add" link on every list; no screen
uses it for navigation. Plain `.button` siblings - Cancel, Back to list,
Print - are deliberately left alone. */
body.afps-read-only .afps-page-actions .button-primary,
body.afps-read-only .afps-actions .button-primary,
body.afps-read-only .afps-actions button[type="submit"],
body.afps-read-only .afps-form-actions .button-primary,
body.afps-read-only .afps-form-actions button[type="submit"],
body.afps-read-only .afps-form-footer-actions .button-primary,
body.afps-read-only .afps-form-footer-actions button[type="submit"],
body.afps-read-only .afps-empty-cta {
display: none !important;
}
/* Anything carrying a confirmation prompt is destructive by definition:
Trash, Delete, Remove, Retire, Revoke, Verify & Lock, Finalize, Queue bulk.
This is the single most reliable hook in the markup. */
body.afps-read-only .afps-confirm,
body.afps-read-only [data-confirm],
body.afps-read-only .afps-set-current,
body.afps-read-only .afps-ajax-form {
display: none !important;
}
/* Bulk-selection machinery is useless without an action to apply. */
body.afps-read-only .afps-bulk-row,
body.afps-read-only #afps-bulk-all,
body.afps-read-only #afps-bulk-submit,
body.afps-read-only #afps-bulk-count,
body.afps-read-only #afps-bulk-form {
display: none !important;
}
/* The AJAX quick-add drawers submit through admin-ajax.php and so match none
of the form rules above. */
body.afps-read-only #afps-quick-add-form,
body.afps-read-only #afps-quick-add-staff-form,
body.afps-read-only [data-afps-quick-add] {
display: none !important;
}
/* Row-level Edit and New links carry no class of their own, so they are matched
on their href - but ONLY in the actions column, because the matricule column
links to the same URL and is the only way in to a record. admin.js removes
these properly, including the " | " separators they leave behind; this is the
safety net for when scripts are unavailable. */
body.afps-read-only .afps-table-wrap td:last-child a[href*="action=edit"],
body.afps-read-only .afps-table-wrap td:last-child a[href*="action=new"] {
display: none;
}
/* The banner Menu::read_only_banner() prints. Deliberately quiet: it explains
a limit, it is not a warning that something has gone wrong. */
body.afps-read-only .afps-read-only-banner {
border-left-width: 3px;
}
/* A neutral badge tone. The existing variants all carry a status meaning
(new / reviewing / accepted / rejected / paid / overdue and so on); People &
Access needs a chip that means nothing at all - the "you" marker on your own
row. */
body.wp-admin .afps-badge.neutral {
background: #eef1f6;
border-color: #d6dbe4;
color: #475467;
}
/* ---------- Three-phase document governance ---------- */
.afps-doc-phase-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
margin: 22px 0 0;
}
.afps-doc-phase {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 12px;
min-width: 0;
padding: 14px;
border: 1px solid var(--afps-border);
border-radius: 12px;
background: #fff;
color: var(--afps-text);
text-decoration: none;
box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.afps-doc-phase:hover,
.afps-doc-phase:focus {
color: var(--afps-primary);
border-color: #a8bddd;
box-shadow: 0 4px 12px rgba(15, 23, 42, .07);
}
.afps-doc-phase-number {
display: inline-grid;
place-items: center;
width: 30px;
height: 30px;
border-radius: 50%;
background: var(--afps-primary);
color: #fff;
font-weight: 700;
}
.afps-doc-phase strong,
.afps-doc-phase small {
display: block;
}
.afps-doc-phase small {
margin-top: 3px;
color: var(--afps-text-mute);
}
body.wp-admin .afps-badge.valid {
background: #ecfdf5;
border-color: #a7f3d0;
color: #047857;
}
.afps-form .afps-check {
display: inline-flex;
align-items: flex-start;
gap: 8px;
margin-top: 28px;
font-weight: 600;
}
.afps-form .afps-check input {
width: 16px;
min-width: 16px;
height: 16px;
margin: 2px 0 0;
}
@media (max-width: 1100px) {
.afps-doc-phase-grid { grid-template-columns: 1fr; }
}
/* ---------- App shell ----------
`body.afps-app-shell` is set for portal staff who are not WordPress
operators. Admin\AppShell has already removed the foreign menus; this only
tidies what WordPress itself leaves behind. */
body.afps-app-shell #wpfooter {
color: #7b8794;
}
body.afps-app-shell #wp-admin-bar-wp-logo,
body.afps-app-shell #wp-admin-bar-comments,
body.afps-app-shell #wp-admin-bar-new-content,
body.afps-app-shell #wp-admin-bar-updates {
display: none;
}
/* The plugin is the only menu left, so its "collapse menu" toggle is the one
remaining piece of WordPress furniture in the sidebar. */
body.afps-app-shell #collapse-menu {
display: none;
}
/* The Admissions desk is a focused portal workspace. Keep the useful portal
navigation visible while removing the unrelated WordPress menus that were
extending the document below the viewport and causing a page scrollbar. */
body.afritech-portal-system_page_afps-admissions #adminmenu > li:not(#menu-dashboard):not(#toplevel_page_afps-dashboard),
body.afritech-portal-system_page_afps-admissions #collapse-menu {
display: none;
}
body.afritech-portal-system_page_afps-admissions #toplevel_page_afps-dashboard .wp-submenu {
margin-bottom: 0;
padding-top: 4px;
padding-bottom: 5px;
}
body.afritech-portal-system_page_afps-admissions #toplevel_page_afps-dashboard .wp-submenu a {
margin-top: 0;
margin-bottom: 0;
padding-top: 5px;
padding-bottom: 5px;
}
body.afritech-portal-system_page_afps-admissions #toplevel_page_afps-dashboard .wp-submenu li.afps-menu-group-start {
margin-top: 4px;
margin-bottom: 1px;
padding-top: 14px;
}
/* On shorter screens, keep any remaining navigation overflow inside the left
rail instead of extending the entire admin document. The rail still scrolls
with a mouse wheel or keyboard, but its scrollbar stays out of the layout. */
body.afritech-portal-system_page_afps-admissions #adminmenumain,
body.afritech-portal-system_page_afps-admissions #adminmenuback,
body.afritech-portal-system_page_afps-admissions #adminmenuwrap {
height: calc(100vh - 32px);
min-height: 0;
}
body.afritech-portal-system_page_afps-admissions #adminmenumain {
position: fixed;
top: 32px;
bottom: 0;
left: 0;
}
body.afritech-portal-system_page_afps-admissions #adminmenuwrap {
overflow-y: auto;
scrollbar-width: none;
-ms-overflow-style: none;
}
body.afritech-portal-system_page_afps-admissions #adminmenuwrap::-webkit-scrollbar { display: none; }
/* ---------- Print ---------- */
@media print {
body.wp-admin #adminmenumain,
body.wp-admin #adminmenuback,
body.wp-admin #wpadminbar,
body.wp-admin #wpfooter,
body.wp-admin .update-nag,
body.wp-admin .notice,
body.wp-admin #screen-meta,
body.wp-admin #screen-meta-links,
.afps-no-print,
.afps-tabs,
.afps-utilbar,
.afps-page-actions,
.afps-tt-slot-actions { display: none !important; }
body.wp-admin #wpcontent,
body.wp-admin #wpbody,
body.wp-admin #wpbody-content { margin: 0 !important; padding: 0 !important; }
.afps-wrap { box-shadow: none !important; padding: 0 !important; margin: 0 !important; background: #fff !important; min-height: 0 !important; }
.afps-wrap h1 { font-size: 18px; margin: 0 0 2px; }
.afps-wrap .afps-subtitle { font-size: 11px; color: #444; }
.afps-tt-grid {
border: 1px solid #333 !important;
box-shadow: none !important;
page-break-inside: avoid;
grid-auto-rows: 20px;
}
.afps-tt-dayhead { background: #f1f5f9 !important; border-color: #333 !important; color: #000 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.afps-tt-hour { color: #000 !important; background: #fff !important; }
.afps-tt-cell { border-right-color: #ccc !important; }
.afps-tt-cell--hour { border-top-color: #999 !important; }
.afps-tt-slot {
background: #fff !important;
border: 1px solid #333 !important;
color: #000 !important;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
.afps-tt-slot-code, .afps-tt-slot-title, .afps-tt-slot-meta { color: #000 !important; }
/* Keep KPI badges, stat tiles and report bars visible on paper.
print-color-adjust is inherited, so the containers cover the
inline-styled bar divs rendered inside them. */
.afps-badge,
.afps-stat,
.afps-stats,
.afps-form-card,
.afps-table-wrap {
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
}
.afps-dashboard-email-changes > h3 {
margin: 24px 0 10px;
font-size: 15px;
}
.afps-dashboard-email-changes > h3:first-of-type {
margin-top: 8px;
}
.afps-email-review-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
.afps-email-review-actions form {
margin: 0;
}
/* ========================================================================
Finance centre
A focused workspace for day-to-day collection, finance oversight, and fee
setup. Scope every rule to Fees so the financial hierarchy never leaks into
enrolment or academic screens. */
.afps-fees-workspace {
--afps-fee-navy: #112a4d;
--afps-fee-blue: #1e5aae;
--afps-fee-sky: #eaf3ff;
--afps-fee-green: #087c5c;
--afps-fee-red: #b42318;
--afps-fee-ink: #172b4d;
}
.afps-fees-workspace .afps-fees-page-head {
position: relative;
align-items: center;
min-height: 0;
margin-bottom: 10px;
padding: 14px 20px 15px;
overflow: hidden;
border: 1px solid #dce8f8;
border-radius: 16px;
background: linear-gradient(112deg, #f8fbff 0%, #edf5ff 58%, #fafdff 100%);
}
.afps-fees-workspace .afps-fees-page-head::after { display: none; }
.afps-fees-workspace .afps-fees-page-head > * { position: relative; z-index: 1; }
.afps-fees-page-kicker {
display: block;
margin: 0 0 3px;
color: var(--afps-fee-blue);
font-size: 11px;
font-weight: 800;
letter-spacing: .1em;
text-transform: uppercase;
}
.afps-fees-workspace .afps-fees-page-head h1 { display: block; margin: 0; color: var(--afps-fee-navy); font-size: 25px; line-height: 1.15; }
.afps-fees-workspace .afps-fees-page-head .afps-subtitle { margin: 4px 0 0; font-size: 13px; line-height: 1.35; }
.afps-fees-workspace .afps-fees-page-head .button { min-height: 38px; padding: 0 17px; box-shadow: 0 5px 12px rgba(30,90,174,.18); }
.afps-fees-workspace .afps-fees-navigation {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 12px;
padding: 5px;
border: 1px solid #174a91;
border-radius: 12px;
background: linear-gradient(100deg, #174a91, #2368bd);
}
.afps-fees-workspace .afps-fees-tabs {
gap: 6px;
width: auto;
flex: 0 1 auto;
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
}
.afps-fees-workspace .afps-fees-tabs a {
flex: 0 0 auto;
justify-content: center;
padding: 10px 13px;
border: 1px solid transparent;
border-radius: 8px;
color: rgba(255,255,255,.9);
font-size: 13px;
font-weight: 700;
}
.afps-fees-workspace .afps-fees-tabs a:hover { color: #fff; background: rgba(255,255,255,.14); }
.afps-fees-workspace .afps-fees-tabs a.active { border-color: #cdddf3; background: #fff; color: var(--afps-fee-navy); box-shadow: 0 2px 5px rgba(24,52,92,.08); }
.afps-fees-workspace .afps-fees-tabs.is-loading { opacity: .7; }
.afps-fees-workspace .afps-fees-tabs.is-loading a { cursor: progress; }
.afps-fees-workspace .afps-fees-navigation.is-loading { opacity: .7; }
.afps-fees-workspace .afps-fees-navigation-actions { margin-left: auto; }
.afps-fees-workspace .afps-fees-navigation-actions .button { border-color: rgba(255,255,255,.62); color: #fff; background: transparent; }
.afps-fees-workspace .afps-fees-navigation-actions .button:hover { border-color: #fff; background: rgba(255,255,255,.14); }
.afps-fees-workspace .afps-fees-navigation-actions .afps-view-toggle { margin: 0; }
.afps-fee-tab-content { transition: opacity .16s ease; }
.afps-fee-tab-content.is-loading { opacity: .5; pointer-events: none; }
.afps-fees-workspace .afps-fee-structure-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
margin: 12px 0 16px;
}
.afps-fees-workspace .afps-fee-structure-toolbar--trash { justify-content: flex-end; }
.afps-fees-workspace .afps-fee-structure-tools {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
margin-left: auto;
}
.afps-fees-workspace .afps-fee-structure-tools .afps-view-toggle { margin: 0; }
.afps-fees-workspace .afps-fee-structure-form-heading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin: 12px 0;
}
.afps-fees-workspace .afps-fee-structure-form-title { margin: 0; color: var(--afps-fee-navy); font-size: 17px; }
.afps-fees-workspace .afps-fee-structure-form {
margin-bottom: 16px;
padding: 18px;
border: 1px solid #dce5ef;
border-radius: 12px;
background: #fff;
}
.afps-fee-structure-modal .afps-modal--form { width: min(980px, calc(100vw - 40px)); max-width: none; max-height: calc(100vh - 40px); }
.afps-fee-structure-modal .afps-modal-head { padding: 16px 22px 14px; }
.afps-fee-structure-modal .afps-modal-scroll { flex: 1 1 auto; padding: 18px 22px; background: #f6f8fc; }
.afps-fee-structure-modal .afps-fee-structure-form { margin: 0; border-radius: 12px; box-shadow: 0 1px 2px rgba(15,23,42,.03); }
.afps-fee-structure-modal .afps-ms { border-radius: 12px; border-color: #c9d6e7; box-shadow: 0 1px 2px rgba(15,23,42,.04); }
.afps-fee-structure-modal .afps-ms-toolbar { padding: 10px 12px; background: #f8fafc; }
.afps-fee-structure-modal .afps-ms-grid { height: 300px; max-height: 300px; padding: 8px; }
.afps-fee-structure-modal .afps-ms-row {
display: flex;
gap: 8px;
margin: 2px 0;
padding: 8px 10px;
border-radius: 8px;
}
.afps-fee-structure-modal-spacer { flex: 1 1 auto; }
.afps-fee-structure-modal .afps-modal-actions { margin: 0; padding: 12px 22px 14px; background: #fff; }
.afps-fee-structure-modal [data-afps-fee-structure-save].is-busy { opacity: .7; cursor: wait; }
/* Flatpickr appends its popup to , outside the modal backdrop. Keep every
open calendar above form modals, not only fee-structure dialogs. */
.afps-modal-backdrop ~ .flatpickr-calendar.open { z-index: 1000000; }
.afps-fees-workspace .afps-fee-collection {
position: relative;
padding: 25px 27px 23px;
border-color: #cfe0f7;
border-radius: 15px;
background: #fff;
box-shadow: 0 10px 24px rgba(23,43,77,.06);
}
.afps-fees-workspace .afps-fee-collection__step { width: 30px; height: 30px; background: linear-gradient(135deg, #2066bd, #16458a); box-shadow: 0 4px 9px rgba(28,83,164,.25); }
.afps-fees-workspace .afps-fee-collection h2, .afps-fees-workspace .afps-fee-practice h2 { color: var(--afps-fee-navy); font-size: 19px; }
.afps-fees-workspace .afps-ledger-picker--simple { max-width: 100%; grid-template-columns: minmax(300px, 1.3fr) minmax(190px, .6fr) auto; gap: 7px 14px; }
.afps-fees-workspace .afps-ledger-picker--simple label { color: #4d6079; font-size: 12px; }
.afps-fees-workspace .afps-ledger-picker--simple select { min-height: 43px; border-color: #bdcce0; border-radius: 8px; font-size: 14px; }
.afps-fees-workspace .afps-ledger-picker--simple .button { min-height: 43px; padding: 0 20px; border-radius: 8px; }
.afps-fees-workspace .afps-fee-practice {
padding: 18px 21px;
border: 1px solid #d8e5f5;
border-radius: 12px;
background: linear-gradient(105deg, #f7fbff, #f2f7fc);
box-shadow: none;
}
.afps-fees-workspace .afps-fee-practice--empty { border-style: dashed; }
.afps-fees-workspace .afps-fee-practice__choices .button { min-width: 150px; border-color: #d6e0ee; background: #fff; color: var(--afps-fee-ink); box-shadow: 0 1px 2px rgba(20,45,80,.04); }
.afps-fees-workspace .afps-fee-practice__choices .button:hover { border-color: #9dbce4; background: #f9fbff; color: var(--afps-fee-blue); }
.afps-fees-workspace .afps-fee-ledger-header {
margin: 27px 0 14px;
padding: 0 3px;
}
.afps-fees-workspace .afps-fee-ledger-header h2 { color: var(--afps-fee-navy); font-size: 22px; }
.afps-fees-workspace .afps-fee-ledger-header p { color: #697b94; }
.afps-fees-workspace .afps-fee-balance-cards { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.afps-fees-workspace .afps-fee-balance-card { min-height: 128px; padding: 17px 18px; border: 1px solid #dce5ef; border-radius: 12px; background: #fff; box-shadow: 0 2px 5px rgba(23,43,77,.035); }
.afps-fees-workspace .afps-fee-balance-card h3 { margin-bottom: 8px; color: #60728a; font-size: 11px; font-weight: 800; letter-spacing: .075em; text-transform: uppercase; }
.afps-fees-workspace .afps-fee-balance-card .value { color: var(--afps-fee-navy); font-size: clamp(21px, 2vw, 27px); font-variant-numeric: tabular-nums; }
.afps-fees-workspace .afps-fee-balance-card p { margin: 8px 0 0; color: #7a8b9f; font-size: 11px; line-height: 1.35; }
.afps-fees-workspace .afps-fee-balance-card.is-paid { border-color: #c7e6d8; background: linear-gradient(135deg, #f7fffb, #fff); }
.afps-fees-workspace .afps-fee-balance-card.is-paid .value { color: var(--afps-fee-green); }
.afps-fees-workspace .afps-fee-balance-card.is-scholarship { border-color: #ddd2f5; background: linear-gradient(135deg, #fbf9ff, #fff); }
.afps-fees-workspace .afps-fee-balance-card.is-scholarship .value { color: #6d3fc0; }
.afps-fees-workspace .afps-fee-balance-card.is-balance { border-color: #f0d5d2; background: linear-gradient(135deg, #fffafa, #fff); }
.afps-fees-workspace .afps-fee-balance-card.is-balance .value { color: var(--afps-fee-red); }
.afps-fees-workspace .afps-fee-balance-card.is-status { background: #f7faff; }
.afps-fees-workspace .afps-fee-balance-card.is-status .value { margin-top: 6px; font-size: 18px; }
.afps-fees-workspace .afps-fee-payment-card { max-width: none; margin-top: 18px; padding: 22px 24px; border-color: #cfe0f7; border-radius: 14px; background: #fff; box-shadow: 0 6px 18px rgba(23,43,77,.045); }
.afps-fees-workspace .afps-fee-payment-card__heading h3 { color: var(--afps-fee-navy); font-size: 17px; }
.afps-fees-workspace .afps-payment-form {
grid-template-columns: minmax(160px,1.15fr) minmax(100px,.6fr) minmax(100px,.6fr) minmax(125px,.75fr) minmax(150px,.85fr) minmax(145px,max-content) max-content;
gap: 10px;
}
.afps-fees-workspace .afps-payment-form__advanced { grid-row: auto; }
.afps-fees-workspace .afps-payment-form__checkbox { align-self: end; white-space: nowrap; }
.afps-fees-workspace .afps-payment-form label { color: #4d6079; }
.afps-fees-workspace .afps-payment-form input, .afps-fees-workspace .afps-payment-form select { min-height: 39px; border-color: #bfccdb; border-radius: 7px; }
.afps-fees-workspace .afps-payment-form .button { min-height: 39px; padding: 0 18px; border-radius: 7px; box-shadow: 0 4px 9px rgba(30,90,174,.16); white-space: nowrap; }
.afps-fees-workspace .afps-scholarship-form { display:grid!important;grid-template-columns:minmax(150px,.6fr) minmax(120px,.45fr) minmax(240px,1fr) auto;gap:12px;align-items:end; }
.afps-fees-workspace .afps-scholarship-form__reason { min-width:0; }
.afps-fees-workspace .afps-scholarship-form input,.afps-fees-workspace .afps-scholarship-form select { width:100%;min-height:39px; }
.afps-fees-workspace .afps-scholarship-form .button { min-height:39px; }
.afps-student-scholarship { position:relative;min-width:130px; }
.afps-student-scholarship summary { display:inline-flex;list-style:none;cursor:pointer; }
.afps-student-scholarship summary::-webkit-details-marker { display:none; }
.afps-student-scholarship__form { display:grid;grid-template-columns:130px 110px minmax(180px,1fr) auto;gap:8px;align-items:end;width:520px;margin-top:9px;padding:12px;border:1px solid var(--afps-border);border-radius:9px;background:#fff;box-shadow:0 8px 24px rgba(23,43,77,.12); }
.afps-student-scholarship__form label { display:grid;gap:4px;font-size:11px;font-weight:700;color:var(--afps-text-mute); }
.afps-student-scholarship__form input,.afps-student-scholarship__form select { width:100%;min-height:34px; }
.afps-fees-workspace .afps-fee-advanced { border-color: #dfe7f1; border-radius: 10px; background: #fbfcfe; }
.afps-fees-workspace .afps-fee-advanced summary { color: #4d6079; }
.afps-fees-workspace .afps-fee-history-title { margin: 25px 0 11px; color: var(--afps-fee-navy); font-size: 17px; }
.afps-fees-workspace .afps-table-wrap { border: 1px solid #dce5ef; border-radius: 12px; box-shadow: 0 2px 5px rgba(23,43,77,.03); }
.afps-fees-workspace .afps-table-wrap table thead th { padding-top: 12px; padding-bottom: 12px; background: #f7f9fc; color: #5d6e85; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; }
.afps-fees-workspace .afps-table-wrap table tbody td { padding-top: 13px; padding-bottom: 13px; }
.afps-fees-workspace .afps-table-wrap table tbody tr:hover { background: #fbfdff; }
.afps-fees-workspace .afps-payment-history-table tbody td { font-size: 13px; line-height: 1.35; }
.afps-fees-workspace .afps-payment-history-table tbody td small { font-size: 10.5px; }
.afps-fees-workspace .afps-payment-history-table__action-heading,
.afps-fees-workspace .afps-payment-history-table__action-cell { width: 1%; text-align: center; white-space: nowrap; }
.afps-fees-workspace .afps-payment-history-table__action-cell form { margin: 0; }
.afps-fees-workspace .afps-payment-history-table__action-cell .button { min-height: 30px; font-size: 11.5px; white-space: nowrap; }
.afps-fees-workspace .afps-payment-history-actions__receipt { min-height: 30px; padding-inline: 12px; }
.afps-fees-workspace .afps-fee-report-hero { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 0 0 16px; padding: 22px 24px; border-radius: 14px; background: linear-gradient(115deg, #172f55, #245ca7); color: #fff; box-shadow: 0 10px 22px rgba(26,67,121,.18); }
.afps-fee-report-hero span { display: block; margin-bottom: 3px; color: #cfe2ff; font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.afps-fee-report-hero strong { display: block; font-size: 29px; font-variant-numeric: tabular-nums; line-height: 1.12; }
.afps-fee-report-hero p { margin: 5px 0 0; color: #dceaff; font-size: 13px; }
.afps-fee-report-hero__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.afps-fee-report-hero__actions .button { border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.12); color: #fff; }
.afps-fee-report-hero__actions .button:hover { background: #fff; color: var(--afps-fee-navy); }
.afps-fees-workspace .afps-fee-table-meta { display: block; margin-top: 3px; color: #77899f; font-family: ui-monospace, Menlo, monospace; font-size: 11px; }
.afps-fees-workspace .afps-fee-table-balance { color: var(--afps-fee-red); font-weight: 800; font-variant-numeric: tabular-nums; }
.afps-fees-workspace .afps-fee-outstanding-table .button { white-space: nowrap; }
.afps-fees-workspace .afps-fee-report-filter { display: flex; align-items: end; gap: 9px; margin: 0 0 16px; padding: 13px 15px; border: 1px solid #dce5ef; border-radius: 11px; background: #fff; box-shadow: 0 1px 3px rgba(23,43,77,.03); }
.afps-fees-workspace .afps-fee-report-filter label { margin: 0; color: #5c6e84; font-size: 12px; font-weight: 700; }
.afps-fees-workspace .afps-fee-report-filter select { min-width: 190px; border-radius: 7px; }
.afps-fees-workspace .afps-fee-report-stats { grid-template-columns: repeat(6, minmax(0,1fr)); gap: 11px; }
.afps-fees-workspace .afps-fee-report-stats .afps-stat { min-height: 112px; padding: 16px; border: 1px solid #dce5ef; border-radius: 11px; background: #fff; box-shadow: 0 2px 5px rgba(23,43,77,.03); }
.afps-fees-workspace .afps-fee-report-stats .value { color: var(--afps-fee-navy); font-size: 22px; font-variant-numeric: tabular-nums; }
.afps-fees-workspace .afps-fee-report-stats .is-positive .value { color: var(--afps-fee-green); }
.afps-fees-workspace .afps-fee-report-stats .is-scholarship .value { color: #6d3fc0; }
.afps-fees-workspace .afps-fee-report-stats .is-attention .value { color: var(--afps-fee-red); }
.afps-fee-stat-note { display: block; margin-top: 6px; color: #7a8b9f; font-size: 11px; }
.afps-fees-workspace .afps-fee-report-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, .85fr); gap: 16px; margin-top: 16px; }
.afps-fees-workspace .afps-fee-methods { padding: 19px; border: 1px solid #dce5ef; border-radius: 12px; background: #fff; box-shadow: 0 2px 5px rgba(23,43,77,.03); }
.afps-fees-workspace .afps-fee-methods h3 { margin: 0 0 14px; color: #52657f; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.afps-fees-workspace .afps-fee-report-table { min-width: 0; }
.afps-fees-workspace .afps-fee-report-table td[style*="color:#047857"] { color: var(--afps-fee-green) !important; }
.afps-fees-workspace .afps-fee-report-table td[style*="color:#b91c1c"] { color: var(--afps-fee-red) !important; }
/* ---------- Student payment register ---------- */
.afps-payment-register { display: grid; gap: 16px; }
.afps-payment-register__heading { padding: 20px 22px; border: 1px solid #d8e3f0; border-radius: 14px; background: linear-gradient(120deg, #fff 0%, #f4f8ff 100%); box-shadow: 0 3px 10px rgba(23,43,77,.04); }
.afps-payment-register__heading h2 { margin: 1px 0 0; color: var(--afps-fee-navy); font-size: 21px; }
.afps-payment-register__heading p { max-width: 720px; margin: 5px 0 0; color: #667991; font-size: 13px; line-height: 1.45; }
.afps-payment-register__filters { display: grid; grid-template-columns: repeat(4,minmax(105px,.8fr)) minmax(180px,1.3fr) max-content; gap: 10px; align-items: end; padding: 15px; border: 1px solid #dce5ef; border-radius: 12px; background: #fff; box-shadow: 0 2px 6px rgba(23,43,77,.035); }
.afps-payment-register__filters > div { min-width: 0; }
.afps-payment-register__filters label { display: block; margin: 0 0 5px; color: #52657d; font-size: 11px; font-weight: 800; letter-spacing: .02em; }
.afps-payment-register__filters input, .afps-payment-register__filters select { width: 100%; min-height: 39px; border-color: #becddd; border-radius: 7px; }
.afps-payment-register__filter-actions { display: flex; gap: 7px; }
.afps-payment-register__filter-actions .button { min-height: 39px; padding: 0 14px; white-space: nowrap; }
.afps-fee-student-filter__native { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
.afps-fee-student-combobox { position: relative; }
.afps-fee-student-combobox__toggle { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 39px; padding: 0 10px 0 12px; border: 1px solid #becddd; border-radius: 7px; background: #fff; color: #172033; cursor: pointer; font: inherit; text-align: left; }
.afps-fee-student-combobox__toggle:hover { border-color: #8ca7c6; }
.afps-fee-student-combobox__toggle:focus, .afps-fee-student-combobox.is-open .afps-fee-student-combobox__toggle { outline: none; border-color: #2459b8; box-shadow: 0 0 0 3px rgba(36,89,184,.13); }
.afps-fee-student-combobox__value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.afps-fee-student-combobox__toggle .dashicons { flex: 0 0 auto; width: 16px; height: 16px; color: #6d7f95; font-size: 16px; transition: transform .15s ease; }
.afps-fee-student-combobox.is-open .afps-fee-student-combobox__toggle .dashicons { transform: rotate(180deg); }
.afps-fee-student-combobox__panel { position: absolute; z-index: 1000; top: calc(100% + 6px); right: 0; width: min(360px, calc(100vw - 40px)); padding: 8px; border: 1px solid #c9d7e7; border-radius: 10px; background: #fff; box-shadow: 0 14px 34px rgba(23,43,77,.18); }
.afps-fee-student-combobox__search { box-sizing: border-box; width: 100%; min-height: 38px !important; margin: 0 0 7px !important; padding: 0 11px 0 34px !important; border: 1px solid #b9c9da !important; border-radius: 7px !important; background: #fff url("data:image/svg+xml;utf8,") no-repeat 11px center !important; }
.afps-fee-student-combobox__search:focus { outline: none; border-color: #2459b8 !important; box-shadow: 0 0 0 3px rgba(36,89,184,.13) !important; }
.afps-fee-student-combobox__list { display: grid; gap: 2px; max-height: 280px; overflow-y: auto; overscroll-behavior: contain; }
.afps-fee-student-combobox__option { display: block; width: 100%; padding: 8px 10px; border: 0; border-radius: 6px; background: transparent; color: #26364a; cursor: pointer; font: inherit; line-height: 1.35; text-align: left; }
.afps-fee-student-combobox__option:hover, .afps-fee-student-combobox__option:focus { outline: none; background: #eef4ff; color: #173f8f; }
.afps-fee-student-combobox__option.is-selected { background: #e6efff; color: #163f91; font-weight: 700; }
.afps-fee-student-combobox__empty { margin: 5px 3px 2px; padding: 12px 8px; color: #6d7f95; text-align: center; }
.afps-payment-register__summary { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 11px; }
.afps-payment-register__summary > div { padding: 15px 17px; border: 1px solid #dce5ef; border-radius: 11px; background: #fff; box-shadow: 0 2px 5px rgba(23,43,77,.025); }
.afps-payment-register__summary span { display: block; margin-bottom: 6px; color: #667991; font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.afps-payment-register__summary strong { display: block; color: var(--afps-fee-navy); font-size: 21px; font-variant-numeric: tabular-nums; line-height: 1.1; }
.afps-payment-register__summary strong small { color: #8493a6; font-size: 10px; font-weight: 800; }
.afps-payment-register__summary .is-paid { border-color: #c9e7db; background: #f8fffb; }
.afps-payment-register__summary .is-paid strong { color: var(--afps-fee-green); }
.afps-payment-register__summary .is-balance { border-color: #efd9d6; background: #fffafa; }
.afps-payment-register__summary .is-balance strong { color: var(--afps-fee-red); }
.afps-payment-register__results-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-top: 3px; }
.afps-payment-register__results-head h3 { margin: 0; color: var(--afps-fee-navy); font-size: 16px; }
.afps-payment-register__results-head p { margin: 3px 0 0; color: #77899f; font-size: 12px; }
.afps-payment-register__legend { display: inline-flex; align-items: center; gap: 6px; color: #77899f; font-size: 11px; }
.afps-payment-register__legend i { width: 7px; height: 7px; border-radius: 50%; background: var(--afps-fee-green); box-shadow: 0 0 0 3px #dff4eb; }
.afps-payment-register__table-wrap { overflow-x: auto; }
.afps-payment-register__table { min-width: 1120px; }
.afps-payment-register__table th:nth-child(1) { width: 215px; }
.afps-payment-register__table th:nth-child(2) { width: 180px; }
.afps-payment-register__table th:nth-child(3) { min-width: 430px; }
.afps-payment-register__table th:nth-child(4) { width: 160px; }
.afps-payment-register__table td { vertical-align: middle; }
.afps-payment-student { display: flex; align-items: center; gap: 10px; }
.afps-payment-student__avatar { display: inline-grid; flex: 0 0 36px; width: 36px; height: 36px; place-items: center; border-radius: 10px; background: #e7f0fd; color: #1b559d; font-size: 11px; font-weight: 900; letter-spacing: .03em; }
.afps-payment-student strong, .afps-payment-program { display: block; color: #203754; font-size: 12.5px; line-height: 1.3; }
.afps-payment-student small, .afps-payment-level { display: block; margin-top: 3px; color: #7b8ca1; font-size: 10.5px; line-height: 1.3; }
.afps-payment-level { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; }
.afps-installment-progress { display: grid; grid-template-columns: repeat(auto-fit,minmax(125px,1fr)); gap: 7px; }
.afps-installment-payment { min-width: 0; padding: 9px 10px; border: 1px solid #dfe6ef; border-radius: 9px; background: #fbfcfe; }
.afps-installment-payment.is-complete { border-color: #bfe0d2; background: #f4fdf8; }
.afps-installment-payment.is-partial { border-color: #cbdcf2; background: #f6f9fe; }
.afps-installment-payment.is-unpaid { border-color: #e4e8ee; background: #fafbfc; }
.afps-installment-payment__top { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; }
.afps-installment-payment__top > span { overflow: hidden; color: #65778e; font-size: 9.5px; font-weight: 800; letter-spacing: .035em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.afps-installment-payment__top .dashicons { width: 14px; height: 14px; color: var(--afps-fee-green); font-size: 14px; }
.afps-installment-payment > strong { display: block; margin-top: 4px; color: #203754; font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.afps-installment-payment > strong small { color: #8997a8; font-size: 9.5px; font-weight: 700; }
.afps-installment-payment__dates { display: grid; gap: 2px; margin-top: 5px; }
.afps-installment-payment__dates small { display: flex; align-items: center; justify-content: space-between; gap: 5px; color: #8190a2; font-size: 8.5px; line-height: 1.25; }
.afps-installment-payment__dates small span { color: #3e6f5d; font-weight: 800; font-variant-numeric: tabular-nums; }
.afps-installment-payment__due { display: block; margin-top: 5px; color: #909dad; font-size: 8.5px; line-height: 1.25; }
.afps-payment-totals { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.afps-payment-totals strong { color: var(--afps-fee-green); font-size: 14px; font-variant-numeric: tabular-nums; }
.afps-payment-totals strong small { color: #7d8da1; font-size: 9px; font-weight: 700; text-transform: uppercase; }
.afps-payment-totals > span { color: var(--afps-fee-red); font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.afps-payment-totals .afps-badge { margin-top: 2px; font-size: 8.5px; font-style: normal; }
@media (max-width: 1300px) {
.afps-fees-workspace .afps-payment-form { grid-template-columns: repeat(4, minmax(0,1fr)); }
.afps-fees-workspace .afps-payment-form__checkbox { white-space: normal; }
.afps-fees-workspace .afps-payment-form .button { grid-column: auto; justify-self: stretch; }
}
@media (max-width: 1080px) {
.afps-fees-workspace .afps-fee-balance-cards { grid-template-columns: repeat(3, minmax(0,1fr)); }
.afps-fees-workspace .afps-fee-report-stats { grid-template-columns: repeat(3, minmax(0,1fr)); }
.afps-fees-workspace .afps-payment-form { grid-template-columns: repeat(3, minmax(0,1fr)); }
.afps-fees-workspace .afps-scholarship-form { grid-template-columns: repeat(2,minmax(0,1fr)); }
.afps-fees-workspace .afps-payment-form__checkbox { white-space: normal; }
.afps-fees-workspace .afps-payment-form .button { grid-column: auto; justify-self: stretch; }
}
@media (max-width: 780px) {
.afps-payment-register__heading { align-items: flex-start; flex-direction: column; padding: 18px; }
.afps-payment-register__filters { grid-template-columns: repeat(2,minmax(0,1fr)); }
.afps-payment-register__summary { grid-template-columns: repeat(2,minmax(0,1fr)); }
.afps-fees-workspace .afps-fees-page-head { align-items: flex-start; flex-direction: column; padding: 12px 14px; }
.afps-fees-workspace .afps-fees-navigation { align-items: flex-start; flex-direction: column; }
.afps-fees-workspace .afps-fees-tabs { max-width: 100%; overflow-x: auto; }
.afps-fees-workspace .afps-fees-tabs a { flex: 0 0 auto; }
.afps-fees-workspace .afps-fees-navigation-actions { margin-left: 0; }
.afps-fees-workspace .afps-fee-structure-toolbar { align-items: flex-start; flex-direction: column; }
.afps-fees-workspace .afps-fee-structure-tools { width: 100%; margin-left: 0; }
.afps-fees-workspace .afps-ledger-picker--simple { grid-template-columns: minmax(200px,1fr) auto; }
.afps-fees-workspace .afps-ledger-picker--simple label:nth-of-type(2), .afps-fees-workspace .afps-ledger-picker--simple select:nth-of-type(2) { grid-column: 1; }
.afps-fees-workspace .afps-ledger-picker--simple .button { grid-column: 2; grid-row: 1 / 5; }
.afps-fees-workspace .afps-fee-report-grid { grid-template-columns: 1fr; }
.afps-fees-workspace .afps-fee-report-stats { grid-template-columns: repeat(2, minmax(0,1fr)); }
.afps-fees-workspace .afps-payment-form { grid-template-columns: repeat(2, minmax(0,1fr)); }
.afps-fees-workspace .afps-scholarship-form { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
.afps-payment-register__filters, .afps-payment-register__summary { grid-template-columns: 1fr; }
.afps-payment-register__filter-actions { flex-wrap: wrap; }
.afps-payment-register__results-head { align-items: flex-start; flex-direction: column; }
.afps-fees-workspace .afps-fee-collection, .afps-fees-workspace .afps-fee-payment-card { padding: 18px; }
.afps-fees-workspace .afps-fee-practice, .afps-fees-workspace .afps-fee-report-hero { align-items: flex-start; flex-direction: column; }
.afps-fees-workspace .afps-fee-balance-cards, .afps-fees-workspace .afps-fee-report-stats { grid-template-columns: 1fr; }
.afps-fees-workspace .afps-fee-report-filter { align-items: stretch; flex-direction: column; }
.afps-fees-workspace .afps-fee-report-filter select { min-width: 0; width: 100%; }
.afps-fees-workspace .afps-payment-form { grid-template-columns: 1fr; }
.afps-fees-workspace .afps-payment-form .button { width: 100%; }
.afps-modal-backdrop.afps-fee-structure-modal { padding: 0; }
.afps-fee-structure-modal .afps-modal--form { width: 100%; max-height: 100%; border-radius: 0; }
.afps-fee-structure-modal .afps-modal-head, .afps-fee-structure-modal .afps-modal-scroll, .afps-fee-structure-modal .afps-modal-actions { padding-right: 14px; padding-left: 14px; }
.afps-fee-structure-modal .afps-ms-grid { height: 240px; max-height: 240px; }
}
/* Fees: a cashier-facing collection flow instead of an empty ledger search. */
.afps-fee-collection, .afps-fee-practice, .afps-fee-payment-card {
margin: 0 0 18px;
padding: 20px 22px;
border: 1px solid var(--afps-border);
border-radius: 12px;
background: #fff;
box-shadow: var(--afps-shadow-xs);
}
.afps-fee-collection__intro, .afps-fee-payment-card__heading, .afps-fee-ledger-header {
display: flex;
align-items: flex-start;
gap: 11px;
}
.afps-fee-collection__step {
display: inline-flex;
width: 26px;
height: 26px;
align-items: center;
justify-content: center;
flex: 0 0 auto;
border-radius: 50%;
background: var(--afps-brand);
color: #fff;
font-size: 13px;
font-weight: 800;
}
.afps-fee-collection h2, .afps-fee-practice h2, .afps-fee-ledger-header h2 { margin: 0; font-size: 18px; }
.afps-fee-collection p, .afps-fee-practice p, .afps-fee-payment-card p, .afps-fee-ledger-header p { margin: 3px 0 0; color: var(--afps-text-mute); font-size: 13px; line-height: 1.45; }
.afps-ledger-picker--simple { margin: 18px 0 0; grid-template-columns: minmax(240px, 1fr) minmax(180px, .7fr) auto; max-width: 920px; }
.afps-ledger-picker--simple label:nth-of-type(1), .afps-ledger-picker--simple select:nth-of-type(1) { grid-column: 1; }
.afps-ledger-picker--simple label:nth-of-type(2), .afps-ledger-picker--simple select:nth-of-type(2) { grid-column: 2; }
.afps-ledger-picker--simple .button { grid-column: 3; grid-row: 1 / 3; min-height: 40px; }
.afps-fee-practice { display: flex; align-items: center; justify-content: space-between; gap: 18px; background: #f7faff; border-color: #d9e6fb; }
.afps-fee-practice__choices { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.afps-fee-practice__choices .button { display: flex; flex-direction: column; align-items: flex-start; height: auto; padding: 8px 12px; line-height: 1.25; }
.afps-fee-practice__choices small { margin-top: 2px; color: var(--afps-text-mute); font-size: 11px; font-weight: 500; }
.afps-fee-ledger-header { align-items: center; justify-content: space-between; margin: 24px 0 12px; }
.afps-fee-balance-cards { margin-top: 0; }
.afps-fee-payment-card { max-width: 980px; margin-top: 20px; }
.afps-fee-payment-card__heading h3 { margin: 2px 0 0; font-size: 16px; }
.afps-payment-form { display: grid; grid-template-columns: minmax(170px, .8fr) minmax(150px, .7fr) minmax(180px, 1fr) auto; gap: 12px; align-items: end; margin-top: 18px; }
.afps-payment-form > div, .afps-payment-form > label { min-width: 0; }
.afps-payment-form label { display: block; margin-bottom: 5px; color: var(--afps-text-mute); font-size: 12px; font-weight: 700; }
.afps-payment-form input, .afps-payment-form select { width: 100%; }
.afps-payment-form__advanced { grid-row: 2; }
.afps-payment-form__checkbox {
display: inline-flex !important;
min-height: 39px;
align-items: center;
align-self: center;
gap: 8px;
margin: 0 !important;
padding: 0;
font-size: 12px !important;
font-weight: 600 !important;
line-height: 1.35;
}
.afps-payment-form__checkbox input[type="checkbox"] {
width: 16px !important;
min-width: 16px !important;
height: 16px !important;
min-height: 16px !important;
flex: 0 0 16px;
box-sizing: border-box;
margin: 0 !important;
padding: 0 !important;
vertical-align: middle;
}
.afps-payment-form .button { min-height: 38px; }
.afps-fee-advanced { margin: 0 0 20px; padding: 13px 16px; border: 1px solid var(--afps-border); border-radius: 9px; background: #fff; }
.afps-fee-advanced summary { cursor: pointer; color: #526277; font-size: 13px; font-weight: 700; }
.afps-fee-advanced form { margin-top: 14px; }
.afps-fee-history-title { margin: 22px 0 10px; font-size: 16px; }
@media (max-width: 900px) {
.afps-payment-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.afps-payment-form .button { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 680px) {
.afps-ledger-picker--simple, .afps-payment-form { grid-template-columns: 1fr; }
.afps-ledger-picker--simple label, .afps-ledger-picker--simple select, .afps-ledger-picker--simple .button { grid-column: 1 !important; grid-row: auto; }
.afps-fee-practice { align-items: flex-start; flex-direction: column; }
.afps-fee-practice__choices { justify-content: flex-start; }
.afps-fee-ledger-header { align-items: flex-start; flex-direction: column; }
.afps-payment-form__advanced { grid-row: auto; }
}
/* Keep the complete ledger picker on one row wherever the available workspace
can comfortably contain it. The earlier grid paired each label with its
control vertically, which split this short selection flow across two rows. */
.afps-fees-workspace .afps-ledger-picker--simple {
display: flex;
align-items: center;
flex-wrap: nowrap;
gap: 14px;
}
.afps-fees-workspace .afps-ledger-picker--simple label {
flex: 0 0 auto;
margin: 0;
white-space: nowrap;
}
.afps-fees-workspace .afps-ledger-picker--simple .afps-ledger-student-search {
width: auto;
min-width: 220px;
flex: 1 1 380px;
}
.afps-fees-workspace .afps-ledger-picker--simple .afps-ledger-student-search input[type="search"] {
width: 100%;
min-width: 0;
min-height: 43px;
border-color: #bdcce0;
border-radius: 8px;
font-size: 14px;
}
.afps-fees-workspace .afps-ledger-picker--simple #afps-ledger-year {
width: auto;
min-width: 150px;
flex: 0 1 210px;
}
.afps-fees-workspace .afps-ledger-picker--simple .button {
flex: 0 0 auto;
grid-column: auto;
grid-row: auto;
white-space: nowrap;
}
@media (max-width: 680px) {
.afps-fees-workspace .afps-ledger-picker--simple {
display: grid;
grid-template-columns: 1fr;
align-items: stretch;
}
.afps-fees-workspace .afps-ledger-picker--simple .afps-ledger-student-search,
.afps-fees-workspace .afps-ledger-picker--simple #afps-ledger-year {
width: 100%;
min-width: 0;
}
.afps-fees-workspace .afps-ledger-picker--simple .button {
justify-self: start;
}
}
/* Full application workspace: review and treatment happen inside one window. */
.afps-table-wrap .afps-row-actions a.afps-application-workspace-trigger {
display: inline-flex; width: auto; min-height: 32px; padding: 0 10px; align-items: center; justify-content: center; gap: 6px;
flex: 0 0 auto; border: 1px solid #bfd0ed; border-radius: 8px; color: var(--afps-brand); background: #f8fbff; cursor: pointer; font-weight: 600;
}
.afps-table-wrap .afps-row-actions a.afps-application-workspace-trigger .dashicons { width: 18px; height: 18px; font-size: 18px; }
.afps-table-wrap .afps-row-actions a.afps-application-workspace-trigger:hover { color: var(--afps-brand-dark); border-color: #93b4f4; background: var(--afps-brand-soft); }
.afps-table-wrap .afps-row-actions a.afps-application-workspace-trigger:focus-visible { outline: none; border-color: #93b4f4; box-shadow: 0 0 0 3px rgba(0,68,170,.18); }
/* Slightly denser type keeps the Admissions list easy to scan at a glance. */
.afps-admissions-list .afps-admissions-table thead th { font-size: 10px; letter-spacing: .05em; }
.afps-admissions-list .afps-admissions-table tbody td { font-size: 13px; }
.afps-admissions-list .afps-admissions-table .afps-badge { gap: 3px; padding: 2px 7px; font-size: 10px; line-height: 14px; }
.afps-admissions-list .afps-admissions-table .afps-badge::before { width: 5px; height: 5px; }
.afps-admissions-list .afps-admissions-table .afps-row-actions a { padding: 3px 7px; font-size: 10px; }
.afps-application-preview-modal .afps-modal--form { width: min(1320px, calc(100vw - 32px)); max-width: none; max-height: calc(100vh - 32px); }
.afps-application-preview-modal .afps-modal-head { padding: 16px 24px 14px; }
.afps-application-preview-modal .afps-modal-scroll { min-height: 0; background: #f5f7fb; }
.afps-application-workspace { min-height: 100%; color: var(--afps-text); }
.afps-application-workspace__hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 20px 24px 18px; border-bottom: 1px solid var(--afps-border); background: #fff; }
.afps-application-workspace__hero h4 { margin: 3px 0; color: var(--afps-text); font-size: 24px; line-height: 1.2; }
.afps-application-workspace__hero p { margin: 0; color: var(--afps-text-mute); font-size: 14px; }
.afps-application-workspace__ref { color: var(--afps-brand); font-family: ui-monospace, Menlo, monospace; font-size: 12px; font-weight: 700; }
.afps-application-workspace__body { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 18px; padding: 18px 24px 24px; }
.afps-application-workspace__details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 18px; }
.afps-workspace-section, .afps-workspace-action-card { padding: 18px; border: 1px solid var(--afps-border); border-radius: 10px; background: #fff; box-shadow: 0 1px 2px rgba(15,23,42,.025); }
.afps-workspace-section h5, .afps-workspace-action-card h5 { margin: 0 0 12px; color: #475569; font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.afps-workspace-data { margin: 0; }
.afps-workspace-data > div { display: grid; grid-template-columns: 125px minmax(0, 1fr); gap: 12px; padding: 7px 0; border-bottom: 1px solid #edf0f4; }
.afps-workspace-data > div:last-child { border-bottom: 0; }
.afps-workspace-data dt { color: var(--afps-text-mute); font-size: 12px; font-weight: 600; }
.afps-workspace-data dd { min-width: 0; margin: 0; overflow-wrap: anywhere; color: var(--afps-text); font-size: 13px; font-weight: 600; }
.afps-workspace-note, .afps-workspace-notes { grid-column: 1 / -1; }
.afps-workspace-note { background: #fffcf2; }
.afps-workspace-note p, .afps-workspace-notes > p, .afps-workspace-action-card > p { margin: 0 0 12px; color: #526277; font-size: 13px; line-height: 1.5; }
.afps-workspace-notes textarea, .afps-workspace-action-card textarea, .afps-workspace-action-card select { box-sizing: border-box; width: 100%; margin: 5px 0 10px; }
.afps-workspace-notes textarea { display: block; }
.afps-application-workspace__actions { display: flex; flex-direction: column; gap: 14px; }
.afps-workspace-action-card form + form { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--afps-border); }
.afps-workspace-action-card label { display: block; color: #475569; font-size: 12px; font-weight: 700; }
.afps-workspace-decision-form { display: grid; gap: 10px; }
.afps-workspace-decision-form label { margin: 0; }
.afps-workspace-decision-form select,
.afps-workspace-decision-form textarea { margin-bottom: 0; }
.afps-workspace-decision-form textarea { min-height: 76px; }
.afps-workspace-decision-hint { margin: -3px 0 0; color: var(--afps-text-mute); font-size: 11px; font-weight: 500; line-height: 1.45; }
.afps-workspace-decision-form [data-afps-decision-submit] { width: 100%; }
.afps-workspace-conversion-options { display: grid; gap: 8px; margin-top: 2px; padding: 12px; border: 1px solid #dbe7f8; border-radius: 8px; background: #f7faff; }
.afps-workspace-conversion-options[hidden] { display: none; }
.afps-workspace-conversion-options p { margin: 0 0 2px; color: #526277; font-size: 11px; line-height: 1.45; }
.afps-workspace-conversion-options select { background: #fff; }
.afps-workspace-decision-form.is-rejecting { margin: 0 -8px -8px; padding: 10px 8px 8px; border-radius: 8px; background: #fff8f8; }
.afps-workspace-decision-form.is-rejecting textarea { border-color: #fca5a5; background: #fff; }
.afps-workspace-action-card .afps-workspace-checkbox { margin: 2px 0 12px; font-weight: 600; }
.afps-workspace-checkbox input { margin: 0 5px 0 0; vertical-align: middle; }
.afps-workspace-action-card .button { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; }
.afps-workspace-full-page { align-self: center; color: var(--afps-brand); font-size: 12px; font-weight: 600; text-decoration: none; }
.afps-workspace-full-page:hover { text-decoration: underline; }
.afps-workspace-history { min-width: 0; }
.afps-workspace-history__heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.afps-workspace-history__heading h5 { margin-bottom: 0; }
.afps-workspace-history__heading span { color: var(--afps-text-mute); font-size: 11px; }
.afps-application-activity { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.afps-application-activity li { position: relative; display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 9px; min-height: 51px; padding: 0 0 11px; }
.afps-application-activity li:last-child { min-height: 36px; padding-bottom: 0; }
.afps-application-activity li::before { content: ""; position: absolute; top: 12px; bottom: -1px; left: 5px; width: 1px; background: #dbe4f1; }
.afps-application-activity li:last-child::before { display: none; }
.afps-application-activity__marker { position: relative; z-index: 1; width: 11px; height: 11px; margin-top: 3px; border: 3px solid #e8f0ff; border-radius: 50%; background: var(--afps-brand); box-sizing: border-box; }
.afps-application-activity strong { display: block; color: var(--afps-text); font-size: 12px; line-height: 1.35; }
.afps-application-activity small { display: block; margin-top: 3px; color: var(--afps-text-mute); font-size: 11px; line-height: 1.35; }
.afps-workspace-history__empty { margin: 0; color: var(--afps-text-mute); font-size: 12px; line-height: 1.5; }
.afps-workspace-message { margin: 0 0 10px; padding: 8px 10px; border-radius: 6px; font-size: 12px; }
.afps-workspace-message.is-error { color: #991b1b; background: #fef2f2; }
.afps-application-workspace button.is-busy { opacity: .65; cursor: wait; }
@media (max-width: 900px) {
.afps-application-workspace__body { grid-template-columns: 1fr; }
.afps-application-workspace__actions { display: grid; grid-template-columns: 1fr; }
.afps-workspace-full-page { grid-column: 1 / -1; }
}
@media (max-width: 680px) {
.afps-application-preview-modal .afps-modal--form { width: 100%; max-height: 100%; border-radius: 0; }
.afps-modal-backdrop.afps-application-preview-modal { padding: 0; }
.afps-application-workspace__hero, .afps-application-workspace__body { padding-right: 16px; padding-left: 16px; }
.afps-application-workspace__details, .afps-application-workspace__actions { grid-template-columns: 1fr; }
.afps-application-workspace__hero h4 { font-size: 20px; }
.afps-workspace-data > div { grid-template-columns: 105px minmax(0, 1fr); }
}
/* Quick application entry: a focused create flow that stays on the list. */
.afps-new-application-modal .afps-modal--form {
width: min(1120px, calc(100vw - 40px));
max-width: none;
max-height: calc(100vh - 40px);
}
.afps-new-application-modal .afps-modal-head { padding: 16px 22px 14px; }
.afps-new-application-modal .afps-modal-scroll {
flex: 1 1 auto;
padding: 18px 22px 20px;
background: #f6f8fc;
}
.afps-new-application-intro {
margin: 0 0 14px;
color: var(--afps-text-mute);
font-size: 13px;
line-height: 1.45;
}
.afps-new-application-message:empty { display: none; }
.afps-new-application-message .afps-workspace-message { margin-bottom: 14px; }
.afps-application-entry-grid {
display: grid;
grid-template-columns: 1.15fr 1fr 1fr;
gap: 14px;
align-items: start;
}
.afps-application-entry-section {
min-width: 0;
padding: 16px;
border: 1px solid var(--afps-border);
border-radius: 12px;
background: #fff;
box-shadow: 0 1px 2px rgba(15,23,42,.025);
}
.afps-application-entry-section__head {
display: flex;
align-items: flex-start;
gap: 10px;
min-height: 42px;
margin-bottom: 14px;
padding-bottom: 12px;
border-bottom: 1px solid #e8edf4;
}
.afps-application-entry-section__head > span {
display: inline-flex;
width: 24px;
height: 24px;
flex: 0 0 24px;
align-items: center;
justify-content: center;
border-radius: 50%;
color: #fff;
background: var(--afps-brand);
font-size: 11px;
font-weight: 800;
}
.afps-application-entry-section__head h4 { margin: 0 0 2px; color: var(--afps-text); font-size: 14px; line-height: 1.25; }
.afps-application-entry-section__head p { margin: 0; color: var(--afps-text-mute); font-size: 11px; line-height: 1.35; }
.afps-new-application-modal .afps-field-grid { gap: 11px 12px; }
.afps-new-application-modal .afps-field label { margin-bottom: 4px; }
.afps-new-application-modal .afps-field input,
.afps-new-application-modal .afps-field select,
.afps-new-application-modal .afps-field textarea { min-height: 36px; }
.afps-new-application-modal .afps-contact-declaration {
margin-top: -2px;
padding: 9px 10px;
border-radius: 8px;
background: #f8fafc;
}
.afps-new-application-modal .afps-modal-actions { margin-top: 0; padding: 12px 22px 14px; }
.afps-modal-actions__spacer { flex: 1 1 auto; }
.afps-new-application-modal [data-afps-new-application-submit].is-busy { opacity: .7; cursor: wait; }
/* Student details popup: keep the record easy to scan without making the
header and identity panel taller than the information needs. */
.afps-student-preview-modal .afps-modal-head,
.afps-person-preview-modal .afps-modal-head { padding: 14px 36px 12px; }
.afps-student-preview-modal .afps-modal-actions,
.afps-person-preview-modal .afps-modal-actions { padding-right: 36px; padding-left: 36px; }
.afps-student-preview-modal .afps-application-preview__hero,
.afps-person-preview-modal .afps-application-preview__hero { padding: 14px 36px; }
.afps-student-preview-modal .afps-application-preview__hero h4,
.afps-person-preview-modal .afps-application-preview__hero h4 { font-size: 22px; }
.afps-student-preview-modal .afps-application-preview__hero p,
.afps-person-preview-modal .afps-application-preview__hero p { font-size: 15px; }
.afps-student-preview-modal .afps-application-preview__ref,
.afps-person-preview-modal .afps-application-preview__ref { font-size: 13px; }
.afps-student-preview-modal .afps-student-preview__avatar,
.afps-person-preview-modal .afps-person-preview__avatar { width: 44px; height: 44px; font-size: 14px; }
.afps-student-preview-modal .afps-application-preview__grid,
.afps-person-preview-modal .afps-application-preview__grid { padding: 8px 36px 14px; }
.afps-student-preview-modal .afps-application-preview__grid section,
.afps-person-preview-modal .afps-application-preview__grid section { padding: 14px 24px 12px 0; }
.afps-student-preview-modal .afps-application-preview__grid section:nth-child(even),
.afps-person-preview-modal .afps-application-preview__grid section:nth-child(even) { padding-left: 28px; }
.afps-student-preview-modal .afps-application-preview h5,
.afps-person-preview-modal .afps-application-preview h5 { margin-bottom: 8px; font-size: 12px; }
.afps-student-preview-modal .afps-application-preview dl > div,
.afps-person-preview-modal .afps-application-preview dl > div { grid-template-columns: 132px minmax(0, 1fr); gap: 14px; padding: 6px 0; }
.afps-person-preview-modal .afps-person-preview__links { margin: 0 36px 14px; padding: 12px 14px; }
.afps-person-preview-modal .afps-person-preview__links li { min-height: 38px; padding: 6px 10px; }
.afps-student-preview-modal .afps-application-preview dt { font-size: 13px; }
.afps-student-preview-modal .afps-application-preview dd { font-size: 14px; line-height: 1.45; }
.afps-student-preview-modal .afps-student-modal-head__identity { display: none; }
.afps-student-preview-modal.is-student-detail-view .afps-modal-head {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas: "intro close" "identity identity";
gap: 8px 16px;
padding-bottom: 16px;
}
.afps-student-preview-modal.is-student-detail-view .afps-modal-head > div:not(.afps-student-modal-head__identity) { grid-area: intro; }
.afps-student-preview-modal.is-student-detail-view .afps-modal-close { grid-area: close; }
.afps-student-preview-modal.is-student-detail-view .afps-student-modal-head__identity {
display: flex;
grid-area: identity;
min-width: 0;
align-items: flex-start;
justify-content: space-between;
gap: 20px;
}
.afps-student-preview-modal.is-student-detail-view .afps-modal-head > div:not(.afps-student-modal-head__identity) h3 {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.afps-student-preview-modal.is-student-detail-view .afps-student-preview__identity {
display: flex;
min-width: 0;
align-items: center;
gap: 14px;
}
.afps-student-preview-modal.is-student-detail-view .afps-student-preview__identity > div { min-width: 0; }
.afps-student-preview-modal.is-student-detail-view .afps-student-preview__avatar { width: 44px; height: 44px; font-size: 14px; }
.afps-student-preview-modal.is-student-detail-view .afps-application-preview__ref { font-size: 13px; }
.afps-student-preview-modal.is-student-detail-view .afps-student-preview__identity h4 { margin: 2px 0; font-size: 22px; }
.afps-student-preview-modal.is-student-detail-view .afps-student-preview__identity p { margin: 0; font-size: 15px; }
.afps-student-preview-modal.is-student-detail-view .afps-student-modal-head__identity .afps-badge { flex: 0 0 auto; margin-top: 5px; }
.afps-student-activity-log {
margin: 0 36px 22px;
padding: 18px 20px;
border: 1px solid #dfe7f2;
border-radius: 12px;
background: #fff;
box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
}
.afps-student-activity-log__heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.afps-student-activity-log__heading h5 { margin: 0 0 4px !important; }
.afps-student-activity-log__heading p { margin: 0; color: var(--afps-text-mute); font-size: 12px; line-height: 1.45; }
.afps-student-activity-log__heading > span { flex: 0 0 auto; color: var(--afps-text-mute); font-size: 11px; font-weight: 600; }
.afps-student-activity { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.afps-student-activity > li { position: relative; display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 10px; padding: 0 0 18px; }
.afps-student-activity > li:last-child { padding-bottom: 0; }
.afps-student-activity > li::before { content: ""; position: absolute; top: 13px; bottom: 0; left: 6px; width: 1px; background: #dbe4f1; }
.afps-student-activity > li:last-child::before { display: none; }
.afps-student-activity__marker { position: relative; z-index: 1; width: 13px; height: 13px; margin-top: 2px; border: 3px solid #e8f0ff; border-radius: 50%; background: var(--afps-brand); box-sizing: border-box; }
.afps-student-activity__content > strong { display: block; color: var(--afps-text); font-size: 13px; line-height: 1.35; }
.afps-student-activity__content > small { display: block; margin-top: 3px; color: var(--afps-text-mute); font-size: 11px; line-height: 1.35; }
.afps-student-change-list { display: grid; gap: 5px; margin: 10px 0 0; padding: 0; list-style: none; }
.afps-student-change-list li { display: grid; grid-template-columns: minmax(110px, .6fr) minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; align-items: baseline; padding: 7px 9px; border-radius: 7px; background: #f7f9fc; color: var(--afps-text); font-size: 11px; line-height: 1.35; }
.afps-student-change-list li > span:first-child { color: #43536a; font-weight: 700; }
.afps-student-change-list del { min-width: 0; overflow-wrap: anywhere; color: #8a3f47; text-decoration-color: #d7a3a9; }
.afps-student-change-list ins { min-width: 0; overflow-wrap: anywhere; color: #176b50; font-weight: 600; text-decoration: none; }
.afps-student-change-list__arrow { color: #94a3b8; }
.afps-student-activity-log__empty { margin: 0; color: var(--afps-text-mute); font-size: 12px; line-height: 1.5; }
.afps-person-preview-modal .afps-record-modal-head__identity,
.afps-application-detail-modal .afps-record-modal-head__identity { display: none; }
.afps-person-preview-modal.is-person-detail-view .afps-modal-head,
.afps-application-detail-modal.is-application-detail-view .afps-modal-head {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas: "intro close" "identity identity";
gap: 8px 16px;
padding-bottom: 16px;
}
.afps-person-preview-modal.is-person-detail-view .afps-modal-head > div:not(.afps-record-modal-head__identity),
.afps-application-detail-modal.is-application-detail-view .afps-modal-head > div:not(.afps-record-modal-head__identity) { grid-area: intro; }
.afps-person-preview-modal.is-person-detail-view .afps-modal-close,
.afps-application-detail-modal.is-application-detail-view .afps-modal-close { grid-area: close; }
.afps-person-preview-modal.is-person-detail-view .afps-record-modal-head__identity,
.afps-application-detail-modal.is-application-detail-view .afps-record-modal-head__identity {
display: flex;
grid-area: identity;
min-width: 0;
align-items: flex-start;
justify-content: space-between;
gap: 20px;
}
.afps-person-preview-modal.is-person-detail-view .afps-modal-head > div:not(.afps-record-modal-head__identity) h3,
.afps-application-detail-modal.is-application-detail-view .afps-modal-head > div:not(.afps-record-modal-head__identity) h3 {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.afps-person-preview-modal.is-person-detail-view .afps-person-preview__identity {
display: flex;
min-width: 0;
align-items: center;
gap: 14px;
}
.afps-person-preview-modal.is-person-detail-view .afps-person-preview__identity > div { min-width: 0; }
.afps-person-preview-modal.is-person-detail-view .afps-person-preview__avatar { width: 44px; height: 44px; font-size: 14px; }
.afps-person-preview-modal.is-person-detail-view .afps-application-preview__ref,
.afps-application-detail-modal.is-application-detail-view .afps-application-preview__ref,
.afps-application-detail-modal.is-application-detail-view .afps-application-workspace__ref { font-size: 13px; }
.afps-person-preview-modal.is-person-detail-view .afps-person-preview__identity h4,
.afps-application-detail-modal.is-application-detail-view .afps-record-modal-head__identity h4 { margin: 2px 0; font-size: 22px; }
.afps-person-preview-modal.is-person-detail-view .afps-person-preview__identity p,
.afps-application-detail-modal.is-application-detail-view .afps-record-modal-head__identity p { margin: 0; font-size: 15px; }
.afps-person-preview-modal.is-person-detail-view .afps-record-modal-head__identity > .afps-badge,
.afps-application-detail-modal.is-application-detail-view .afps-record-modal-head__identity > .afps-badge { flex: 0 0 auto; margin-top: 5px; }
/* Keep the application decision compact, but make every control easy to scan
and operate inside the narrow review sidebar. */
.afps-workspace-decision-form {
gap: 12px;
}
.afps-workspace-decision-form label {
display: grid;
gap: 6px;
color: #334155;
line-height: 1.35;
}
.afps-workspace-decision-form select,
.afps-workspace-decision-form textarea {
margin: 0;
border-color: #cbd5e1;
border-radius: 7px;
color: var(--afps-text);
background: #fff;
box-shadow: inset 0 1px 1px rgba(15, 23, 42, .025);
}
.afps-workspace-decision-form select {
min-height: 38px;
padding-right: 32px;
}
.afps-workspace-decision-form textarea {
min-height: 84px;
padding: 9px 10px;
line-height: 1.45;
resize: vertical;
}
.afps-workspace-decision-form select:focus,
.afps-workspace-decision-form textarea:focus {
border-color: #2563eb;
box-shadow: 0 0 0 3px rgba(37, 99, 235, .14);
}
.afps-workspace-decision-form [data-afps-decision-submit] {
min-height: 38px;
margin-top: 2px;
font-weight: 700;
}
.afps-workspace-decision-form [data-afps-decision-submit].button-primary,
.afps-workspace-notes form > .button {
border: 1px solid #0044aa;
border-radius: 5px;
color: #fff;
background: #0044aa;
box-shadow: 0 1px 2px rgba(0, 68, 170, .22);
}
.afps-workspace-decision-form [data-afps-decision-submit].button-primary:hover,
.afps-workspace-decision-form [data-afps-decision-submit].button-primary:focus,
.afps-workspace-notes form > .button:hover,
.afps-workspace-notes form > .button:focus {
border-color: #003680;
color: #fff;
background: #003680;
}
.afps-workspace-notes form > .button {
width: 100%;
min-height: 38px;
margin-top: 10px;
justify-content: center;
font-weight: 700;
}
@media (max-width: 960px) {
.afps-application-entry-grid { grid-template-columns: 1fr 1fr; }
.afps-application-entry-section:first-child { grid-row: span 2; }
}
@media (max-width: 700px) {
.afps-modal-backdrop.afps-new-application-modal { padding: 0; }
.afps-new-application-modal .afps-modal--form { width: 100%; max-height: 100%; border-radius: 0; }
.afps-new-application-modal .afps-modal-scroll { padding: 14px; }
.afps-application-entry-grid { grid-template-columns: 1fr; }
.afps-application-entry-section:first-child { grid-row: auto; }
.afps-new-application-modal .afps-modal-actions { padding-right: 14px; padding-left: 14px; }
.afps-new-application-modal .afps-modal-more { display: none; }
.afps-student-preview-modal .afps-modal-head,
.afps-person-preview-modal .afps-modal-head { padding: 14px 20px 12px; }
.afps-student-preview-modal .afps-modal-actions,
.afps-person-preview-modal .afps-modal-actions { padding-right: 20px; padding-left: 20px; }
.afps-student-preview-modal .afps-application-preview__hero,
.afps-person-preview-modal .afps-application-preview__hero { padding: 14px 20px; }
.afps-student-preview-modal .afps-application-preview__hero h4,
.afps-person-preview-modal .afps-application-preview__hero h4 { font-size: 21px; }
.afps-student-preview-modal .afps-application-preview__hero p,
.afps-person-preview-modal .afps-application-preview__hero p { font-size: 14px; }
.afps-student-preview-modal .afps-application-preview__grid,
.afps-person-preview-modal .afps-application-preview__grid { padding: 8px 20px 14px; }
.afps-student-preview-modal .afps-application-preview__grid section,
.afps-person-preview-modal .afps-application-preview__grid section { padding: 14px 0 10px; }
.afps-student-preview-modal .afps-application-preview__grid section:nth-child(even),
.afps-person-preview-modal .afps-application-preview__grid section:nth-child(even) { padding-left: 0; }
.afps-student-preview-modal .afps-application-preview dl > div,
.afps-person-preview-modal .afps-application-preview dl > div { grid-template-columns: 110px minmax(0, 1fr); gap: 10px; padding: 6px 0; }
.afps-student-preview-modal.is-student-detail-view .afps-modal-head { padding-bottom: 14px; }
.afps-student-preview-modal.is-student-detail-view .afps-student-modal-head__identity { gap: 12px; }
.afps-student-preview-modal.is-student-detail-view .afps-student-preview__identity h4 { font-size: 21px; }
.afps-student-preview-modal.is-student-detail-view .afps-student-preview__identity p { font-size: 14px; }
.afps-student-activity-log { margin: 0 20px 18px; padding: 16px; }
.afps-student-activity-log__heading { align-items: flex-start; flex-direction: column; gap: 5px; }
.afps-student-change-list li { grid-template-columns: 1fr auto 1fr; }
.afps-student-change-list li > span:first-child { grid-column: 1 / -1; }
.afps-person-preview-modal.is-person-detail-view .afps-modal-head,
.afps-application-detail-modal.is-application-detail-view .afps-modal-head { padding-bottom: 14px; }
.afps-person-preview-modal.is-person-detail-view .afps-record-modal-head__identity,
.afps-application-detail-modal.is-application-detail-view .afps-record-modal-head__identity { gap: 12px; }
.afps-person-preview-modal.is-person-detail-view .afps-person-preview__identity h4,
.afps-application-detail-modal.is-application-detail-view .afps-record-modal-head__identity h4 { font-size: 21px; }
.afps-person-preview-modal.is-person-detail-view .afps-person-preview__identity p,
.afps-application-detail-modal.is-application-detail-view .afps-record-modal-head__identity p { font-size: 14px; }
.afps-person-preview-modal .afps-person-preview__links { margin: 0 20px 12px; padding: 10px 12px; }
}
/* ==========================================================================
Unified administration workspaces (1.15.2)
--------------------------------------------------------------------------
Admissions and Students established the compact, data-first direction for
the portal. The stable classes injected by Admin\Menu now let every other
screen use the same hierarchy without duplicating its PHP structure.
========================================================================== */
.afps-screen {
width: auto;
max-width: 1680px;
color: var(--afps-text);
}
.afps-screen:not(.afps-screen--dashboard):not(.afps-screen--admissions):not(.afps-screen--students) {
padding-top: 12px;
padding-bottom: 34px;
}
.afps-screen > .wp-header-end { display: none; }
.afps-screen > .afps-module-bar { margin-bottom: 13px; }
.afps-screen:not(.afps-screen--dashboard):not(.afps-screen--admissions):not(.afps-screen--students) > .afps-page-head {
margin: 0 0 12px;
padding: 5px 3px 7px;
}
.afps-screen:not(.afps-screen--dashboard):not(.afps-screen--admissions):not(.afps-screen--students) > .afps-page-head .afps-page-title h1 {
margin-bottom: 3px;
font-size: 26px;
letter-spacing: -.025em;
}
.afps-screen:not(.afps-screen--dashboard):not(.afps-screen--admissions):not(.afps-screen--students) > .afps-page-head .afps-subtitle {
max-width: 88ch;
margin-top: 0;
color: #69768b;
font-size: 14px;
line-height: 1.45;
}
.afps-screen .afps-page-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 7px;
flex-wrap: wrap;
}
.afps-screen .afps-page-actions .button,
.afps-screen .afps-actions .button,
.afps-screen .afps-form-footer-actions .button {
display: inline-flex;
min-height: 36px;
align-items: center;
justify-content: center;
gap: 6px;
border-radius: 8px;
font-weight: 650;
}
/* Forms and tables are the shared working material across Academic Setup,
Timetable, Attendance, Grades, Exams, Communications and Administration. */
.afps-screen .afps-form-card {
overflow: hidden;
border-color: #dbe3ee;
border-radius: 13px;
box-shadow: 0 3px 12px rgba(15, 23, 42, .035);
}
.afps-screen .afps-form-section + .afps-form-section {
border-top-color: #e7ecf3;
}
.afps-screen .afps-form-section-head {
align-items: flex-start;
}
.afps-screen .afps-form-section-title h2 {
color: #172554;
font-size: 17px;
letter-spacing: -.012em;
}
.afps-screen .afps-form-section-title p {
color: #728096;
line-height: 1.5;
}
.afps-screen .afps-field label {
color: #344258;
font-size: 12px;
font-weight: 700;
}
.afps-screen .afps-field input:not([type="checkbox"]):not([type="radio"]),
.afps-screen .afps-field select,
.afps-screen .afps-field textarea {
border-color: #cbd6e4;
border-radius: 8px;
background-color: #fff;
}
.afps-screen .afps-field input:not([type="checkbox"]):not([type="radio"]):hover,
.afps-screen .afps-field select:hover,
.afps-screen .afps-field textarea:hover { border-color: #9fb0c6; }
.afps-screen .afps-field input:not([type="checkbox"]):not([type="radio"]):focus,
.afps-screen .afps-field select:focus,
.afps-screen .afps-field textarea:focus {
border-color: var(--afps-brand);
box-shadow: var(--afps-ring);
}
.afps-screen .afps-table-wrap {
border-color: #dbe3ee;
border-radius: 12px;
background: #fff;
box-shadow: 0 2px 8px rgba(15, 23, 42, .03);
}
.afps-screen .afps-table-wrap table { border-collapse: separate; border-spacing: 0; }
.afps-screen .afps-table-wrap thead th {
padding-top: 11px;
padding-bottom: 11px;
border-bottom: 1px solid #dbe3ee;
color: #59677d;
background: #f7f9fc;
font-size: 10.5px;
font-weight: 800;
letter-spacing: .055em;
text-transform: uppercase;
}
.afps-screen .afps-table-wrap tbody td {
padding-top: 12px;
padding-bottom: 12px;
border-bottom-color: #edf0f4;
vertical-align: middle;
}
.afps-screen .afps-table-wrap tbody tr:last-child td { border-bottom: 0; }
.afps-screen .afps-toolbar {
min-height: 50px;
margin: 0 0 10px;
padding: 6px;
border-color: #dbe3ee;
border-radius: 11px;
background: #fff;
box-shadow: 0 1px 3px rgba(15, 23, 42, .025);
}
.afps-screen .afps-toolbar input[type="search"] {
min-height: 36px;
border-color: #d6dfeb;
border-radius: 8px;
background-color: #f8fafc;
}
/* Operational modules with no bespoke roster layout get a clean, consistent
vertical rhythm and a readable maximum line length for their controls. */
.afps-screen--academic > .afps-tabs,
.afps-screen--grading > .afps-tabs,
.afps-screen--exams > .afps-tabs,
.afps-screen--communications > .afps-tabs,
.afps-screen--internship > .afps-tabs {
margin-bottom: 12px;
}
.afps-screen--attendance .afps-review,
.afps-screen--grading .afps-workflow-picker,
.afps-screen--exams > .afps-form,
.afps-screen--audit > form,
.afps-screen--access > .afps-form-card {
margin-bottom: 14px;
padding: 16px;
border: 1px solid #dbe3ee;
border-radius: 12px;
background: #fff;
box-shadow: 0 2px 8px rgba(15, 23, 42, .03);
}
.afps-screen--timetable .afps-tt-toolbar,
.afps-screen--attendance > .afps-form,
.afps-screen--grading > .afps-form,
.afps-screen--exams > .afps-form {
border-color: #dbe3ee;
border-radius: 11px;
background: linear-gradient(180deg, #fbfdff, #f7f9fc);
}
.afps-screen--timetable .afps-tt-grid {
overflow: hidden;
border-color: #dbe3ee;
border-radius: 13px;
background: #fff;
box-shadow: 0 3px 12px rgba(15, 23, 42, .04);
}
.afps-screen--communications .afps-form-card,
.afps-screen--announcements .afps-form-card,
.afps-screen--internship .afps-form-card,
.afps-screen--settings .afps-form-section {
scroll-margin-top: 88px;
}
.afps-screen--audit .afps-module-stats article {
min-height: 76px;
border-radius: 12px;
}
.afps-screen--access .afps-toolbar { margin-top: 14px; }
/* Documents: generation opens in a modal, so the register owns the full
working width. The inline form remains a full-width no-JS fallback. */
.afps-documents-page {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 12px 16px;
align-items: start;
}
.afps-documents-page > * { grid-column: 1 / -1; min-width: 0; }
.afps-documents-page > .afps-module-bar,
.afps-documents-page > .afps-documents-page-head,
.afps-documents-page > .afps-notice,
.afps-documents-page > .notice,
.afps-documents-page > .afps-document-stats,
.afps-documents-page > .afps-document-toolbar { margin-bottom: 0; }
.afps-documents-page .afps-documents-page-head .afps-command-trigger { display: none; }
.afps-documents-page .afps-documents-page-head { align-items: center; }
.afps-documents-page .afps-documents-page-head .afps-page-title {
display: flex;
min-width: 0;
align-items: baseline;
gap: 14px;
}
.afps-documents-page .afps-documents-page-head .afps-page-title h1 { flex: 0 0 auto; }
.afps-documents-page .afps-documents-page-head .afps-subtitle { max-width: none; margin: 0; }
.afps-document-stats {
grid-template-columns: repeat(5, minmax(120px, 1fr));
}
.afps-document-stats .afps-stat {
display: flex;
align-items: center;
gap: 10px;
min-height: 66px;
padding: 10px 12px;
}
.afps-document-stats .afps-stat > .dashicons {
display: inline-flex;
width: 32px;
height: 32px;
align-items: center;
justify-content: center;
flex: 0 0 32px;
border-radius: 9px;
color: #1d4ed8;
background: #eff6ff;
font-size: 17px;
}
.afps-document-stats .afps-stat > span:last-child { min-width: 0; }
.afps-document-stats .afps-stat.is-valid > .dashicons { color: #047857; background: #ecfdf5; }
.afps-document-stats .afps-stat.is-revoked > .dashicons { color: #64748b; background: #f1f5f9; }
.afps-document-stats .afps-stat.is-repair > .dashicons { color: #b45309; background: #fffbeb; }
.afps-document-toolbar { display: flex; align-items: center; }
.afps-document-toolbar .afps-view-toggle { flex: 0 0 auto; }
.afps-document-toolbar .afps-ajax-search { max-width: 620px; }
.afps-document-toolbar .afps-ajax-search input[type="search"] { width: 100%; max-width: none; }
.afps-document-generator {
margin: 0;
border-color: #cddbf0;
background: linear-gradient(180deg, #fbfdff 0, #fff 120px);
}
.afps-document-generator .afps-form-section { padding: 18px; }
.afps-document-generator .afps-form-section-head { margin-bottom: 14px; }
.afps-document-generator .afps-form-section-title h2 { font-size: 18px; }
.afps-document-generator .afps-field-grid { grid-template-columns: 1fr; gap: 11px; }
.afps-document-generator .afps-field,
.afps-document-generator .afps-field--half,
.afps-document-generator .afps-field--full { grid-column: 1; }
.afps-document-generator .afps-field .description { margin-top: 4px; font-size: 10.5px; line-height: 1.4; }
.afps-document-generator .afps-actions {
position: sticky;
bottom: 0;
margin: 0;
padding: 12px 18px;
border-top: 1px solid #e3e9f2;
background: rgba(255,255,255,.96);
backdrop-filter: blur(10px);
}
.afps-document-generator .afps-actions .button { width: 100%; }
.afps-document-history-head {
display: flex;
min-height: 50px;
align-items: flex-end;
justify-content: space-between;
gap: 18px;
padding: 2px 2px 0;
}
.afps-document-history-head h2 { margin: 2px 0 0; color: #172554; font-size: 20px; letter-spacing: -.02em; }
.afps-document-history-head > span { color: var(--afps-text-mute); font-size: 11px; font-weight: 650; }
.afps-section-kicker { color: var(--afps-brand); font-size: 9.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.afps-documents-table { margin: 0; }
.afps-documents-table table { min-width: 820px; }
.afps-documents-table th:last-child { width: 1%; }
.afps-screen .afps-documents-table .afps-document-row > td { padding-top: 6px; padding-bottom: 6px; }
.afps-documents-table .afps-document-row.is-revoked { opacity: .68; }
.afps-document-subject { display: block; min-width: 150px; color: #26354d; font-size: 12px; }
.afps-document-language {
display: inline-flex;
min-width: 28px;
min-height: 23px;
align-items: center;
justify-content: center;
border: 1px solid #dbe3ee;
border-radius: 6px;
color: #475569;
background: #f8fafc;
font-size: 10px;
font-weight: 800;
}
.afps-document-reference { display: inline-grid; gap: 2px; min-width: 150px; vertical-align: middle; }
.afps-document-reference strong { color: #26354d; font-size: 11px; }
.afps-document-reference code { width: fit-content; color: #53647c; background: #f1f5f9; font-size: 9.5px; }
.afps-document-format { display: inline-block; margin-left: 6px; color: #8a96a8; font-size: 9px; font-weight: 800; letter-spacing: .06em; vertical-align: middle; }
.afps-documents-table .afps-row-actions { flex-wrap: nowrap; justify-content: flex-end; }
.afps-documents-table .afps-row-actions .dashicons { width: 14px; height: 14px; font-size: 14px; }
@media (max-width: 1320px) {
.afps-document-stats { grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); }
.afps-documents-table .afps-row-actions a { padding-right: 6px; padding-left: 6px; }
}
@media (max-width: 1080px) {
.afps-document-generator .afps-field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.afps-document-generator .afps-field,
.afps-document-generator .afps-field--half { grid-column: auto; }
.afps-document-generator .afps-field--full { grid-column: 1 / -1; }
}
@media (max-width: 782px) {
.afps-screen { margin-right: 10px; }
.afps-screen:not(.afps-screen--dashboard):not(.afps-screen--admissions):not(.afps-screen--students) > .afps-page-head,
.afps-documents-page .afps-documents-page-head { align-items: flex-start; flex-direction: column; }
.afps-documents-page .afps-documents-page-head .afps-page-title { align-items: flex-start; flex-direction: column; gap: 2px; }
.afps-documents-page .afps-page-actions { width: 100%; justify-content: flex-start; }
.afps-document-toolbar { align-items: stretch; flex-direction: column; }
.afps-document-toolbar .afps-ajax-search { width: 100%; max-width: none; }
.afps-document-toolbar .afps-toolbar__count { margin-left: 4px; }
}
@media (max-width: 560px) {
.afps-document-generator .afps-field-grid { grid-template-columns: 1fr; }
.afps-document-generator .afps-field,
.afps-document-generator .afps-field--half,
.afps-document-generator .afps-field--full { grid-column: 1; }
.afps-document-history-head { align-items: flex-start; flex-direction: column; gap: 3px; }
}
/* ==========================================================================
Compact command deck
--------------------------------------------------------------------------
Admissions proved that a list screen is easier to understand when its
scope, totals and search controls read as one command area. These modules
use the same information hierarchy while preserving their own workflows.
========================================================================== */
.afps-list-command-deck {
display: grid;
grid-template-columns: minmax(0, 1.55fr) minmax(390px, .8fr);
gap: 10px;
align-items: stretch;
min-width: 0;
margin: 0 0 12px;
}
.afps-list-command-deck > .afps-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
gap: 1px;
min-width: 0;
min-height: 58px;
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid #dbe3ee;
border-radius: 12px;
background: #e8edf4;
box-shadow: 0 2px 7px rgba(15, 23, 42, .035);
}
.afps-list-command-deck > .afps-stats .afps-stat {
min-height: 58px;
margin: 0;
padding: 10px 13px;
border: 0;
border-radius: 0;
background: #fff;
box-shadow: none;
}
.afps-list-command-deck > .afps-stats .afps-stat:hover { background: #fbfdff; }
.afps-list-command-deck > .afps-stats .afps-stat .label {
overflow: hidden;
margin-bottom: 3px;
color: #69778d;
font-size: 10px;
line-height: 1.2;
text-overflow: ellipsis;
white-space: nowrap;
}
.afps-list-command-deck > .afps-stats .afps-stat .value {
color: #172554;
font-size: 20px;
line-height: 1;
}
.afps-list-command-deck > .afps-toolbar {
display: flex;
min-width: 0;
min-height: 58px;
align-items: center;
gap: 8px;
margin: 0;
padding: 6px;
border: 1px solid #dbe3ee;
border-radius: 12px;
background: #fff;
box-shadow: 0 2px 7px rgba(15, 23, 42, .035);
}
.afps-list-command-deck > .afps-toolbar .afps-view-toggle { flex: 0 0 auto; margin: 0; }
.afps-list-command-deck > .afps-toolbar form {
display: flex;
min-width: 0;
flex: 1 1 auto;
gap: 7px;
}
.afps-list-command-deck > .afps-toolbar input[type="search"],
.afps-list-command-deck > .afps-toolbar select {
width: 100%;
min-width: 0;
max-width: none;
min-height: 40px;
margin: 0;
border-color: #dce4ef;
border-radius: 8px;
background-color: #fbfcfe;
}
.afps-list-command-deck > .afps-toolbar input[type="search"]:focus,
.afps-list-command-deck > .afps-toolbar select:focus {
border-color: var(--afps-brand);
background-color: #fff;
box-shadow: var(--afps-ring);
}
.afps-list-command-deck > .afps-toolbar .afps-toolbar__count {
flex: 0 0 auto;
margin-left: 0;
}
.afps-document-command-deck { grid-column: 1 / -1; }
.afps-document-command-deck > .afps-document-stats {
grid-template-columns: repeat(5, minmax(100px, 1fr));
}
.afps-document-command-deck > .afps-document-stats .afps-stat {
display: flex;
min-width: 0;
align-items: center;
gap: 9px;
}
.afps-document-command-deck > .afps-document-stats .afps-stat > .dashicons {
width: 29px;
height: 29px;
flex-basis: 29px;
font-size: 15px;
}
.afps-screen--communications > .afps-tabs,
.afps-screen--internship > .afps-tabs { margin-bottom: 10px; }
.afps-list-command-deck + .afps-table-wrap { margin-top: 0; }
@media (max-width: 1240px) {
.afps-list-command-deck { grid-template-columns: 1fr; }
.afps-list-command-deck > .afps-toolbar { width: auto; }
}
@media (max-width: 782px) {
.afps-list-command-deck > .afps-stats,
.afps-document-command-deck > .afps-document-stats {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.afps-list-command-deck > .afps-toolbar { align-items: stretch; flex-direction: column; }
.afps-list-command-deck > .afps-toolbar .afps-view-toggle,
.afps-list-command-deck > .afps-toolbar form { width: 100%; }
.afps-list-command-deck > .afps-toolbar .afps-toolbar__count { align-self: flex-start; padding-left: 4px; }
}
@media (max-width: 480px) {
.afps-list-command-deck > .afps-stats,
.afps-document-command-deck > .afps-document-stats { grid-template-columns: 1fr; }
}
/* Announcement list workspace: one View/Edit action opens an edge-to-edge
window, while the full-page form remains available from the footer. */
.afps-modal-backdrop.afps-announcement-modal { padding: 0; background: rgba(15, 23, 42, .62); }
.afps-announcement-modal .afps-modal--form {
width: 100%;
max-width: none;
height: 100%;
max-height: none;
border: 0;
border-radius: 0;
animation: none;
transform: none;
}
.afps-announcement-modal .afps-modal-head { flex: 0 0 auto; padding: 15px 28px 13px; }
.afps-announcement-modal .afps-modal-head h3 { max-width: min(920px, calc(100vw - 120px)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 19px; }
.afps-announcement-modal .afps-modal-scroll { flex: 1 1 auto; padding: 0; background: #f4f7fb; }
.afps-announcement-modal .afps-modal-actions { flex: 0 0 auto; margin: 0; padding: 12px 28px 14px; background: #fff; }
.afps-announcement-modal .afps-modal-actions .button { min-height: 36px; padding: 0 17px; }
.afps-announcement-modal .afps-inline-save-success { margin: 16px 28px 0; }
.afps-announcement-full-edit { font-size: 13px; font-weight: 650; }
.afps-announcement-preview { min-height: 100%; color: var(--afps-text); }
.afps-announcement-preview__hero {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 24px;
padding: 28px clamp(24px, 5vw, 72px) 24px;
border-bottom: 1px solid var(--afps-border);
background: #fff;
}
.afps-announcement-preview__hero h4 { max-width: 980px; margin: 5px 0 6px; color: var(--afps-text); font-size: clamp(24px, 3vw, 36px); line-height: 1.16; }
.afps-announcement-preview__hero p { margin: 0; color: var(--afps-text-mute); font-size: 14px; }
.afps-announcement-preview__badges { display: flex; align-items: center; gap: 8px; }
.afps-announcement-preview__layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); gap: 22px; max-width: 1440px; margin: 0 auto; padding: 26px clamp(24px, 5vw, 72px) 48px; }
.afps-announcement-preview__content,
.afps-announcement-preview__meta { border: 1px solid var(--afps-border); border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(15,23,42,.025); }
.afps-announcement-preview__content { min-height: 360px; padding: clamp(22px, 3vw, 40px); font-size: 15px; line-height: 1.7; }
.afps-announcement-preview__content > img { display: block; width: 100%; max-height: 430px; margin-bottom: 26px; border-radius: 10px; object-fit: cover; }
.afps-announcement-preview__summary { margin: 0 0 24px; padding-bottom: 20px; border-bottom: 1px solid #e8edf4; color: #475569; font-size: 18px; font-weight: 600; line-height: 1.55; }
.afps-announcement-preview__body > :first-child { margin-top: 0; }
.afps-announcement-preview__body > :last-child { margin-bottom: 0; }
.afps-announcement-preview__meta { align-self: start; padding: 20px; }
.afps-announcement-preview__meta h5 { margin: 0 0 12px; color: #475569; font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.afps-announcement-preview__meta dl { margin: 0; }
.afps-announcement-preview__meta dl > div { padding: 11px 0; border-bottom: 1px solid #e8edf4; }
.afps-announcement-preview__meta dl > div:last-child { border-bottom: 0; }
.afps-announcement-preview__meta dt { margin-bottom: 3px; color: var(--afps-text-mute); font-size: 11px; font-weight: 700; }
.afps-announcement-preview__meta dd { margin: 0; color: var(--afps-text); font-size: 13px; font-weight: 650; line-height: 1.4; }
.afps-announcement-inline-edit { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(320px, .75fr); gap: 22px; max-width: 1500px; margin: 0 auto; padding: 24px clamp(24px, 4vw, 64px) 48px; }
.afps-announcement-inline-edit > section { min-width: 0; padding: 22px; border: 1px solid var(--afps-border); border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(15,23,42,.025); }
.afps-announcement-inline-edit__heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.afps-announcement-inline-edit__heading h4 { margin: 4px 0 0; color: var(--afps-text); font-size: 20px; }
.afps-announcement-inline-edit__heading > span { color: var(--afps-text-mute); font-size: 12px; }
.afps-announcement-inline-edit .afps-field-grid { margin-top: 15px; }
.afps-announcement-inline-edit .wp-editor-wrap { margin-top: 0; }
.afps-announcement-inline-edit .wp-editor-container { border-color: #c7d0dd; }
.afps-announcement-inline-edit__image { display: flex; align-items: center; gap: 8px; }
.afps-announcement-inline-edit__image input { flex: 1 1 auto; min-width: 0; }
.afps-announcement-inline-edit__check { display: flex !important; align-items: center; gap: 8px; font-weight: 500 !important; }
.afps-announcement-inline-edit [data-afps-announcement-edit-error] { grid-column: 1 / -1; margin: 0; }
.afps-announcement-modal button.is-busy { opacity: .7; cursor: wait; }
@media (max-width: 980px) {
.afps-announcement-preview__layout,
.afps-announcement-inline-edit { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
.afps-announcement-modal .afps-modal-head,
.afps-announcement-modal .afps-modal-actions { padding-right: 16px; padding-left: 16px; }
.afps-announcement-preview__hero { padding: 20px 16px; }
.afps-announcement-preview__layout,
.afps-announcement-inline-edit { padding: 16px 14px 32px; }
.afps-announcement-preview__hero { flex-direction: column; }
.afps-announcement-preview__content { padding: 20px; }
.afps-announcement-inline-edit > section { padding: 17px; }
.afps-announcement-inline-edit__heading,
.afps-announcement-inline-edit__image { align-items: stretch; flex-direction: column; }
.afps-announcement-modal .afps-modal-actions { flex-wrap: wrap; }
.afps-announcement-modal .afps-modal-actions__spacer { display: none; }
.afps-announcement-full-edit { width: 100%; }
}
/* ---- Attendance: compact, data-first workspace -------------------------
Matches the Admissions and Students list hierarchy: a short page header,
an explicit section rail, one control band, then the working data surface. */
.afps-attendance-list > .wp-header-end { display: none; }
.afps-attendance-list { padding-top: 12px !important; }
.afps-attendance-list .afps-page-head { align-items: center; margin-bottom: 2px; }
.afps-attendance-list .afps-page-title { display: flex; min-width: 0; align-items: baseline; gap: 14px; }
.afps-attendance-list .afps-page-title h1 { flex: 0 0 auto; font-size: 26px; }
.afps-attendance-list .afps-subtitle { max-width: none; margin: 0; font-size: 14px; line-height: 1.35; }
.afps-attendance-list .afps-command-trigger { display: none; }
.afps-attendance-list > .afps-tabs { margin: 0 0 8px; }
.afps-attendance-list > .afps-tabs a { min-height: 36px; padding: 0 12px; font-size: 12px; }
#wpbody-content .afps-wrap form.afps-attendance-controls {
display: grid;
align-items: end;
gap: 8px;
margin: 0 0 8px;
padding: 8px;
border: 1px solid #d6e2f4;
border-radius: 11px;
background: linear-gradient(180deg, #f7faff 0%, #f1f6ff 100%);
box-shadow: 0 1px 2px rgba(30,64,175,.05);
}
#wpbody-content .afps-wrap form.afps-attendance-controls--mark {
grid-template-columns: repeat(5, minmax(0, 1fr)) auto;
}
.afps-attendance-controls--review { grid-template-columns: minmax(145px, .6fr) minmax(105px, .45fr) minmax(175px, .85fr) minmax(220px, 1.15fr) minmax(185px, .85fr) auto; }
.afps-attendance-control { display: grid; min-width: 0; gap: 4px; }
.afps-attendance-control label {
color: #53627a;
font-size: 10px;
font-weight: 800;
letter-spacing: .035em;
text-transform: uppercase;
}
.afps-attendance-control label span { color: var(--afps-text-soft); font-size: 9px; font-weight: 600; letter-spacing: 0; text-transform: none; }
#wpbody-content .afps-attendance-controls .afps-attendance-control input,
#wpbody-content .afps-attendance-controls .afps-attendance-control select {
box-sizing: border-box;
width: 100%;
min-width: 0;
min-height: 38px;
margin: 0;
border-color: transparent;
border-radius: 8px;
background: #fff;
font-size: 12px;
}
#wpbody-content .afps-attendance-controls .afps-attendance-control input:focus,
#wpbody-content .afps-attendance-controls .afps-attendance-control select:focus { border-color: var(--afps-brand); box-shadow: 0 0 0 3px rgba(0,68,170,.12); }
.afps-attendance-controls > .button { align-self: end; min-height: 38px; justify-content: center; margin: 0; }
.afps-attendance-controls > [data-afps-workspace-status] { position: absolute; }
.afps-attendance-register,
.afps-attendance-review-result,
.afps-attendance-recent {
overflow: hidden;
margin: 0 0 12px;
border: 1px solid var(--afps-border);
border-radius: 12px;
background: #fff;
box-shadow: var(--afps-shadow-xs);
}
.afps-attendance-register { padding: 0; }
.afps-attendance-register-head,
.afps-attendance-section-head {
display: flex;
min-height: 45px;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 10px 14px;
border-bottom: 1px solid #e7edf5;
background: #fbfcfe;
}
.afps-attendance-register-head h2,
.afps-attendance-section-head h2 { margin: 2px 0 0; color: var(--afps-text); font-size: 16px; line-height: 1.2; }
.afps-attendance-section-head p { margin: 3px 0 0; color: var(--afps-text-mute); font-size: 11px; }
.afps-attendance-eyebrow { display: block; color: var(--afps-brand); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.afps-attendance-roster-count {
display: inline-flex;
min-height: 26px;
align-items: center;
padding: 0 9px;
border: 1px solid #d7e3f5;
border-radius: 999px;
color: #375071;
background: #f4f8ff;
font-size: 10px;
font-weight: 750;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.afps-attendance-session-fields {
display: grid;
grid-template-columns: minmax(155px, .6fr) minmax(130px, .45fr) minmax(320px, 1.5fr);
gap: 10px;
padding: 10px 14px;
border-bottom: 1px solid #edf1f6;
background: #fff;
}
.afps-attendance-session-fields .afps-attendance-control input { border-color: #d7e0eb; background: #fff; }
.afps-attendance-list .afps-attendance-batch {
margin: 0;
padding: 7px 14px;
border: 0;
border-bottom: 1px solid #e7edf5;
border-radius: 0;
background: #f8fafc;
}
.afps-attendance-list .afps-attendance-batch button { min-height: 28px; }
.afps-attendance-list .afps-attendance-roster-table,
.afps-attendance-review-result .afps-table-wrap,
.afps-attendance-recent .afps-table-wrap { margin: 0; border: 0; border-radius: 0; box-shadow: none; }
.afps-attendance-list .afps-table-wrap table { margin: 0; }
.afps-attendance-roster-table th:first-child { width: 150px; }
.afps-attendance-roster-table th:nth-child(3) { width: 155px; }
.afps-attendance-roster-table th:last-child { width: 34%; }
.afps-attendance-roster-table select,
.afps-attendance-roster-table input[type="text"] { box-sizing: border-box; width: 100%; min-width: 0; min-height: 34px; margin: 0; border-color: #d7e0eb; border-radius: 7px; font-size: 11px; }
.afps-attendance-matricule { color: #284365; font-size: 11px; font-variant-numeric: tabular-nums; }
.afps-attendance-muted { color: #a0aabd; }
.afps-attendance-save-actions {
display: flex;
min-height: 48px;
align-items: center;
justify-content: space-between;
gap: 16px;
margin: 0;
padding: 8px 14px;
border-top: 1px solid #e7edf5;
background: #fbfcfe;
}
.afps-attendance-save-actions > span { color: var(--afps-text-mute); font-size: 10px; line-height: 1.4; }
.afps-attendance-save-actions .button { min-width: 126px; justify-content: center; }
.afps-attendance-summary { display: grid; grid-template-columns: repeat(4, minmax(105px, 1fr)); gap: 7px; padding: 8px; border-bottom: 1px solid #e7edf5; background: #fff; }
.afps-attendance-summary__item {
position: relative;
display: flex;
min-height: 44px;
align-items: center;
gap: 8px;
overflow: hidden;
padding: 7px 10px 7px 13px;
border: 1px solid #e0e7f0;
border-radius: 9px;
color: #5b6880;
background: #fbfcfe;
font-size: 10px;
font-weight: 700;
}
.afps-attendance-summary__item::before { position: absolute; inset: 0 auto 0 0; width: 3px; content: ""; background: #94a3b8; }
.afps-attendance-summary__item strong { color: var(--afps-text); font-size: 19px; line-height: 1; font-variant-numeric: tabular-nums; }
.afps-attendance-summary__item.is-present::before { background: #10b981; }
.afps-attendance-summary__item.is-late::before { background: #f59e0b; }
.afps-attendance-summary__item.is-absent::before { background: #ef4444; }
.afps-attendance-summary__item.is-excused::before { background: #64748b; }
.afps-attendance-status { display: inline-flex; min-height: 23px; align-items: center; padding: 0 8px; border: 1px solid #d6dee9; border-radius: 999px; color: #475569; background: #f8fafc; font-size: 9px; font-weight: 800; }
.afps-attendance-status.is-present { color: #047857; border-color: #a7f3d0; background: #ecfdf5; }
.afps-attendance-status.is-late { color: #b45309; border-color: #fde68a; background: #fffbeb; }
.afps-attendance-status.is-absent { color: #b91c1c; border-color: #fecaca; background: #fef2f2; }
.afps-attendance-status.is-excused { color: #475569; border-color: #cbd5e1; background: #f1f5f9; }
.afps-attendance-recent .afps-row-actions { text-align: right; }
.afps-attendance-recent td small { max-width: 42ch; }
.afps-attendance-empty { margin-top: 0; }
@media (max-width: 1050px) {
.afps-attendance-controls,
.afps-attendance-controls--review { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.afps-attendance-control--course { grid-column: auto; }
.afps-attendance-controls > .button { align-self: end; }
.afps-attendance-session-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.afps-attendance-control--topic { grid-column: 1 / -1; }
}
@media (max-width: 782px) {
.afps-attendance-list .afps-page-head { align-items: flex-start; }
.afps-attendance-list .afps-page-title { align-items: flex-start; flex-direction: column; gap: 3px; }
.afps-attendance-list .afps-page-actions { width: 100%; }
.afps-attendance-list .afps-page-actions .button { flex: 1 1 auto; justify-content: center; }
.afps-attendance-controls,
.afps-attendance-controls--review,
.afps-attendance-session-fields { grid-template-columns: 1fr; }
.afps-attendance-control--topic { grid-column: auto; }
.afps-attendance-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.afps-attendance-save-actions { align-items: stretch; flex-direction: column; }
.afps-attendance-save-actions .button { width: 100%; }
.afps-attendance-roster-table th:first-child { width: auto; }
}
@media (max-width: 520px) {
.afps-attendance-register-head,
.afps-attendance-section-head { align-items: flex-start; flex-direction: column; gap: 7px; }
.afps-attendance-summary { grid-template-columns: 1fr; }
}
/* ---- Grades: compact, data-first assessment workspace ------------------
Assessment creation now follows Admissions: the register remains the main
working surface and the form opens only when the user asks for it. */
.afps-grading-workspace { padding-top: 12px !important; }
.afps-grading-workspace > .afps-page-head {
align-items: center;
margin-bottom: 2px !important;
}
.afps-grading-workspace > .afps-page-head .afps-page-title {
display: flex;
min-width: 0;
align-items: baseline;
gap: 14px;
}
.afps-grading-workspace > .afps-page-head .afps-page-title h1 {
flex: 0 0 auto;
font-size: 26px !important;
}
.afps-grading-workspace > .afps-page-head .afps-subtitle {
max-width: none !important;
margin: 0;
font-size: 14px !important;
line-height: 1.35;
}
.afps-grading-workspace .afps-command-trigger { display: none; }
.afps-grading-workspace > .afps-workflow-hint { margin-bottom: 9px; }
.afps-grading-workspace > .afps-tabs { margin-bottom: 8px; }
.afps-grading-toolbar {
min-height: 0 !important;
margin-bottom: 8px !important;
padding: 4px !important;
}
.afps-grading-toolbar .afps-view-toggle { margin: 0; }
.afps-grading-toolbar .afps-toolbar__count { margin-left: auto; }
.afps-grading-assessments > .afps-table-wrap { margin-top: 0; }
.afps-grading-assessments .afps-table-wrap td:first-child { min-width: 170px; }
.afps-grading-assessments .afps-table-wrap td:nth-child(3) { min-width: 210px; }
.afps-grading-assessments .afps-table-wrap td:last-child { width: 1%; white-space: nowrap; }
.afps-grading-meta {
display: block;
margin-top: 2px;
color: var(--afps-text-mute);
font-size: 11px;
line-height: 1.35;
}
.afps-grading-workspace .afps-code {
color: #284365;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 12px;
}
.afps-grading-assessments .afps-row-actions {
flex-wrap: nowrap;
justify-content: flex-end;
}
.afps-grading-assessments .afps-row-actions .button {
min-height: 30px;
padding: 0 10px;
border-color: #bfd0ed;
color: var(--afps-brand);
background: #f7faff;
line-height: 28px;
}
.afps-new-assessment-modal .afps-modal--form {
width: min(760px, calc(100vw - 40px));
max-width: none;
max-height: calc(100vh - 40px);
}
.afps-new-assessment-modal .afps-modal-head { padding: 16px 22px 14px; }
.afps-new-assessment-modal .afps-modal-scroll {
padding: 18px 22px 22px;
background: #f8fafc;
}
.afps-new-assessment-modal .afps-field-grid { gap: 13px 14px; }
.afps-new-assessment-modal .afps-field--wide { grid-column: 1 / -1; }
.afps-new-assessment-modal .afps-field label { margin-bottom: 4px; }
.afps-new-assessment-modal .afps-field input,
.afps-new-assessment-modal .afps-field select { min-height: 40px; }
.afps-grading-form-intro {
margin: 0 0 16px;
color: var(--afps-text-mute);
font-size: 13px;
line-height: 1.5;
}
.afps-new-assessment-modal .afps-modal-actions {
margin-top: 0;
padding: 12px 22px 14px;
}
/* Shared quick-action popup. These forms used to replace the whole workspace
or sit permanently above the data table; the modal keeps the list visible
behind a focused, reference-style dialog. */
.afps-form-workspace-modal .afps-modal--form {
width: min(1120px, calc(100vw - 40px));
max-width: none;
max-height: calc(100vh - 40px);
}
.afps-form-workspace-modal .afps-modal-head {
flex: 0 0 auto;
padding: 17px 32px 15px;
}
.afps-form-workspace-modal .afps-modal-head h3 {
margin-top: 3px;
font-size: 21px;
line-height: 1.25;
}
.afps-form-workspace-modal .afps-modal-scroll {
flex: 1 1 auto;
min-height: 190px;
padding: 22px 32px 26px;
background: #f5f7fb;
}
.afps-form-workspace-modal .afps-modal-actions {
flex: 0 0 auto;
margin: 0;
padding: 13px 32px 16px;
background: #fff;
}
.afps-form-workspace-modal .afps-modal-actions__spacer { flex: 1 1 auto; }
.afps-form-workspace-modal .afps-popup-form,
.afps-form-workspace-modal .afps-form-workspace-content > .afps-form,
.afps-form-workspace-modal .afps-form-workspace-content > .afps-form-card {
margin: 0;
max-width: none;
border-radius: 12px;
box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
.afps-form-workspace-modal .afps-form-workspace-content > * + * { margin-top: 18px; }
.afps-form-workspace-modal .afps-actions[hidden],
.afps-form-workspace-modal .afps-form-actions[hidden] { display: none !important; }
.afps-form-workspace-modal .afps-form-section { padding-right: 22px; padding-left: 22px; }
.afps-form-workspace-modal .afps-form label,
.afps-form-workspace-modal .afps-field label { font-size: 13px; }
.afps-form-workspace-modal .afps-form input,
.afps-form-workspace-modal .afps-form select,
.afps-form-workspace-modal .afps-form textarea { font-size: 14px; }
.afps-form-workspace-modal .afps-form h2 { font-size: 17px; }
.afps-form-workspace-modal .afps-preview-loading,
.afps-form-workspace-modal .afps-preview-error { min-height: 180px; display: flex; align-items: center; justify-content: center; }
@media (max-width: 782px) {
.afps-form-workspace-modal { padding: 0; }
.afps-form-workspace-modal .afps-modal--form { width: 100%; max-height: 100%; border-radius: 0; }
.afps-form-workspace-modal .afps-modal-head,
.afps-form-workspace-modal .afps-modal-scroll,
.afps-form-workspace-modal .afps-modal-actions { padding-right: 18px; padding-left: 18px; }
}
.afps-screen--grading .afps-workflow-picker form { position: relative; }
.afps-workflow-picker__status {
position: absolute;
top: calc(100% + 5px);
right: 0;
min-height: 16px;
color: var(--afps-text-mute);
font-size: 11px;
font-weight: 600;
}
.afps-screen--grading .afps-workflow-picker form.is-loading select { opacity: .68; }
.afps-screen--grading .afps-workflow-picker form.is-loading button {
cursor: wait;
opacity: .78;
}
.afps-screen--grading .afps-workflow-picker form.is-loading button::before {
width: 13px;
height: 13px;
border: 2px solid currentColor;
border-top-color: transparent;
border-radius: 50%;
content: "";
animation: afps-spin .65s linear infinite;
}
@media (max-width: 782px) {
.afps-grading-workspace > .afps-page-head { align-items: flex-start; }
.afps-grading-workspace > .afps-page-head .afps-page-title { align-items: flex-start; flex-direction: column; gap: 3px; }
.afps-grading-workspace > .afps-page-head .afps-page-actions { width: 100%; }
.afps-grading-workspace > .afps-page-head .afps-page-actions .button { width: 100%; }
.afps-grading-toolbar .afps-toolbar__count { margin-left: 0; padding-left: 5px; }
.afps-new-assessment-modal { padding: 0; }
.afps-new-assessment-modal .afps-modal--form { width: 100%; max-height: 100%; border-radius: 0; }
.afps-new-assessment-modal .afps-field-grid { grid-template-columns: 1fr; }
.afps-new-assessment-modal .afps-field--wide { grid-column: auto; }
}
/* Fees final cascade overrides. These intentionally follow the shared app-shell
rules, which otherwise reset the Finance header padding and turn every GET
filter form back into a wrapping flex row. */
.afps-screen.afps-fees-workspace:not(.afps-screen--dashboard):not(.afps-screen--admissions) > .afps-page-head.afps-fees-page-head {
padding: 14px 20px 15px;
}
.afps-screen.afps-fees-workspace:not(.afps-screen--dashboard):not(.afps-screen--admissions) > .afps-page-head.afps-fees-page-head .afps-page-title h1 {
margin: 0;
font-size: 25px;
line-height: 1.15;
}
.afps-screen.afps-fees-workspace:not(.afps-screen--dashboard):not(.afps-screen--admissions) > .afps-page-head.afps-fees-page-head .afps-subtitle {
margin-top: 4px;
font-size: 13px;
line-height: 1.35;
}
.afps-wrap.afps-fees-workspace form[method="get"].afps-payment-register__filters {
display: grid;
grid-template-columns: repeat(4, minmax(95px, .8fr)) minmax(180px, 1.3fr) max-content;
align-items: end;
flex-wrap: nowrap;
gap: 10px;
margin: 0;
padding: 15px;
}
.afps-wrap.afps-fees-workspace form[method="get"].afps-payment-register__filters label {
display: block;
margin: 0 0 5px;
font-size: 11px;
}
.afps-wrap.afps-fees-workspace form[method="get"].afps-payment-register__filters input[type="search"],
.afps-wrap.afps-fees-workspace form[method="get"].afps-payment-register__filters select {
width: 100%;
min-width: 0;
min-height: 39px;
}
@media (max-width: 780px) {
.afps-screen.afps-fees-workspace:not(.afps-screen--dashboard):not(.afps-screen--admissions) > .afps-page-head.afps-fees-page-head {
padding: 12px 14px;
}
.afps-wrap.afps-fees-workspace form[method="get"].afps-payment-register__filters {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 560px) {
.afps-wrap.afps-fees-workspace form[method="get"].afps-payment-register__filters {
grid-template-columns: 1fr;
}
}
/* Outstanding-fees AJAX filters. This form lives inside the table card so it
deliberately follows the compact table-search treatment, not the generic
full-page GET form treatment above. */
.afps-wrap.afps-fees-workspace form.afps-outstanding-filters,
.afps-fees-workspace .afps-outstanding-filters {
display: flex;
align-items: flex-end;
flex-wrap: wrap;
gap: 9px;
margin: 0 !important;
padding: 11px 12px !important;
border: 0 !important;
border-bottom: 1px solid var(--afps-border) !important;
border-radius: 0 !important;
background: #fbfcfe !important;
box-shadow: none !important;
}
.afps-wrap.afps-fees-workspace form.afps-outstanding-filters label {
display: grid;
flex: 0 1 190px;
gap: 4px;
max-width: none;
margin: 0;
}
.afps-wrap.afps-fees-workspace form.afps-outstanding-filters .afps-outstanding-filters__student {
flex: 1 1 280px;
}
.afps-wrap.afps-fees-workspace form.afps-outstanding-filters .afps-fee-student-combobox {
width: 100%;
}
.afps-outstanding-filter-label {
color: #5d6e85;
font-size: 10px;
font-weight: 800;
letter-spacing: .04em;
line-height: 1;
text-transform: uppercase;
}
.afps-wrap.afps-fees-workspace form.afps-outstanding-filters input[type="search"],
.afps-wrap.afps-fees-workspace form.afps-outstanding-filters select {
width: 100%;
min-width: 0;
height: 38px;
margin: 0;
border-color: #bfccdb;
border-radius: 7px;
background-color: #fff;
}
.afps-wrap.afps-fees-workspace form.afps-outstanding-filters input[type="search"] {
padding-left: 35px;
}
.afps-outstanding-filters .button { min-height: 38px; white-space: nowrap; }
.afps-outstanding-filters .afps-table-result-count { margin-left: auto; padding: 0 4px 11px; }
.afps-outstanding-filters.is-loading,
.afps-fee-outstanding-table tbody.is-loading { opacity: .58; }
.afps-fee-outstanding-table tbody { transition: opacity 140ms ease; }
.afps-outstanding-print-heading { display: none; }
@media (max-width: 780px) {
.afps-wrap.afps-fees-workspace form.afps-outstanding-filters label,
.afps-wrap.afps-fees-workspace form.afps-outstanding-filters .afps-outstanding-filters__student { flex-basis: calc(50% - 5px); }
.afps-outstanding-filters .afps-table-result-count { margin-left: 0; }
}
@media (max-width: 560px) {
.afps-wrap.afps-fees-workspace form.afps-outstanding-filters label,
.afps-wrap.afps-fees-workspace form.afps-outstanding-filters .afps-outstanding-filters__student { flex-basis: 100%; }
.afps-outstanding-filters .button { flex: 1 1 auto; }
.afps-outstanding-filters .afps-table-result-count { width: 100%; padding-bottom: 0; }
}
@media print {
@page { size: A4 landscape; margin: 10mm; }
.afps-staff-sidebar,
.afps-staff-skip,
.afps-fees-page-head,
.afps-fees-navigation,
.afps-outstanding-filters,
.afps-fee-report-hero__actions,
.afps-fee-outstanding-table th:last-child,
.afps-fee-outstanding-table td:last-child { display: none !important; }
.afps-staff-portal { display: block !important; background: #fff !important; }
.afps-staff-main,
.afps-fees-workspace,
#afps-fee-tab-content { margin: 0 !important; padding: 0 !important; background: #fff !important; }
.afps-outstanding-print-heading { display: block; margin: 0 0 5mm; color: #172f55; }
.afps-outstanding-print-heading span { display: block; color: #52657f; font-size: 8pt; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.afps-outstanding-print-heading h2 { margin: 2mm 0 1mm; font-size: 16pt; }
.afps-outstanding-print-heading p { margin: 0; color: #52657f; font-size: 8.5pt; }
.afps-fee-report-hero { margin: 0 0 5mm; padding: 4mm 5mm; border: 1px solid #173f72; border-radius: 0; background: #fff !important; color: #172f55 !important; box-shadow: none; }
.afps-fee-report-hero span,
.afps-fee-report-hero p { color: #52657f !important; }
.afps-fee-report-hero strong { color: #172f55 !important; font-size: 23pt; }
.afps-fee-outstanding-table { overflow: visible !important; border-color: #64748b !important; border-radius: 0 !important; box-shadow: none !important; }
.afps-fee-outstanding-table table { width: 100%; min-width: 0 !important; font-size: 9pt; }
.afps-fee-outstanding-table thead { display: table-header-group; }
.afps-fee-outstanding-table tr { break-inside: avoid; }
.afps-fee-outstanding-table th,
.afps-fee-outstanding-table td { padding: 3mm 3.5mm; border-color: #9aa9bb; }
.afps-fee-outstanding-table th { color: #172f55 !important; background: #e8edf4 !important; }
.afps-fee-table-balance { color: #a82017 !important; }
}
/* Compact the Fees workspace chrome into one page header. */
.afps-screen.afps-fees-workspace:not(.afps-screen--dashboard):not(.afps-screen--admissions) > .afps-page-head.afps-fees-page-head {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 0;
width: 100%;
padding: 10px 20px 12px;
}
.afps-fees-page-head__utility {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
margin-bottom: 10px;
padding-bottom: 8px;
border-bottom: 1px solid #dce8f8;
}
.afps-fees-page-head__utility:empty { display: none; }
.afps-fees-page-head__utility .afps-command-trigger { flex: 0 0 auto; }
.afps-fees-page-head__utility .afps-module-bar {
flex: 1 1 auto;
min-width: 0;
min-height: 30px;
margin: 0;
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
backdrop-filter: none;
}
.afps-fees-page-head__content {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
min-width: 0;
}
.afps-fees-page-head__content .afps-page-title { min-width: 0; }
.afps-fees-page-head__actions {
display: flex;
flex: 0 0 auto;
align-items: center;
gap: 8px;
}
.afps-payment-register { gap: 14px; }
.afps-payment-register__heading {
padding: 10px 18px;
border-radius: 10px;
box-shadow: none;
}
.afps-payment-register__heading p {
max-width: none;
margin: 0;
font-size: 13px;
line-height: 1.4;
}
@media (max-width: 780px) {
.afps-screen.afps-fees-workspace:not(.afps-screen--dashboard):not(.afps-screen--admissions) > .afps-page-head.afps-fees-page-head { padding: 10px 14px; }
.afps-fees-page-head__utility { align-items: flex-start; flex-direction: column; }
.afps-fees-page-head__utility .afps-module-bar { width: 100%; }
.afps-fees-page-head__content { align-items: flex-start; flex-direction: column; }
.afps-fees-page-head__actions { width: 100%; }
.afps-fees-page-head__actions .button { width: 100%; justify-content: center; }
}
/* Keep field labels directly above their controls, with the action aligned to
the control row. This overrides the legacy grid that split the fields. */
.afps-fees-workspace .afps-ledger-picker--simple {
display: grid !important;
grid-template-columns: minmax(300px, 1fr) minmax(160px, .38fr) auto;
grid-template-rows: auto auto;
align-items: end;
gap: 7px 14px;
max-width: none;
}
.afps-fees-workspace .afps-ledger-picker--simple > label {
margin: 0;
padding: 0;
}
.afps-fees-workspace .afps-ledger-picker--simple > label:nth-of-type(1) { grid-column: 1; grid-row: 1; }
.afps-fees-workspace .afps-ledger-picker--simple > .afps-ledger-student-search { grid-column: 1 !important; grid-row: 2 !important; }
.afps-fees-workspace .afps-ledger-picker--simple > label:nth-of-type(2) { grid-column: 2; grid-row: 1; }
.afps-fees-workspace .afps-ledger-picker--simple > #afps-ledger-year { grid-column: 2 !important; grid-row: 2 !important; }
.afps-fees-workspace .afps-ledger-picker--simple > .button {
grid-column: 3 !important;
grid-row: 2 !important;
min-width: 0;
}
.afps-fees-workspace .afps-ledger-picker--simple > .afps-ledger-student-search,
.afps-fees-workspace .afps-ledger-picker--simple > #afps-ledger-year {
width: 100%;
}
.afps-fees-workspace .afps-ledger-picker--simple > .button {
margin: 0;
justify-self: start;
white-space: nowrap;
}
@media (max-width: 680px) {
.afps-fees-workspace .afps-ledger-picker--simple {
grid-template-columns: 1fr;
align-items: stretch;
}
.afps-fees-workspace .afps-ledger-picker--simple > label,
.afps-fees-workspace .afps-ledger-picker--simple > .afps-ledger-student-search,
.afps-fees-workspace .afps-ledger-picker--simple > #afps-ledger-year,
.afps-fees-workspace .afps-ledger-picker--simple > .button {
grid-column: 1 !important;
grid-row: auto !important;
}
.afps-fees-workspace .afps-ledger-picker--simple > .button { justify-self: stretch; }
}
/* Controlled result publication */
.afps-results-console{display:grid;gap:16px}.afps-results-console .afps-card{background:#fff;border:1px solid #dbe4f0;border-radius:12px;padding:18px;box-shadow:0 2px 7px rgba(15,23,42,.035)}
.afps-results-intro,.afps-results-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:24px}.afps-results-intro h2,.afps-results-heading h2{margin:3px 0 6px}.afps-results-intro p,.afps-results-heading p{margin:0;color:#64748b}
.afps-results-create{min-width:190px}.afps-results-create summary{list-style:none;text-align:center;cursor:pointer}.afps-results-create[open]{min-width:min(680px,100%)}.afps-results-create form{margin-top:14px}.afps-results-layout{display:grid;grid-template-columns:minmax(240px,300px) 1fr;gap:16px;align-items:start}.afps-results-main{display:grid;gap:16px}
.afps-results-filters{display:flex;flex-wrap:nowrap!important;gap:8px;align-items:end;overflow-x:auto;overflow-y:hidden;padding:12px 14px!important;scrollbar-width:thin}.afps-results-filters label{display:grid;flex:0 0 126px;gap:4px;min-width:0}.afps-results-filters label:nth-of-type(2){flex-basis:224px}.afps-results-filters .afps-results-filter-search{flex-basis:176px}.afps-results-filters label>span{overflow:hidden;color:#52627a;font-size:10px;font-weight:750;letter-spacing:.045em;text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap}.afps-results-filters select,.afps-results-filters input{width:100%;min-height:34px}.afps-results-filter-actions{display:flex;flex:0 0 auto;gap:6px;align-items:center;white-space:nowrap}.afps-results-filter-actions .button{min-height:34px;padding:3px 10px}.afps-results-filter-actions .is-disabled{opacity:.45;pointer-events:none}.afps-results-filter-status{display:inline-flex;width:16px;height:16px;align-items:center;justify-content:center;overflow:hidden;color:#64748b;font-size:0}.afps-results-console.is-loading .afps-results-filter-status:before{width:12px;height:12px;border:2px solid #cbd5e1;border-top-color:#3156d3;border-radius:50%;content:"";animation:afps-spin .65s linear infinite}.afps-results-console.is-loading .afps-results-layout{opacity:.58;pointer-events:none;transition:opacity .16s ease}@keyframes afps-spin{to{transform:rotate(360deg)}}
.afps-results-periods{display:grid;gap:7px;position:sticky;top:45px;max-height:calc(100vh - 70px);overflow:auto}.afps-results-periods__heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}.afps-results-periods__heading h3{margin:0}.afps-results-periods__heading span{font-size:11px;font-weight:700;color:#64748b}.afps-result-period{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px;border:1px solid #e2e8f0;border-radius:9px;color:#172554;text-decoration:none}.afps-result-period:hover,.afps-result-period.is-active{border-color:#3156d3;background:#eff6ff}.afps-result-period span{display:grid;gap:2px}.afps-result-period small{color:#64748b}.afps-result-period em{font-style:normal}.afps-results-no-match{padding:18px 8px;text-align:center;color:#64748b}.afps-results-no-match strong{display:block;color:#334155}.afps-results-no-match p{margin:5px 0 0}
.afps-readiness-meter{height:8px;background:#e2e8f0;border-radius:99px;overflow:hidden;margin:17px 0}.afps-readiness-meter span{display:block;height:100%;background:linear-gradient(90deg,#3156d3,#16a34a)}.afps-result-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:end}.afps-result-actions form{display:flex;gap:7px;align-items:end}.afps-result-actions label{display:grid;gap:4px;font-size:12px;font-weight:600}.afps-result-actions input[type=text]{min-width:210px}
.afps-scheme{border-top:1px solid #e2e8f0;padding:12px 0}.afps-scheme summary{cursor:pointer;display:flex;justify-content:space-between;gap:12px}.afps-scheme summary span{color:#64748b}.afps-scheme form{margin-top:12px}.afps-scheme-grid{display:grid;grid-template-columns:repeat(3,minmax(130px,1fr));gap:10px;margin-bottom:10px}.afps-scheme-grid label{display:grid;gap:5px;font-size:12px;font-weight:600}.afps-scheme-grid input{width:100%}
@media(max-width:900px){.afps-results-layout{grid-template-columns:1fr}.afps-results-periods{position:static;max-height:none}.afps-results-intro{display:grid}.afps-results-create,.afps-results-create[open]{min-width:0}.afps-scheme-grid{grid-template-columns:repeat(2,minmax(130px,1fr))}}@media(max-width:640px){.afps-results-filters{margin-inline:-2px}.afps-scheme-grid{grid-template-columns:1fr}.afps-result-actions form{width:100%;flex-wrap:wrap}.afps-result-actions input[type=text]{min-width:0;flex:1}.afps-results-heading{display:grid}}
.afps-bulk-run-card {
margin: 18px 0;
padding: 18px 20px;
border: 1px solid var(--afps-border);
border-left: 4px solid #0044aa;
border-radius: 10px;
background: var(--afps-surface);
box-shadow: var(--afps-shadow-xs);
}
.afps-bulk-run-card.has-error { border-left-color: #b91c1c; }
.afps-bulk-run-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.afps-bulk-run-head h2 { margin: 3px 0 2px !important; }
.afps-bulk-run-head p { margin: 0; color: var(--afps-text-mute); }
.afps-bulk-status { padding: 5px 10px; border-radius: 999px; background: #e8f0ff; color: #0044aa; font-size: 12px; font-weight: 700; }
.afps-bulk-progress { height: 9px; margin: 16px 0 11px; overflow: hidden; border-radius: 999px; background: #e7edf5; }
.afps-bulk-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#0044aa,#3478df); transition: width .25s ease; }
.afps-bulk-counts { display: flex; flex-wrap: wrap; gap: 10px 20px; color: var(--afps-text-mute); font-size: 12px; }
.afps-bulk-counts strong { color: var(--afps-text); }
.afps-bulk-message { min-height: 18px; margin: 10px 0 0; color: var(--afps-text-mute); }
.afps-bulk-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.afps-bulk-actions form { display: flex; gap: 8px; margin: 0; }
.afps-bulk-actions .is-disabled { pointer-events: none; opacity: .5; }
.afps-bulk-history { margin: 10px 0 18px; }
.afps-bulk-history summary { cursor: pointer; font-weight: 600; color: #0044aa; }
.afps-bulk-history div { display: grid; gap: 6px; margin-top: 9px; }
.afps-bulk-history a { display: flex; gap: 7px; align-items: center; padding: 8px 10px; border: 1px solid var(--afps-border); border-radius: 7px; background: var(--afps-surface); text-decoration: none; }
.afps-bulk-history a span { margin-left: auto; color: var(--afps-text-mute); font-size: 12px; }
.afps-bulk-check label { display: inline-flex !important; align-items: center; gap: 8px; font-weight: 500 !important; }
.afps-page-actions .button .dashicons { width: 16px; height: 16px; font-size: 16px; line-height: 1; vertical-align: text-bottom; }
@media (max-width: 700px) { .afps-bulk-run-head { display: block; } .afps-bulk-status { display: inline-block; margin-top: 8px; } }
/* Independent admission notes and expandable field changes. */
.afps-note-composer > summary { cursor: pointer; display: list-item; width: fit-content; margin: 0 0 12px; }
.afps-note-composer label { display: block; font-weight: 600; }
.afps-note-composer textarea { box-sizing: border-box; width: 100%; }
.afps-note-actions { display: flex; gap: 8px; margin: 10px 0 16px; }
.afps-note-list { display: grid; gap: 12px; margin: 8px 0 0; padding: 0; list-style: none; }
.afps-note-list > li { margin: 0; padding: 14px; border: 1px solid #dce4ef; border-radius: 6px; background: #f8faff; }
.afps-note-meta { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.afps-note-meta small { color: #526277; }
.afps-note-body, .afps-activity-value { white-space: pre-wrap; overflow-wrap: anywhere; }
.afps-note-list .afps-note-body { margin: 8px 0 0; }
.afps-note-feedback:not(:empty) { margin: 8px 0; }
.afps-activity-event { min-width: 0; }
.afps-activity-event > summary { cursor: pointer; border-radius: 3px; }
.afps-activity-event > summary:focus-visible, .afps-note-composer > summary:focus-visible { outline: 2px solid #0044aa; outline-offset: 3px; }
.afps-activity-hint { display: block; color: #0044aa; font-size: 11px; margin-top: 4px; text-decoration: underline; }
.afps-activity-event[open] .afps-activity-hint { display: none; }
.afps-activity-details { margin-top: 10px; padding: 10px; border: 1px solid #dce4ef; border-radius: 5px; background: #f8faff; }
.afps-activity-change + .afps-activity-change { margin-top: 10px; padding-top: 8px; border-top: 1px solid #dce4ef; }
.afps-activity-value { display: block; margin-top: 4px; font-size: 12px; }
/* Actions belong to each note; expanded forms use the available card width. */
.afps-note-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 10px; }
.afps-note-controls > details[open] { flex-basis: 100%; }
.afps-note-controls .afps-note-composer > summary { margin-bottom: 0; }
.afps-note-controls .afps-note-composer[open] > summary { margin-bottom: 10px; }
.afps-note-controls form { margin-top: 10px; }
.afps-note-controls .afps-note-actions { margin-bottom: 0; }
.afps-note-edited { display: block; margin-top: 8px; color: #526277; }
.afps-note-controls .afps-note-composer > summary.afps-note-link {
display: block;
width: fit-content;
margin-left: auto;
min-width: 0;
min-height: 0;
padding: 0;
border: 0;
border-radius: 0;
background: none;
box-shadow: none;
color: #0044aa;
font-size: 13px;
font-weight: 400;
line-height: 1.5;
text-decoration: underline;
text-underline-offset: 2px;
list-style: none;
}
.afps-note-link::-webkit-details-marker { display: none; }
.afps-note-controls .afps-note-edit > summary.afps-note-link {
padding: 2px 8px;
border: 1px solid #aebdde;
border-radius: 4px;
background: #fff;
text-decoration: none;
}
.afps-note-controls .afps-note-delete > summary.afps-note-link {
color: #a12424;
}
.afps-note-controls .afps-note-composer > summary.afps-note-link:hover { text-decoration: none; }