/* ============================================================================
Project : UT School ERP SaaS | Web (Blazor)
File : app-theme.css
Purpose : Official Design System — PB-03 (Color System) + PB-05 (Design
System) translated to CSS. No other colors/fonts/icons may be
used anywhere in the app.
============================================================================ */
:root {
/* ---- PB-03 Colors ---- */
--color-primary: #0B3D91;
--color-primary-dark: #082C6B;
/* [V2.5 Phase 5.7] Brand blue BEHIND white text (buttons, table heads). Same as primary in light;
in dark, primary turns light (for text/links) while this stays deep. */
--color-primary-fill: #0B3D91;
--color-secondary: #1E88E5;
--color-success: #006400;
--color-warning: #FF9800;
--color-error: #8B0000;
--color-info: #29B6F6;
--color-background: #F5F7FB;
/* [V2.7.1] Behind the pages only (not the pale fills inside cards that use --color-background):
a soft grey so the white cards stand apart from it. */
--page-background: #DFE4EA;
--color-surface: #FFFFFF;
--color-text-primary: #0A192F;
--color-text-secondary: #5F6B7A;
--color-text-disabled: #A0AEC0;
--color-divider: #E2E8F0;
--color-border-focus: #0B3D91;
--color-border-disabled: #CBD5E1;
--gradient-brand: linear-gradient(135deg, #0B3D91 0%, #1E88E5 100%);
/* [V2.7.1] Brand colour tokens - an Owner's own colour replaces these (and the primary
tokens above) from NavMenu (Services/BrandTheme.cs), light theme only.
--brand-rgb : the brand colour as "r, g, b" for the pale tints rgba(var(--brand-rgb), .08)
--brand-bar : sidebar / top bar gradient start (and text on white tabs over the bar)
--brand-bar-end : the gradient's darker end. Dark theme keeps the navy bars. */
--brand-rgb: 11, 61, 145;
--brand-bar: #0B3D91;
--brand-bar-end: #0A3480;
/* ---- PB-05 Spacing ---- */
--space-xs: 4px;
--space-sm: 8px;
--space-md: 12px;
--space-standard: 16px;
--space-lg: 20px;
--space-xl: 24px;
--space-section: 32px;
/* ---- PB-05 Radius ---- */
--radius-button: 16px;
--radius-card: 16px;
--radius-dialog: 20px;
--radius-input: 14px;
--radius-pill: 999px;
/* ---- PB-05 Shadows (soft only) ---- */
--shadow-card: 0 1px 2px rgba(10,25,47,0.04), 0 4px 12px rgba(10,25,47,0.05);
--shadow-card-hover: 0 2px 4px rgba(10,25,47,0.06), 0 10px 24px rgba(10,25,47,0.08);
--shadow-dialog: 0 20px 50px rgba(10,25,47,0.22);
--shadow-fab: 0 6px 16px rgba(var(--brand-rgb), 0.28);
--sidebar-width: 264px;
/* ---- [V2.4] Design System tokens (see "Design System" at the end) ---- */
/* Card accent palette: dark, print-safe, clearly distinct from each other. */
--accent-navy: #0B3D91;
--accent-green: #006400;
--accent-amber: #B45309;
--accent-purple: #5B2C94;
--accent-teal: #0F766E;
--accent-slate: #475569;
--accent-brown: #7C4A1E;
--accent-red: #8B0000;
/* Order a tile group hands them out in. Red comes last on purpose: it reads
as "danger", so a tile only gets it when the page asks for it
(.erp-tone-red on overdue / absences / expenses ...), never by position. */
--accent-1: var(--accent-navy);
--accent-2: var(--accent-green);
--accent-3: var(--accent-amber);
--accent-4: var(--accent-purple);
--accent-5: var(--accent-teal);
--accent-6: var(--accent-slate);
--accent-7: var(--accent-brown);
--accent-8: var(--accent-red);
--accent-width: 4px;
/* Status vocabulary - every badge / pill / state figure uses these. */
--status-success-bg: rgba(0,100,0,0.11); --status-success-fg: #006400;
--status-danger-bg: rgba(139,0,0,0.10); --status-danger-fg: #8B0000;
--status-warning-bg: rgba(217,119,6,0.15); --status-warning-fg: #8A4B00;
--status-info-bg: rgba(var(--brand-rgb), 0.09); --status-info-fg: #0B3D91;
--status-neutral-bg: rgba(71,85,105,0.12); --status-neutral-fg: #475569;
--motion-fast: 160ms;
}
* { box-sizing: border-box; }
html {
/* Without this, Android WebView/Chrome Mobile's "font boosting" quietly
inflates font sizes on narrow columns for readability - it's what was
making the Login floating-labels render far larger than their 14px CSS
value and wrap/overflow their input box. */
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body {
margin: 0;
font-family: 'Poppins', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: var(--page-background);
color: var(--color-text-primary);
-webkit-font-smoothing: antialiased;
/* [V2.7.1] Base colour under the pictures; the light theme's inside pages get a picture below. */
}
/* [V2.7.1] Inside pages, light theme only: the grey picture with rings, its black dots removed (9 KB WebP /
26 KB JPEG), spread once over the page (the rings must not repeat) under a 55% white veil so
page titles, the line under them and section headings - dark text straight on it - stay readable.
The login page has its own (neon) picture over it; the dark theme sets its own below. */
html:not([data-theme="dark"]) body {
background-image: linear-gradient(rgba(255,255,255,0.55), rgba(255,255,255,0.55)), url('/images/app-pages-bg-v3.jpg');
background-image: linear-gradient(rgba(255,255,255,0.55), rgba(255,255,255,0.55)), image-set(url('/images/app-pages-bg-v3.webp') type('image/webp'), url('/images/app-pages-bg-v3.jpg') type('image/jpeg'));
background-size: cover;
background-position: center;
background-attachment: fixed;
}
a { color: var(--color-secondary); text-decoration: none; }
/* ---------------- Material Symbols (Icon System — PB-05 §12) ---------------- */
.material-symbols-rounded {
/* [V2.5] Base ligature rules (were in Google's stylesheet before the font was self-hosted). */
font-family: 'Material Symbols Rounded';
font-weight: 500;
font-style: normal;
letter-spacing: normal;
text-transform: none;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
font-feature-settings: 'liga';
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
vertical-align: middle;
line-height: 1;
font-size: 20px;
display: inline-flex;
}
.material-symbols-rounded.filled { font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24; }
/* ---------------- Typography (PB-05 §8) ---------------- */
h1, .erp-h1 { font-size: 26px; font-weight: 600; margin: 0; color: var(--color-text-primary); letter-spacing: -0.2px; }
h2, .erp-h2 { font-size: 20px; font-weight: 600; margin: 0; color: var(--color-text-primary); }
h3, .erp-h3 { font-size: 16px; font-weight: 600; margin: 0; color: var(--color-text-primary); }
.erp-subheading { font-size: 14px; font-weight: 500; color: var(--color-text-secondary); }
.erp-body { font-size: 14px; font-weight: 400; color: var(--color-text-primary); }
.erp-caption { font-size: 12px; font-weight: 400; color: var(--color-text-secondary); }
/* ---------------- Layout Shell ---------------- */
.app-shell { display: flex; min-height: 100vh; }
.app-main { flex: 1; margin-inline-start: var(--sidebar-width); display: flex; flex-direction: column; min-width: 0; }
.app-main-full { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 100vh; min-width: 0; }
.app-topbar {
height: 68px;
background: var(--color-primary-fill);
background-image: linear-gradient(180deg, var(--brand-bar) 0%, var(--brand-bar-end) 100%);
border-bottom: 1px solid rgba(255,255,255,0.12);
display: flex;
align-items: center;
padding: 0 var(--space-xl);
position: sticky;
top: 0;
z-index: 5;
gap: var(--space-md);
}
.app-topbar-icon { color: white; font-size: 22px; }
.app-topbar-title { font-weight: 600; color: white; font-size: 17px; }
.app-topbar-school-name { font-weight: 600; color: white; font-size: 17px; }
.app-topbar-school-sep { color: rgba(255,255,255,0.4); font-size: 17px; }
.app-topbar-spacer { flex: 1; }
.app-topbar-user { display: flex; align-items: center; gap: var(--space-sm); color: rgba(255,255,255,0.8); font-size: 13px; }
.app-topbar-avatar-wrap { position: relative; width: 44px; height: 44px; flex-shrink: 0; }
.app-topbar-avatar {
width: 44px; height: 44px; border-radius: 50%;
background: var(--gradient-brand); color: #fff;
display: flex; align-items: center; justify-content: center;
font-size: 16px; font-weight: 600; flex-shrink: 0;
position: relative; z-index: 2;
}
.app-topbar-avatar-photo {
background-size: cover; background-position: center; background-repeat: no-repeat;
}
.app-topbar-user-name { font-weight: 700; color: white; }
/* [V2.4] Static ring + online dot - the spinning ring and pinging dot were
two never-ending animations on every single page. */
.app-topbar-avatar-ring {
position: absolute; inset: -3px; border-radius: 50%;
border: 2px solid rgba(255,255,255,0.35);
}
.app-topbar-avatar-online {
position: absolute; bottom: -1px; right: -1px; z-index: 3;
width: 10px; height: 10px; border-radius: 50%;
background: var(--color-success);
border: 2px solid var(--brand-bar);
}
/* [V2.7.1] No fixed width: the page fills whatever the screen and zoom leave
next to the sidebar (a 1160px cap left an empty strip on the right at
90-100% zoom on 1920px screens). */
.app-content { padding: var(--space-xl); }
/* ---------------- Sidebar ---------------- */
.app-sidebar {
width: var(--sidebar-width);
background: var(--color-primary-fill);
background-image: linear-gradient(180deg, var(--brand-bar) 0%, var(--brand-bar-end) 100%);
color: white;
position: fixed;
inset-inline-start: 0;
top: 0;
bottom: 0;
display: flex;
flex-direction: column;
padding: var(--space-xl) var(--space-standard);
z-index: 10;
overflow: hidden;
}
.app-sidebar-brand { display: flex; align-items: center; gap: var(--space-md); margin-bottom: var(--space-section); padding: 0 var(--space-sm); flex-shrink: 0; }
.app-sidebar-brand-icon {
width: 70px; height: 70px; border-radius: 50%;
background: rgba(255,255,255,0.14);
display: flex; align-items: center; justify-content: center;
font-size: 38.5px; flex-shrink: 0;
overflow: hidden;
}
.app-sidebar-brand-icon-img { background: transparent; padding: 0; }
.app-sidebar-brand-icon img { width: 118%; height: 118%; object-fit: cover; border-radius: 50%; }
.app-sidebar-brand-title { font-weight: 600; font-size: 16.8px; letter-spacing: 0.2px; }
.app-sidebar-brand-tagline { font-size: 11.8px; opacity: 0.7; letter-spacing: 0.3px; }
.app-sidebar-search {
display: flex; align-items: center; gap: 8px;
margin: 0 var(--space-sm) var(--space-md); padding: 9px 12px;
border-radius: var(--radius-button);
background: rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.14);
flex-shrink: 0;
}
.app-sidebar-search .material-symbols-rounded { font-size: 17px; opacity: 0.7; flex-shrink: 0; }
.app-sidebar-search input {
background: transparent; border: none; outline: none; color: white;
font-size: 13px; width: 100%; font-family: inherit;
}
/* the box ships readonly (anti Chrome-autofill) - keep it looking & feeling normal */
.app-sidebar-search input[readonly] { cursor: text; opacity: 1; }
.app-sidebar-search input::placeholder { color: rgba(255,255,255,0.55); }
/* Detect a browser autofill on the sidebar search: Chrome runs this animation
on any field it auto-fills - uiHelpers.js listens for it and wipes the value. */
@keyframes onAutoFillSidebar { from { /* no-op marker */ } to { /* no-op marker */ } }
.app-sidebar-search input:-webkit-autofill { animation-name: onAutoFillSidebar; animation-duration: 1ms; }
.app-sidebar-section-label {
font-size: 10.5px; font-weight: 600; text-transform: uppercase;
letter-spacing: 0.6px; opacity: 0.55; padding: 0 var(--space-standard);
margin: var(--space-sm) 0 var(--space-xs);
}
.app-sidebar-section-label.erp-sidebar-hidden,
.app-sidebar-link.erp-sidebar-hidden { display: none !important; }
/* ---------------- Notification Bell (topbar, before name/photo) ---------------- */
.notif-bell-wrap { position: relative; display: flex; align-items: center; margin-right: var(--space-sm); }
.notif-bell-btn {
background: none; border: none; padding: 6px; cursor: pointer;
display: flex; align-items: center; justify-content: center;
position: relative; border-radius: 50%;
transition: background 0.15s ease;
}
.notif-bell-btn:hover { background: rgba(255,255,255,0.08); }
.notif-bell-icon { font-size: 22px; color: #FFC107; }
.notif-bell-badge {
position: absolute; top: 0px; right: 0px;
background: var(--color-error); color: #fff;
font-size: 9px; font-weight: 700; line-height: 1;
min-width: 15px; height: 15px; border-radius: var(--radius-pill);
display: flex; align-items: center; justify-content: center;
padding: 0 3px; border: 1.5px solid var(--color-primary-dark);
}
.notif-backdrop {
position: fixed; inset: 0; z-index: 990; background: transparent;
}
.notif-panel {
position: absolute; top: calc(100% + 8px); right: 0; left: auto; z-index: 991;
width: 340px; max-width: 86vw;
background: var(--color-surface); color: var(--color-text-primary);
border-radius: var(--radius-card); box-shadow: var(--shadow-dialog);
overflow: hidden;
}
.notif-panel-header {
display: flex; align-items: center; justify-content: space-between;
padding: var(--space-sm) var(--space-standard);
border-bottom: 1px solid var(--color-divider);
font-size: 13px; font-weight: 700; color: var(--color-text-primary);
}
.notif-mark-all {
background: none; border: none; cursor: pointer;
font-size: 11px; font-weight: 600; color: var(--color-primary);
padding: 0;
}
.notif-panel-body { max-height: 360px; overflow-y: auto; }
.notif-empty {
padding: var(--space-xl) var(--space-standard); text-align: center;
font-size: 12.5px; color: var(--color-text-secondary);
}
.notif-item {
display: flex; align-items: flex-start; gap: var(--space-sm);
padding: var(--space-sm) var(--space-standard); cursor: pointer;
border-bottom: 1px solid var(--color-divider);
transition: background 0.12s ease;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--color-background); }
.notif-item-unread { background: rgba(30,136,229,0.06); }
.notif-dot {
width: 8px; height: 8px; border-radius: 50%; background: var(--color-secondary);
margin-top: 5px; flex-shrink: 0;
}
.notif-dot-hidden { visibility: hidden; }
.notif-item-body { min-width: 0; flex: 1; }
.notif-item-title { font-size: 12.5px; font-weight: 700; color: var(--color-text-primary); }
.notif-item-message {
font-size: 12px; color: var(--color-text-secondary); margin-top: 2px;
overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
-webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.notif-item-time { font-size: 10.5px; color: var(--color-text-disabled); margin-top: 4px; }
.app-sidebar-links {
display: flex; flex-direction: column; gap: 2px; flex: 1;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: thin;
scrollbar-color: rgba(255,255,255,0.3) transparent;
}
.app-sidebar-links::-webkit-scrollbar { width: 6px; }
.app-sidebar-links::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.3); border-radius: 3px; }
.app-sidebar-links::-webkit-scrollbar-track { background: transparent; }
.app-sidebar-link {
display: flex; align-items: center; gap: var(--space-md);
padding: var(--space-sm) var(--space-standard);
border-radius: var(--radius-button);
color: white; opacity: 0.78; font-size: 14px; font-weight: 500;
transition: background 0.2s ease, opacity 0.2s ease;
position: relative;
}
.app-sidebar-link .material-symbols-rounded { font-size: 20px; }
.app-sidebar-link:hover {
background: rgba(255,255,255,0.24);
opacity: 1;
z-index: 2;
}
.app-sidebar-link.active { background: rgba(255,255,255,0.16); opacity: 1; font-weight: 600; }
.app-sidebar-link.active .material-symbols-rounded { font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24; }
/* ---------------- Collapsible sidebar category (NavGroup.razor) ---------------- */
.app-nav-group { display: flex; flex-direction: column; }
.app-nav-group-summary {
cursor: pointer; list-style: none; user-select: none;
justify-content: flex-start;
/* The category header must read as the parent, not just another link -
fuller brightness/weight than a regular option so the two are never
confused at a glance. */
opacity: 0.95; font-weight: 700;
}
.app-nav-group-summary::-webkit-details-marker { display: none; }
.app-nav-group-summary::marker { content: ""; }
.app-nav-group-chevron { margin-left: auto; font-size: 18px !important; opacity: 0.6; transition: transform 0.2s ease; flex-shrink: 0; }
.app-nav-group[open] > .app-nav-group-summary .app-nav-group-chevron { transform: rotate(180deg); }
.app-nav-group-body {
display: flex; flex-direction: column; gap: 2px;
padding: 2px 0 2px var(--space-lg);
margin-left: var(--space-sm);
border-left: 1px solid rgba(255,255,255,0.14);
}
.app-nav-group-body .app-sidebar-link {
font-size: 13.2px; padding: 6px var(--space-standard);
/* Lighter than the category header above it (opacity 0.95/weight 700) so
parent vs. child is obvious without reading the text. */
opacity: 0.62; font-weight: 400;
}
.app-nav-group-body .app-sidebar-link:hover,
.app-nav-group-body .app-sidebar-link.active { opacity: 1; }/* A group whose links are all unauthorised (AuthorizeView renders nothing) renders an
empty body - hide the whole category so no dangling, link-less header ever shows.
uiHelpers.js applies the same rule as a fallback for browsers without :has(). */
.app-nav-group:not(:has(.app-nav-group-body .app-sidebar-link)) { display: none; }
.app-nav-group.erp-sidebar-hidden { display: none !important; }
.app-sidebar-footer { border-top: 1px solid rgba(255,255,255,0.15); padding-top: var(--space-standard); flex-shrink: 0; }
.app-sidebar-logout {
display: flex; align-items: center; gap: var(--space-md);
background: transparent; border: none; color: white; opacity: 0.78;
font-size: 14px; font-weight: 500; cursor: pointer; padding: var(--space-sm) var(--space-standard);
border-radius: var(--radius-button); width: 100%;
transition: background 0.2s ease, opacity 0.2s ease;
position: relative;
}
.app-sidebar-logout:hover { background: rgba(139,0,0,0.2); opacity: 1; }
/* ---------------- Sidebar - Mobile (off-canvas drawer) ----------------
Desktop keeps the sidebar permanently docked (.app-main's margin-inline-start
above). Below this breakpoint there's no room for a docked 264px sidebar next
to real content, so it becomes a slide-in drawer instead, toggled by the
checkbox hack in MainLayout.razor (no JS interop needed). */
.app-sidebar-toggle-checkbox { display: none; }
.app-topbar-menu-btn { display: none; }
.app-sidebar-backdrop { display: none; }
@media (max-width: 900px) {
.app-main { margin-inline-start: 0; }
.app-content { padding: var(--space-standard); }
.app-sidebar {
inset-inline-start: calc(var(--sidebar-width) * -1);
transition: inset-inline-start 0.25s ease;
z-index: 60;
}
.app-sidebar-toggle-checkbox:checked ~ .app-sidebar {
inset-inline-start: 0;
box-shadow: 0 0 32px rgba(0,0,0,0.35);
}
.app-topbar-menu-btn {
display: inline-flex;
align-items: center;
justify-content: center;
color: white;
font-size: 24px;
cursor: pointer;
margin-inline-end: var(--space-xs);
flex-shrink: 0;
}
.app-topbar { padding: 0 var(--space-standard); gap: var(--space-sm); }
.app-topbar-icon { display: none; }
.app-topbar-school-name, .app-topbar-school-sep { display: none; }
.app-topbar-user-name { display: none; }
/* The spinning conic-gradient ring reads as a soft halo around the 44px
avatar on a big desktop screen; at close-up phone viewing distance it's
too small/bright to read as a ring and just looks like a smudge of
color. A clean avatar circle alone matches the rest of the trimmed-down
mobile topbar better. */
.app-topbar-avatar-ring { display: none; }
/* .notif-panel normally hangs off the bell button itself (position:
absolute; right:0 relative to .notif-bell-wrap) - on a narrow screen
the bell sits close to the left/middle of the topbar, so that math
pushes most of the panel off-screen. Anchoring it to the viewport
instead guarantees it always fits, regardless of where the bell is. */
.notif-panel {
position: fixed;
top: 76px;
left: var(--space-standard);
right: var(--space-standard);
width: auto;
max-width: none;
}
.app-sidebar-toggle-checkbox:checked ~ .app-sidebar-backdrop {
display: block;
position: fixed;
inset: 0;
background: rgba(4,12,32,0.45);
z-index: 55;
cursor: pointer;
}
}
/* A "heading + action button(s)" row (e.g. a section title with a "Post
Announcement"/"New" button at the far right) - wraps onto its own line
instead of squeezing the button's text past its own edge when the title
and buttons together don't fit one row's width. */
.erp-section-header-row {
display: flex; align-items: center; justify-content: space-between;
flex-wrap: wrap; gap: var(--space-sm); margin-bottom: var(--space-md);
}
.erp-section-header-row > h3 { flex: 1 1 auto; min-width: 0; }
.erp-section-header-row > div { flex-shrink: 0; }
/* ---------------- Cards & Forms ---------------- */
/* Surface (background / border / radius / shadow) comes from the Design System panel rule. */
.erp-card { padding: var(--space-xl); position: relative; }
.erp-form-group { margin-bottom: var(--space-standard); }
.erp-label { display: block; font-size: 13px; font-weight: 600; color: var(--color-text-secondary); margin-bottom: var(--space-xs); }
.erp-input {
width: 100%;
padding: var(--space-md) var(--space-standard);
border: 1px solid var(--color-divider);
border-radius: var(--radius-input);
font-size: 14px;
font-family: inherit;
background: var(--color-surface);
color: var(--color-text-primary);
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.erp-input::placeholder { color: var(--color-text-disabled); }
.erp-input:focus { outline: none; border-color: var(--color-border-focus); box-shadow: 0 0 0 3px rgba(var(--brand-rgb), 0.10); }
.erp-input:disabled { background: var(--color-background); color: var(--color-text-disabled); border-color: var(--color-border-disabled); }
.erp-btn {
display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm);
padding: var(--space-md) var(--space-xl);
border-radius: var(--radius-button);
font-size: 14px; font-weight: 600; font-family: inherit;
border: none; cursor: pointer;
position: relative; overflow: hidden;
transition: background var(--motion-fast) ease, border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease, filter var(--motion-fast) ease;
}
.erp-btn .material-symbols-rounded { font-size: 18px; }
/* [V2.4] Buttons no longer zoom or run a colour orbit on hover - the fill
deepens instead, and a keyboard focus ring (Design System) marks focus. */
.erp-btn:active:not(:disabled) { transform: translateY(1px); }
.erp-btn:disabled { opacity: 0.55; cursor: not-allowed; box-shadow: none; }
.erp-btn-primary { background: var(--color-primary-fill); color: white; box-shadow: 0 1px 2px rgba(var(--brand-rgb), 0.18), 0 2px 6px rgba(var(--brand-rgb), 0.16); }
.erp-btn-primary:hover:not(:disabled) { background: var(--color-primary-dark); box-shadow: 0 2px 4px rgba(var(--brand-rgb), 0.2), 0 4px 12px rgba(var(--brand-rgb), 0.2); }
.erp-btn-secondary { background: var(--color-surface); color: var(--color-primary); border: 1.5px solid var(--color-divider); }
.erp-btn-secondary:hover:not(:disabled) { border-color: var(--color-primary); background: rgba(var(--brand-rgb), 0.05); }
.erp-btn-success { background: var(--color-success); color: white; }
.erp-btn-success:hover:not(:disabled) { filter: brightness(0.9); }
.erp-btn-danger { background: var(--color-error); color: white; }
.erp-btn-danger:hover:not(:disabled) { filter: brightness(0.9); }
.erp-btn-sm { padding: 6px 14px; font-size: 12px; border-radius: 12px; }
.erp-btn-xs { padding: 3px 10px; font-size: 11px; border-radius: 10px; }
/* Alerts share the Design System status palette; the hairline border keeps them
readable on the photo background as well as inside a white panel. */
.erp-alert { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-md) var(--space-standard); border-radius: var(--radius-input); font-size: 13px; margin-bottom: var(--space-standard); border: 1px solid transparent; }
.erp-alert-error { background: #FBF0F0; color: var(--status-danger-fg); border-color: rgba(139,0,0,0.18); }
.erp-alert-success { background: #EEF6EE; color: var(--status-success-fg); border-color: rgba(0,100,0,0.18); }
.erp-alert-warning { background: #FDF4E7; color: var(--status-warning-fg); border-color: rgba(217,119,6,0.22); }
.erp-alert-info { background: #EFF3FA; color: var(--status-info-fg); border-color: rgba(var(--brand-rgb), 0.16); }
.erp-note {
display: flex; align-items: flex-start; gap: var(--space-sm);
font-size: 11.5px; color: var(--color-text-secondary);
background: rgba(255,152,0,0.08); border-radius: var(--radius-input);
padding: var(--space-sm) var(--space-md); margin: var(--space-sm) 0;
}
.erp-note .material-symbols-rounded { font-size: 16px; color: var(--color-warning); flex-shrink: 0; margin-top: 1px; }
/* A native renders its own "Choose file" button + file
name label at a fixed intrinsic width the browser picks - on a narrow
mobile screen that's often wider than the flex row it sits in, so without
this it silently overflows its card's right edge instead of shrinking. */
input[type="file"] { max-width: 100%; }
/* ---------------- Floating Label Fields ---------------- */
.erp-field {
position: relative;
margin-bottom: var(--space-standard);
}
.erp-field .erp-input {
width: 100%;
padding: 21px var(--space-standard) 8px;
border: 1px solid var(--color-divider);
border-radius: var(--radius-input);
font-size: 14px;
background: var(--color-surface);
}
.erp-field .erp-input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(var(--brand-rgb), 0.1); }
.erp-field .erp-floating-label {
position: absolute;
inset-inline-start: var(--space-standard);
top: 19px;
font-size: 14px;
color: var(--color-text-secondary);
pointer-events: none;
transition: all 0.15s ease;
background: var(--color-surface);
padding: 0 4px;
margin-inline-start: -4px;
max-width: calc(100% - var(--space-standard) * 2);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.erp-field .erp-input:focus + .erp-floating-label,
.erp-field .erp-input:not(:placeholder-shown) + .erp-floating-label {
top: -2px;
font-size: 11px;
font-weight: 600;
color: var(--color-primary);
}
.erp-field .erp-input-error { border-color: var(--color-error); }
.erp-field-error-text { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--color-error); margin-top: 4px; }
/* ============================================================================
Management Screen Pattern (Staff Management / Academic Setup style)
Reference: Umar's UI reference, 2026-08-13. This is now the standard
layout for any "list + manage resources" screen — reuse these classes
for future screens of this shape rather than inventing new ones.
============================================================================ */
.erp-page-header { display: flex; align-items: flex-start; gap: var(--space-md); margin-bottom: var(--space-lg); }
.erp-page-header-icon {
width: 44px; height: 44px; border-radius: 14px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
background: rgba(var(--brand-rgb), 0.10); color: var(--color-primary);
}
.erp-page-header-icon .material-symbols-rounded { font-size: 24px; }
.erp-page-header-title { font-size: 20px; font-weight: 700; color: var(--color-text-primary); margin: 0 0 2px; }
.erp-page-header-subtitle { font-size: 13px; color: var(--color-text-secondary); margin: 0; }
.erp-toolbar-row { display: flex; align-items: stretch; gap: var(--space-md); margin-bottom: var(--space-lg); flex-wrap: wrap; }
.erp-toolbar-selector { flex: 1 1 260px; min-width: 220px; }
.erp-toolbar-selector .erp-field { margin-bottom: 0; height: 100%; }
.erp-toolbar-selector select.erp-input { height: 100%; }
.erp-stat-card {
display: flex; align-items: center; gap: var(--space-md);
padding: var(--space-md) var(--space-lg);
flex: 1 1 160px; min-width: 150px;
position: relative;
}
.erp-stat-icon {
width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
}
.erp-stat-icon .material-symbols-rounded { font-size: 20px; }
.erp-stat-icon-purple { background: rgba(111,66,193,0.12); color: #6F42C1; }
.erp-stat-icon-green { background: rgba(0,100,0,0.12); color: #006400; }
.erp-stat-icon-blue { background: rgba(41,182,246,0.14); color: #1471a8; }
.erp-stat-icon-amber { background: rgba(255,152,0,0.14); color: #a15c00; }
.erp-stat-label { font-size: 12px; color: var(--color-text-secondary); margin-bottom: 2px; }
.erp-stat-value { font-size: 20px; font-weight: 700; color: var(--color-text-primary); line-height: 1.1; }
.erp-stat-status { font-size: 11px; color: var(--color-success); font-weight: 600; }
.erp-toolbar-action { flex: 0 0 auto; display: flex; align-items: stretch; }
.erp-toolbar-action .erp-btn { height: 100%; white-space: nowrap; }
.erp-tabs-card { overflow: hidden; position: relative; }
.erp-tabs-header { display: flex; align-items: center; justify-content: space-between; padding: 0 var(--space-lg); border-bottom: 1px solid var(--color-divider); }
/* Many tabs wrap onto a second line on desktop without the 20px column gap
also opening a hole between the rows; phones scroll the strip instead. */
.erp-tabs { display: flex; flex-wrap: wrap; column-gap: var(--space-lg); row-gap: 0; }
.erp-tab {
display: flex; align-items: center; gap: 6px;
padding: var(--space-md) 2px; margin: var(--space-sm) 0;
background: none; border: none; border-bottom: 2px solid transparent;
font-size: 14px; font-weight: 600; color: var(--color-text-secondary);
cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease;
}
.erp-tab .material-symbols-rounded { font-size: 18px; }
.erp-tab:hover { color: var(--color-text-primary); }
.erp-tab.active { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.erp-tab-badge { font-size: 10.5px; font-weight: 700; background: var(--color-background); color: var(--color-text-secondary); padding: 1px 7px; border-radius: var(--radius-pill); }
.erp-tab.active .erp-tab-badge { background: rgba(var(--brand-rgb), 0.12); color: var(--color-primary); }
.erp-tabs-body { padding: var(--space-lg); }
.erp-resource-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-md); }
.erp-resource-card { padding: var(--space-lg); position: relative; overflow: hidden; }
.erp-resource-card-head { display: flex; align-items: flex-start; gap: var(--space-md); margin-bottom: var(--space-md); }
.erp-resource-avatar {
width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
background: var(--color-background); color: var(--color-text-secondary);
display: flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 16px;
}
.erp-resource-name-row { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; }
.erp-resource-name { font-weight: 700; font-size: 14.5px; color: var(--color-text-primary); overflow-wrap: break-word; }
.erp-resource-meta { font-size: 12.5px; color: var(--color-text-secondary); margin-top: 2px; overflow-wrap: break-word; }
/* Pill (row-action) buttons. .erp-pill-btn and .erp-btn-pill are the same
button under two historic names - one rule for both. Default tone is navy;
the -red/-danger, -amber and -green modifiers recolour text + border. Hover
fills with a faint tint of the same colour - no zoom, no orbit. */
.erp-pill-btn, .erp-btn-pill {
--pill-tone: var(--color-primary);
display: inline-flex; align-items: center; gap: 4px;
padding: 5px 14px; border-radius: var(--radius-pill);
font-size: 12px; font-weight: 600; font-family: inherit; cursor: pointer;
background: var(--color-surface); color: var(--pill-tone);
border: 1.5px solid rgba(var(--brand-rgb), 0.35);
border-color: color-mix(in srgb, var(--pill-tone) 38%, transparent);
position: relative; overflow: hidden;
transition: background var(--motion-fast) ease, border-color var(--motion-fast) ease;
}
.erp-pill-btn:hover:not(:disabled), .erp-btn-pill:hover:not(:disabled) {
background: rgba(var(--brand-rgb), 0.06);
background: color-mix(in srgb, var(--pill-tone) 8%, var(--color-surface));
border-color: var(--pill-tone);
}
.erp-pill-btn:disabled, .erp-btn-pill:disabled { opacity: 0.5; cursor: not-allowed; }
.erp-pill-btn-blue { --pill-tone: var(--color-primary); }
.erp-pill-btn-red, .erp-btn-pill-danger { --pill-tone: var(--color-error); border-color: rgba(139,0,0,0.35); }
.erp-pill-btn-amber { --pill-tone: #8A4B00; border-color: rgba(217,119,6,0.4); }
.erp-pill-btn-green { --pill-tone: var(--color-success); border-color: rgba(0,100,0,0.35); }
/* [V2.7.1] Hover motion - main buttons (.erp-btn) lift 2px, press back down, their icon moves and
the blue Primary gets one light sheen; sub buttons inside cards / rows (.erp-pill-btn) lift 1px with
a shadow in their own colour. transform / opacity / box-shadow only (no layout work), runs once per
hover, only on devices that really hover, and never when the user asked for reduced motion. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
.erp-btn {
transition: background var(--motion-fast) ease, border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease,
filter var(--motion-fast) ease, transform var(--motion-fast) ease-out;
}
.erp-btn:hover:not(:disabled) { transform: translateY(-2px); }
.erp-btn-secondary:hover:not(:disabled) { box-shadow: 0 3px 10px rgba(var(--brand-rgb), 0.12); }
.erp-btn-success:hover:not(:disabled) { box-shadow: 0 3px 10px rgba(0,100,0,0.22); }
.erp-btn-danger:hover:not(:disabled) { box-shadow: 0 3px 10px rgba(139,0,0,0.22); }
.erp-btn:active:not(:disabled) { transform: translateY(0); transition-duration: 60ms; }
/* Icon: a trailing icon (after the text - arrows, "next") slides forward, any other one grows a little. */
.erp-btn .material-symbols-rounded, .erp-pill-btn .material-symbols-rounded, .erp-btn-pill .material-symbols-rounded {
transition: transform var(--motion-fast) ease-out;
}
.erp-btn:hover:not(:disabled) .material-symbols-rounded { transform: scale(1.12); }
.erp-btn:hover:not(:disabled) > .material-symbols-rounded:last-child:not(:first-child) { transform: translateX(3px); }
[dir="rtl"] .erp-btn:hover:not(:disabled) > .material-symbols-rounded:last-child:not(:first-child) { transform: translateX(-3px); }
/* Sheen: one soft band of light across the blue Primary button. */
.erp-btn-primary::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.28) 50%, transparent 70%);
transform: translateX(-120%);
}
.erp-btn-primary:hover:not(:disabled)::after { transform: translateX(120%); transition: transform 0.65s ease-out; }
/* Sub buttons. */
.erp-pill-btn, .erp-btn-pill {
transition: background var(--motion-fast) ease, border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease,
transform var(--motion-fast) ease-out;
}
.erp-pill-btn:hover:not(:disabled), .erp-btn-pill:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: 0 2px 6px rgba(var(--brand-rgb), 0.14);
box-shadow: 0 2px 6px color-mix(in srgb, var(--pill-tone) 22%, transparent);
}
.erp-pill-btn:active:not(:disabled), .erp-btn-pill:active:not(:disabled) { transform: translateY(0); transition-duration: 60ms; }
.erp-pill-btn:hover:not(:disabled) .material-symbols-rounded, .erp-btn-pill:hover:not(:disabled) .material-symbols-rounded { transform: scale(1.1); }
}
.erp-empty-card { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--space-section) var(--space-lg); }
.erp-empty-card-icon {
width: 64px; height: 64px; border-radius: 50%; margin-bottom: var(--space-md);
background: var(--status-info-bg); color: var(--status-info-fg);
display: flex; align-items: center; justify-content: center;
}
.erp-empty-card-icon .material-symbols-rounded { font-size: 30px; }
.erp-empty-card-title { font-weight: 700; font-size: 15px; color: var(--color-text-primary); margin-bottom: 4px; }
.erp-empty-card-subtitle { font-size: 13px; color: var(--color-text-secondary); margin-bottom: var(--space-md); max-width: 280px; }
.erp-info-banner {
display: flex; align-items: center; gap: var(--space-sm);
background: rgba(41,182,246,0.08); color: var(--color-text-secondary);
font-size: 12.5px; padding: var(--space-md) var(--space-lg);
border-top: 1px solid var(--color-divider);
}
.erp-info-banner .material-symbols-rounded { font-size: 17px; color: #1471a8; flex-shrink: 0; }
.erp-info-banner strong { color: var(--color-text-primary); }
/* ---------------- Feature Hub Cards (Academic Setup landing row) ---------------- */
.erp-hub-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-lg); margin-bottom: var(--space-lg); }
.erp-hub-card {
padding: 20px var(--space-lg); text-align: center;
display: flex; flex-direction: column; align-items: center;
width: 100%;
font-family: inherit; color: inherit;
position: relative;
/* .erp-spark-wrap's sparkline (below) deliberately overflows its own SVG
box for the pulsing halo animation - without clipping it here, that
halo bleeds past this card's own edge into whichever card follows it
in the stack (only noticeable on cards whose last data point lands
near the top of the sparkline). Doesn't affect this card's own
box-shadow glow, which paints outside the border regardless of overflow. */
overflow: hidden;
}
button.erp-hub-card, .erp-hub-card.is-selectable { cursor: pointer; }
/* .erp-hub-card-icon is the older name some screens use for the same badge. */
.erp-hub-icon, .erp-hub-card-icon {
width: 48px; height: 48px; border-radius: 50%; margin-bottom: 10px;
display: flex; align-items: center; justify-content: center;
}
.erp-hub-icon .material-symbols-rounded, .erp-hub-card-icon .material-symbols-rounded { font-size: 22px; }
.erp-hub-icon.is-sm { width: 34px; height: 34px; margin-bottom: 0; flex-shrink: 0; }
.erp-hub-icon.is-sm .material-symbols-rounded { font-size: 17px; }
.erp-hub-icon-purple { background: rgba(111,66,193,0.14); color: #6F42C1; }
.erp-hub-icon-green { background: rgba(0,100,0,0.14); color: #006400; }
.erp-hub-icon-blue { background: rgba(41,182,246,0.16); color: #1471a8; }
.erp-hub-icon-amber { background: rgba(255,152,0,0.16); color: #a15c00; }
.erp-hub-icon-red { background: rgba(139,0,0,0.12); color: var(--color-error); }
/* KPI stat-tile variant of the hub card (Super Admin Dashboard overview row):
left-aligned label + big number + icon, instead of the centered icon/button
layout the base .erp-hub-card uses for landing-page navigation tiles. */
.erp-hub-card-kpi { text-align: center; align-items: stretch; }
.erp-hub-card-heading { display:flex; flex-wrap: nowrap; align-items:center; justify-content:center; gap:10px; text-align:left; }
.erp-hub-card-kpi .erp-hub-icon { width: 32px; height: 32px; margin-bottom: 0; flex-shrink: 0; }
.erp-hub-card-kpi .erp-hub-icon .material-symbols-rounded { font-size: 16px; }
.erp-hub-card-title { font-size: 11px; color: var(--color-text-secondary); font-weight: 600; }
.erp-hub-card-count {
font-size: 24px; font-weight: 700; color: var(--color-text-primary);
margin-top: 14px; letter-spacing: 0; font-variant-numeric: tabular-nums;
text-align: center;
}
.erp-hub-card-subtitle { font-size: 9.5px; color: var(--color-text-secondary); margin-top: 4px; }
/* Compact secondary-detail row under a KPI card's count (e.g. Present / Absent / Attendance %). */
.erp-hub-card-detail {
display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
gap: 5px 8px; margin-top: 7px;
}
.erp-hub-card-detail-item {
display: inline-flex; align-items: center; gap: 3px;
font-size: 9px; color: var(--color-text-secondary); font-weight: 600;
}
.erp-hub-card-detail-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.erp-hub-card-detail-dot-present { background: #006400; }
.erp-hub-card-detail-dot-absent { background: var(--color-error); }
.erp-hub-card-detail-dot-percent { background: #1471a8; }
/* ---------------- Owner "My Schools" - per-School summary cards ---------------- */
.erp-school-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: var(--space-lg); }
.erp-school-card {
padding: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-md);
position: relative;
}
.erp-school-card-head { display: flex; align-items: flex-start; gap: var(--space-md); }
.erp-school-logo {
width: 48px; height: 48px; border-radius: 12px; flex-shrink: 0;
background: rgba(var(--brand-rgb), 0.08); display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.erp-school-logo .material-symbols-rounded { font-size: 24px; color: var(--color-primary); }
.erp-school-card-name-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.erp-school-card-name { font-size: 15px; font-weight: 700; color: var(--color-text-primary); }
.erp-school-card-meta { font-size: 12px; color: var(--color-text-secondary); margin-top: 2px; }
.erp-school-metrics {
display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-sm);
padding: var(--space-md) 0; border-top: 1px solid var(--color-divider); border-bottom: 1px solid var(--color-divider);
}
.erp-school-metric { text-align: center; }
.erp-school-metric-value { font-size: 18px; font-weight: 700; color: var(--color-text-primary); font-variant-numeric: tabular-nums; }
.erp-school-metric-label { font-size: 10.5px; color: var(--color-text-secondary); margin-top: 2px; }
.erp-school-classes-row { display: flex; gap: var(--space-lg); font-size: 12.5px; color: var(--color-text-secondary); }
.erp-school-footer { display: flex; align-items: center; gap: var(--space-sm); }
.erp-school-footer .erp-btn { flex: 1; }
.erp-school-more-wrap { position: relative; flex-shrink: 0; }
.erp-school-more-btn {
width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--color-divider);
background: var(--color-surface); cursor: pointer; display: flex; align-items: center; justify-content: center;
color: var(--color-text-secondary);
}
.erp-school-more-btn:hover { background: rgba(var(--brand-rgb), 0.06); color: var(--color-primary); }
.erp-school-more-menu {
position: absolute; right: 0; bottom: 46px; min-width: 170px; z-index: 20; overflow: hidden;
background: var(--color-surface); border: 1px solid var(--color-divider);
border-radius: 10px; box-shadow: var(--shadow-card);
}
.erp-school-more-menu button {
display: block; width: 100%; text-align: left; padding: 10px 14px; border: none;
background: none; font-size: 13px; color: var(--color-text-primary); cursor: pointer;
}
.erp-school-more-menu button:hover { background: rgba(var(--brand-rgb), 0.06); }
.erp-hub-title { font-weight: 700; font-size: 15px; color: var(--color-text-primary); margin-bottom: 4px; }
.erp-hub-subtitle { font-size: 12.5px; color: var(--color-text-secondary); margin-bottom: var(--space-md); min-height: 32px; }
.erp-hub-btn {
display: inline-flex; align-items: center; gap: 6px;
padding: 8px 18px; border-radius: var(--radius-button);
font-size: 13px; font-weight: 600; color: white; border: none; cursor: pointer;
margin-bottom: var(--space-sm);
position: relative; overflow: hidden;
transition: filter var(--motion-fast) ease;
}
.erp-hub-btn:hover { filter: brightness(0.9); }
.erp-hub-btn-purple { background: #6F42C1; }
.erp-hub-btn-green { background: var(--color-success); }
.erp-hub-btn-blue { background: var(--color-secondary); }
.erp-hub-btn-amber { background: var(--color-warning); }
.erp-hub-count { font-size: 12px; font-weight: 700; }
.erp-hub-count-purple { color: #6F42C1; }
.erp-hub-count-green { color: #006400; }
.erp-hub-count-blue { color: #1471a8; }
.erp-hub-count-amber { color: #a15c00; }
.erp-modal-overlay {
position: fixed; inset: 0; background: rgba(10, 25, 47, 0.5);
backdrop-filter: blur(2px);
display: flex; align-items: center; justify-content: center;
z-index: 1000; padding: var(--space-xl);
animation: erp-fade-in 0.15s ease;
}
.erp-modal {
background: var(--color-surface);
border-radius: var(--radius-dialog);
width: 520px;
max-width: 100%;
max-height: 90vh;
overflow-y: auto;
box-shadow: var(--shadow-dialog);
animation: erp-slide-up 0.18s ease; /* one-shot entrance only */
position: relative;
}
.erp-modal-header {
display: flex; align-items: center; justify-content: space-between;
padding: var(--space-lg) var(--space-xl);
border-bottom: 1px solid var(--color-divider);
}
.erp-modal-title { font-size: 16px; font-weight: 700; color: var(--color-text-primary); margin: 0; }
.erp-modal-close {
display: flex; align-items: center; justify-content: center;
width: 30px; height: 30px; border-radius: 50%;
background: transparent; border: none; cursor: pointer;
color: var(--color-text-secondary); transition: background 0.15s ease;
}
.erp-modal-close:hover { background: var(--color-background); }
.erp-modal-close .material-symbols-rounded { font-size: 18px; }
.erp-modal-body { padding: var(--space-xl); }
.erp-modal-footer {
display: flex; justify-content: flex-end; gap: var(--space-sm);
padding: var(--space-standard) var(--space-xl);
border-top: 1px solid var(--color-divider);
}
@keyframes erp-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes erp-slide-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
/* ---------------- Smart Greetings - Event Celebration Popup ---------------- */
.erp-celebration-overlay {
position: fixed; inset: 0; background: rgba(10, 25, 47, 0.55);
backdrop-filter: blur(3px);
display: flex; align-items: center; justify-content: center;
z-index: 1200; padding: var(--space-xl);
animation: erp-fade-in 0.2s ease;
}
.erp-celebration-card {
position: relative;
width: 440px; max-width: 100%;
background: linear-gradient(165deg, #fff8f2 0%, #fff 55%);
border-radius: 22px;
box-shadow: 0 24px 60px rgba(10, 25, 47, 0.35);
padding: 40px 32px 32px;
text-align: center;
overflow: hidden;
animation: erp-slide-up 0.25s ease;
}
.erp-celebration-anniversary { background: linear-gradient(165deg, #f2f9ff 0%, #fff 55%); }
.erp-celebration-special { background: linear-gradient(165deg, #f3fff2 0%, #fff 55%); }
.erp-celebration-decor {
position: absolute; border-radius: 50%; opacity: 0.35; pointer-events: none;
}
.erp-celebration-decor-1 { width: 140px; height: 140px; top: -60px; left: -50px; background: radial-gradient(circle, #ffb6c1, transparent 70%); }
.erp-celebration-decor-2 { width: 120px; height: 120px; bottom: -50px; right: -40px; background: radial-gradient(circle, #ffe08a, transparent 70%); }
.erp-celebration-decor-3 { width: 90px; height: 90px; top: 40%; right: -35px; background: radial-gradient(circle, #b3e5ff, transparent 70%); }
.erp-celebration-close {
position: absolute; top: 14px; right: 14px; z-index: 2;
display: flex; align-items: center; justify-content: center;
width: 30px; height: 30px; border-radius: 50%;
background: rgba(10, 25, 47, 0.06); border: none; cursor: pointer;
color: var(--color-text-secondary); transition: background 0.15s ease;
}
.erp-celebration-close:hover { background: rgba(10, 25, 47, 0.12); }
.erp-celebration-close .material-symbols-rounded { font-size: 18px; }
.erp-celebration-icon { position: relative; z-index: 1; font-size: 52px; line-height: 1; margin-bottom: 6px; }
.erp-celebration-title { position: relative; z-index: 1; font-size: 21px; font-weight: 800; color: var(--color-text-primary); margin-bottom: 4px; }
.erp-celebration-sender {
position: relative; z-index: 1; display: inline-block;
font-size: 11px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
color: #a15c00; background: rgba(255, 152, 0, 0.14);
padding: 3px 12px; border-radius: var(--radius-pill); margin-bottom: 18px;
}
.erp-celebration-message {
position: relative; z-index: 1;
font-size: 14.5px; line-height: 1.9; color: var(--color-text-primary);
white-space: normal; margin-bottom: 26px; text-align: center;
}
.erp-celebration-btn {
position: relative; z-index: 1;
background: var(--color-primary-fill); color: #fff; border: none;
font-size: 14px; font-weight: 700; padding: 10px 32px;
border-radius: var(--radius-pill); cursor: pointer; transition: opacity 0.15s ease;
}
.erp-celebration-btn:hover { opacity: 0.9; }
/* ---------------- Badges (PB-03 §5 Status Badges) ----------------
Look + colours are defined once, in the Design System status vocabulary
(end of file): active/success, inactive/danger, pending/warning, info, and
withdrawn/neutral (a permanent exit - grey, distinct from Inactive red). */
/* ---------------- Table ---------------- */
.erp-table { width: 100%; border-collapse: collapse; background: var(--color-surface); border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-card); }
.erp-table th { text-align: start; font-size: 11.5px; font-weight: 600; letter-spacing: 0.3px; text-transform: uppercase; color: #FFFFFF; background: var(--color-primary-fill); padding: var(--space-md) var(--space-standard); border-bottom: 1px solid var(--color-divider); }
.erp-table td { padding: var(--space-md) var(--space-standard); border-bottom: 1px solid var(--color-divider); font-size: 13.5px; color: var(--color-text-primary); }
.erp-table tbody tr { transition: background 0.1s ease; }
.erp-table tbody tr:hover { background: rgba(var(--brand-rgb), 0.025); }
.erp-table tbody tr:last-child td { border-bottom: none; }
.erp-table thead tr.erp-table-filter-row th { padding: 6px var(--space-standard) var(--space-sm); background: var(--color-surface); border-bottom: 1px solid var(--color-divider); }
.erp-table-col-filter { width: 100%; box-sizing: border-box; font-size: 12px; font-weight: 400; text-transform: none; letter-spacing: normal; color: var(--color-text-primary); background: var(--color-background); border: 1px solid var(--color-border); border-radius: var(--radius-input, 6px); padding: 5px 8px; }
/* ---------------- Row Actions dropdown (table rows with a consolidated "Actions" menu,
e.g. Admissions) - same visual treatment as Owner/MySchools.razor's more-options menu,
just a table-generic name and opens downward under its trigger button. ---------------- */
.erp-row-actions { position: relative; display: inline-block; }
.erp-row-actions-menu {
position: absolute; right: 0; top: calc(100% + 4px); min-width: 190px; z-index: 30; overflow: hidden;
background: var(--color-surface); border: 1px solid var(--color-divider);
border-radius: 10px; box-shadow: var(--shadow-card);
}
.erp-row-actions-menu button {
display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 10px 14px; border: none;
background: none; font-size: 13px; color: var(--color-text-primary); cursor: pointer;
}
.erp-row-actions-menu button:hover { background: rgba(var(--brand-rgb), 0.06); }
.erp-row-actions-menu button.erp-row-actions-danger { color: var(--color-error); }
.erp-row-actions-menu button.erp-row-actions-danger:hover { background: rgba(139,0,0,0.06); }
/* [V2.7.1] ActionsMenu (Shared/ActionsMenu.razor): group lines, a green "Activate", a click-catcher
behind the open menu, a short drop-in, the caret turns over. The card holding an open menu lets it
overflow and sits above its neighbours. */
.erp-resource-actions { display: flex; justify-content: flex-end; margin-top: var(--space-sm); }
.erp-row-actions-sep { height: 1px; background: var(--color-divider); margin: 4px 0; }
/* [V2.7.1] "This page is not part of your account" (RedirectToLogin for a signed-in user). */
.erp-access-denied { max-width: 520px; margin: var(--space-section, 48px) auto; padding: var(--space-xl); display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); text-align: center; }
.erp-access-denied-text { font-size: 13px; color: var(--color-text-secondary); line-height: 1.6; margin-bottom: var(--space-sm); }
.erp-row-actions-menu button.erp-row-actions-success { color: var(--color-success); }
.erp-row-actions-menu button.erp-row-actions-success:hover { background: rgba(0,100,0,0.06); }
.erp-row-actions-backdrop { position: fixed; inset: 0; z-index: 29; }
.erp-actions-menu .erp-row-actions-menu { z-index: 30; animation: erp-menu-in 120ms ease-out; }
.erp-actions-caret { font-size: 14px; transition: transform var(--motion-fast) ease; }
.erp-actions-menu > button[aria-expanded="true"] .erp-actions-caret { transform: rotate(180deg); }
:is(.erp-resource-card, .erp-card):has(.erp-actions-menu .erp-row-actions-menu) { overflow: visible; z-index: 31; }
@keyframes erp-menu-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .erp-actions-menu .erp-row-actions-menu { animation: none; } }
/* A Table that hosts a Row Actions dropdown opts out of the default overflow:hidden (only
needed elsewhere to clip the header's background to the table's rounded corners) so the
open menu is never cut off against the table's own edge - the same rounded-corner look is
restored explicitly on the four outer cells instead. */
.erp-table.erp-table-menu-safe { overflow: visible; }
.erp-table.erp-table-menu-safe thead tr:first-child th:first-child { border-top-left-radius: var(--radius-card); }
.erp-table.erp-table-menu-safe thead tr:first-child th:last-child { border-top-right-radius: var(--radius-card); }
.erp-table.erp-table-menu-safe tbody tr:last-child td:first-child { border-bottom-left-radius: var(--radius-card); }
.erp-table.erp-table-menu-safe tbody tr:last-child td:last-child { border-bottom-right-radius: var(--radius-card); }
.erp-table-col-filter::placeholder { color: var(--color-text-disabled); font-weight: 400; }
.erp-table-col-filter:focus { outline: none; border-color: var(--color-border-focus); box-shadow: 0 0 0 2px rgba(var(--brand-rgb), 0.10); }
/* ---------------- Empty / Error State (PB-05 §16-17) ---------------- */
.erp-empty-state {
display: flex; flex-direction: column; align-items: center; justify-content: center;
text-align: center; padding: var(--space-section) var(--space-xl); gap: var(--space-sm);
color: var(--color-text-secondary);
}
.erp-empty-state .material-symbols-rounded { font-size: 42px; color: var(--color-text-disabled); margin-bottom: var(--space-xs); }
.erp-empty-state-title { font-size: 14px; font-weight: 600; color: var(--color-text-primary); }
.erp-empty-state-message { font-size: 13px; max-width: 320px; }
.erp-error-state { display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--space-section) var(--space-xl); gap: var(--space-sm); }
.erp-error-state .material-symbols-rounded { font-size: 42px; color: var(--color-error); }
/* ---------------- Skeleton / Loading ---------------- */
.erp-skeleton { background: linear-gradient(90deg, var(--color-divider) 25%, #EEF1F6 37%, var(--color-divider) 63%); background-size: 400% 100%; animation: erp-shimmer 1.4s ease infinite; border-radius: var(--radius-input); }
@keyframes erp-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.erp-spinner {
width: 28px; height: 28px; border-radius: 50%;
border: 3px solid var(--color-divider); border-top-color: var(--color-primary);
animation: erp-spin 0.7s linear infinite; margin: 0 auto;
}
@keyframes erp-spin { to { transform: rotate(360deg); } }
.erp-loading-row { display: flex; align-items: center; justify-content: center; gap: var(--space-sm); padding: var(--space-xl); color: var(--color-text-secondary); font-size: 13px; }
/* App-shell boot splash (App.razor) - shown only until the Blazor circuit is
up, then removed by blazor-boot.js. This is the "authentication
initializing" state: a valid session is being restored from
ProtectedLocalStorage and must NOT be drawn as the Login page. */
#app-boot-splash {
position: fixed; inset: 0; z-index: 3000;
display: flex; align-items: center; justify-content: center;
background: var(--color-background);
}
#app-boot-splash .erp-spinner { width: 34px; height: 34px; }
.erp-app-authorizing {
display: flex; align-items: center; justify-content: center;
min-height: 100vh; width: 100%;
background: var(--color-background);
}
.erp-app-authorizing .erp-spinner { width: 34px; height: 34px; }
/* ---------------- Login ---------------- */
.erp-login-wrapper {
display: flex; flex-direction: column; align-items: center; justify-content: center;
min-height: 100vh; width: 100%;
background-color: var(--color-background);
background-image: url('/images/app-background-v3.jpg');
/* [V2.7.1] Dark neon stage picture (36 KB WebP / 79 KB JPEG) - the white login card stands out on it. */
background-image: image-set(url('/images/app-background-v3.webp') type('image/webp'), url('/images/app-background-v3.jpg') type('image/jpeg'));
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
padding: var(--space-xl);
}
.erp-login-card { width: 400px; max-width: 100%; box-shadow: var(--shadow-card-hover); border: none; padding: var(--space-section) var(--space-xl); }
.erp-login-logo {
width: 68px; height: 68px; border-radius: 20px;
background: var(--gradient-brand);
display: flex; align-items: center; justify-content: center;
margin: 0 auto var(--space-standard);
box-shadow: var(--shadow-fab);
overflow: hidden;
}
.erp-login-logo-img { background: transparent; padding: 0; }
.erp-login-logo img { width: 118%; height: 118%; object-fit: cover; border-radius: 50%; }
.erp-login-logo .material-symbols-rounded { font-size: 34px; color: white; }
.erp-login-title { font-size: 21px; font-weight: 700; margin: 0 0 2px; color: var(--color-text-primary); text-align: center; }
.erp-login-tagline { font-size: 12.5px; color: var(--color-text-secondary); text-align: center; letter-spacing: 0.3px; margin-bottom: var(--space-section); }
/* ---- Split-layout Login (logo left, form right) ---- */
.erp-login-card-split {
width: 780px; max-width: 100%; box-shadow: var(--shadow-card-hover); border: none; padding: 0;
display: grid; grid-template-columns: 340px 1fr; overflow: hidden;
}
.erp-login-brand-panel {
background: var(--color-surface);
border-inline-end: 1px solid var(--color-divider);
display: flex; align-items: center; justify-content: center; padding: var(--space-section);
}
.erp-login-logo-circle {
width: 220px; height: 220px; border-radius: 50%;
overflow: hidden; box-shadow: 0 4px 16px rgba(10,25,47,0.12);
background: var(--color-surface);
display: flex; align-items: center; justify-content: center;
}
.erp-login-logo-circle img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; border-radius: 50%; }
.erp-login-form-panel { padding: var(--space-section) var(--space-xl); display: flex; flex-direction: column; justify-content: center; }
.erp-login-form-panel .erp-login-title { text-align: left; font-size: 24px; }
.erp-login-form-panel .erp-login-tagline { text-align: left; }
.erp-field-password { position: relative; }
.erp-field-password .erp-input { padding-right: 42px; }
.erp-password-toggle {
position: absolute; right: 10px; top: 12px; background: none; border: none; cursor: pointer;
color: var(--color-text-secondary); display: flex; align-items: center; padding: 4px;
}
.erp-password-toggle .material-symbols-rounded { font-size: 20px; }
.erp-validation-summary { margin: 4px 0 var(--space-md); padding: 0; list-style: none; }
.erp-validation-summary ul { margin: 0; padding: 0; list-style: none; }
.erp-validation-summary li {
background: rgba(139,0,0,0.08); color: var(--color-error);
border: 1px solid rgba(139,0,0,0.3); border-radius: 8px;
padding: 8px 12px; margin-bottom: 6px; font-size: 12.5px;
display: flex; align-items: center; gap: 6px;
}
.erp-validation-summary li::before {
content: "error"; font-family: "Material Symbols Rounded"; font-size: 15px; flex-shrink: 0;
}
.validation-message { color: var(--color-error); font-size: 11.5px; margin-top: 2px; display: block; }
/* ---- Simple CSS bar charts for Reports (no external JS library) ---- */
.erp-chart-bars {
display: flex; align-items: flex-end; gap: 4px; height: 140px;
padding: var(--space-sm); background: var(--color-background); border-radius: 10px;
overflow-x: auto;
}
.erp-chart-bar-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 22px; flex: 1; }
.erp-chart-bar { width: 14px; min-height: 2px; background: var(--gradient-brand); border-radius: 4px 4px 0 0; transition: height 0.2s ease; position: relative; overflow: hidden; }
.erp-chart-bar-label { font-size: 9px; color: var(--color-text-secondary); margin-top: 4px; }
/* [V2.4] The looping "travelling light" inside every chart bar was removed -
bars still grow in once when the chart appears. */
.erp-progress-track { width: 100%; height: 8px; background: var(--color-background); border-radius: 4px; overflow: hidden; }
.erp-progress-fill { height: 100%; background: var(--gradient-brand); border-radius: 4px; transition: width 0.2s ease; }
.erp-donut-legend { display: flex; flex-direction: column; gap: 6px; font-size: 12px; }
.erp-donut-legend-item { display: flex; align-items: center; gap: 6px; }
.erp-donut-legend-swatch { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.erp-login-footer-note {
display: flex; align-items: center; gap: 6px; justify-content: center;
margin-top: var(--space-md); font-size: 12px; color: rgba(255,255,255,0.82); /* [V2.7.1] on the dark neon login picture */
}
.erp-login-forgot-row { display: flex; justify-content: flex-end; margin: -6px 0 var(--space-md); }
.erp-link-button {
background: none; border: none; padding: 0; cursor: pointer;
font-size: 12.5px; font-weight: 600; color: var(--color-secondary);
font-family: inherit; text-decoration: none;
}
.erp-link-button:hover { text-decoration: underline; }
@media (max-width: 720px) {
.erp-login-card-split { grid-template-columns: 1fr; }
.erp-login-brand-panel { padding: var(--space-xl); }
.erp-login-logo-circle { width: 120px; height: 120px; }
.erp-login-form-panel .erp-login-title, .erp-login-form-panel .erp-login-tagline { text-align: center; }
}
/* ============================================================================
Interactive polish: hover animations, ripple buttons, avatars, sparklines.
============================================================================ */
/* [V2.4] The ambient multi-colour "running light" (erp-card-chase) that orbited
every card, tabs card and modal non-stop was removed - cards are now styled
once, in the Design System at the end of this file. */
.erp-swing-hover { transition: box-shadow var(--motion-fast) ease, background var(--motion-fast) ease; position: relative; }
.erp-swing-hover:hover { box-shadow: var(--shadow-card-hover); }
/* Ripple: a soft circle that expands from the click point, clipped to the button shape. */
.erp-btn-ripple { position: relative; overflow: hidden; }
.erp-ripple-dot {
position: absolute; border-radius: 50%;
background: rgba(var(--brand-rgb), 0.16);
transform: scale(0);
animation: erp-ripple-anim 0.55s ease-out;
pointer-events: none;
}
@keyframes erp-ripple-anim { to { transform: scale(2.6); opacity: 0; } }
/* Avatar with initials or a photo, used anywhere a person needs a circular badge. */
.erp-avatar-circle {
width: 34px; height: 34px; border-radius: 50%;
background: var(--gradient-brand); color: #fff;
display: flex; align-items: center; justify-content: center;
font-size: 12px; font-weight: 700; flex-shrink: 0;
background-size: cover; background-position: center;
}
.erp-name-cell {
display: inline-flex; align-items: center; gap: 10px; font-weight: 600;
cursor: pointer; padding: 4px 10px 4px 4px; margin: -4px 0 -4px -4px;
border-radius: 999px;
}
.erp-name-cell { transition: background var(--motion-fast) ease; }
.erp-name-cell:hover { background: rgba(var(--brand-rgb), 0.07); }
.erp-name-cell:hover .erp-avatar-circle { box-shadow: 0 0 0 3px rgba(var(--brand-rgb), 0.14); }
/* Photo upload circle (Owner / person profile photo). */
.erp-photo-upload {
width: 84px; height: 84px; border-radius: 50%;
border: 2px dashed var(--color-divider);
display: flex; align-items: center; justify-content: center;
position: relative; cursor: pointer; margin: 0 auto;
background-size: cover; background-position: center;
color: var(--color-text-disabled);
transition: border-color var(--motion-fast) ease, color var(--motion-fast) ease;
}
.erp-photo-upload:hover { border-color: var(--color-primary); color: var(--color-primary); }
.erp-photo-upload.has-photo { border-style: solid; }
.erp-photo-upload .material-symbols-rounded { font-size: 26px; }
.erp-photo-badge {
position: absolute; bottom: -2px; right: -2px;
width: 26px; height: 26px; border-radius: 50%;
background: var(--gradient-brand); color: #fff;
display: flex; align-items: center; justify-content: center;
border: 2.5px solid var(--color-surface);
}
.erp-photo-badge .material-symbols-rounded { font-size: 14px; }
.erp-photo-upload-input { display: none; }
.erp-photo-hint { text-align: center; font-size: 11.5px; color: var(--color-text-secondary); margin-top: 8px; }
/* Sparkline (dashboard KPI tiles). [V2.4] Static: solid trend line + endpoint
dot in the tile's accent colour - the flowing dashes and pulsing dot/halo
were three never-ending animations per card. */
.erp-spark-wrap { margin-top: 10px; height: 42px; }
.erp-spark-wrap svg { display: block; width: 100%; height: 100%; overflow: visible; }
.erp-spark-halo { opacity: 0.18; }
/* ============================================================================
Parent Dashboard: real-data charts (donut / ring / flowing progress bar).
All values come from data the page already fetches — nothing here calls a
new endpoint or invents a number.
============================================================================ */
/* Multi-segment donut (Attendance History: Present/Absent/Late/Leave/Half-Day). */
.erp-donut-wrap {
position: relative; width: 132px; height: 132px; margin: 0 auto;
animation: erp-pop-in 0.5s cubic-bezier(.2,.8,.3,1.3) both;
}
@keyframes erp-pop-in { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.erp-donut-wrap svg { position: relative; z-index: 1; width: 100%; height: 100%; transform: rotate(-90deg); }
.erp-donut-wrap svg circle { transition: stroke-width 0.2s ease; }
/* [V2.4] Kept as a soft static halo - it no longer spins forever. */
.erp-donut-glow {
position: absolute; inset: -6px; border-radius: 50%;
background: radial-gradient(circle, rgba(var(--brand-rgb), 0.10) 55%, transparent 72%);
z-index: 0;
}
.erp-donut-center {
position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
z-index: 2; pointer-events: none;
}
.erp-donut-center-value { font-size: 24px; font-weight: 800; color: var(--color-text-primary); font-variant-numeric: tabular-nums; line-height: 1; }
.erp-donut-center-label { font-size: 10px; color: var(--color-text-secondary); font-weight: 600; text-transform: uppercase; letter-spacing: .3px; margin-top: 3px; }
/* Shared legend for every real-data chart on the Parent Dashboard (donut,
bar, trend line) — a tidy, evenly-aligned grid instead of a loose wrap. */
.erp-chart-legend {
display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 8px 16px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--color-divider);
}
.erp-chart-legend-item { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--color-text-secondary); font-weight: 500; }
.erp-chart-legend-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.erp-chart-legend-value { margin-inline-start: auto; font-weight: 700; color: var(--color-text-primary); font-variant-numeric: tabular-nums; }
/* Y-axis percentage labels, shared by the bar chart and the trend line. */
.erp-chart-with-axis { display: flex; gap: 8px; }
.erp-chart-yaxis {
display: flex; flex-direction: column; justify-content: space-between;
font-size: 10px; color: var(--color-text-secondary); font-variant-numeric: tabular-nums;
padding: 2px 0; flex-shrink: 0; width: 26px; text-align: right;
}
.erp-chart-plot { flex: 1; min-width: 0; }
/* Single-value progress ring (Result percentage per exam). */
.erp-ring-wrap { position: relative; width: 56px; height: 56px; flex-shrink: 0; }
.erp-ring-wrap svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.erp-ring-track { fill: none; stroke: var(--color-divider); stroke-width: 7; }
.erp-ring-fill { fill: none; stroke-width: 7; stroke-linecap: round; animation: erp-ring-fill-anim 1s cubic-bezier(.2,.8,.3,1) 0.1s both; }
@keyframes erp-ring-fill-anim { from { stroke-dashoffset: var(--ring-circumference); } to { stroke-dashoffset: var(--ring-offset); } }
.erp-ring-value { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: var(--color-text-primary); }
/* Progress bar (Fee paid vs billed) - grows in once, no looping shimmer. */
.erp-flow-bar-track { height: 10px; border-radius: 999px; background: var(--color-background); overflow: hidden; position: relative; }
.erp-flow-bar-fill {
height: 100%; border-radius: 999px; width: var(--flow-target, 0%);
background: var(--color-success);
animation: erp-flow-bar-grow 0.9s cubic-bezier(.2,.8,.3,1) both;
}
.erp-flow-bar-fill.is-overdue { background: var(--color-error); }
@keyframes erp-flow-bar-grow { from { width: 0%; } }
/* Parent Dashboard: 2-column overview layout (My Children + Notifications stacked on the
left, so the left column's total height naturally balances against the charts column
on the right, instead of 3 uneven columns of very different heights). */
.erp-parent-grid {
display: grid; grid-template-columns: 340px 1fr; gap: var(--space-lg);
align-items: start;
}
@media (max-width: 1100px) {
.erp-parent-grid { grid-template-columns: 1fr; }
}
.erp-parent-col-heading { font-size: 14px; font-weight: 700; margin: 0 0 var(--space-md) 0; }
.erp-parent-child-card { cursor: pointer; }
.erp-parent-child-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0; }
.erp-parent-stat { background: var(--color-background); border-radius: 10px; padding: 8px 10px; }
.erp-parent-stat-label { font-size: 10.5px; color: var(--color-text-secondary); font-weight: 600; text-transform: uppercase; letter-spacing: .3px; }
.erp-parent-stat-value { font-size: 16px; font-weight: 800; margin-top: 2px; font-variant-numeric: tabular-nums; }
.erp-parent-child-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
/* Academic Performance Overview (Parent Dashboard) — grouped bars per exam,
one bar per subject, height = that subject's real percentage. */
.erp-perf-bars {
display: flex; align-items: flex-end; justify-content: center; gap: 32px;
overflow-x: auto; padding-bottom: 8px; min-height: 156px;
background-image: repeating-linear-gradient(to top, var(--color-divider) 0, var(--color-divider) 1px, transparent 1px, transparent 35px);
background-position: 0 8px; background-size: 100% 140px; background-repeat: no-repeat;
}
.erp-perf-group { display: flex; flex-direction: column; align-items: center; gap: 6px; flex-shrink: 0; }
.erp-perf-group-bars { display: flex; align-items: flex-end; gap: 8px; height: 140px; }
.erp-perf-bar-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.erp-perf-bar-value { font-size: 9.5px; font-weight: 700; color: var(--color-text-secondary); margin-bottom: 3px; font-variant-numeric: tabular-nums; }
.erp-perf-bar { width: 16px; border-radius: 4px 4px 0 0; height: var(--bar-h, 0); animation: erp-perf-bar-grow 0.8s cubic-bezier(.2,.8,.3,1) both; position: relative; overflow: hidden; }
@keyframes erp-perf-bar-grow { from { height: 0; } }
.erp-perf-group-label { font-size: 10.5px; color: var(--color-text-secondary); font-weight: 600; max-width: 100px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Attendance Trend Line (Parent Dashboard) — one line per child, months on X. */
.erp-trend-line { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: erp-trend-draw 1.1s ease forwards; }
@keyframes erp-trend-draw { to { stroke-dashoffset: 0; } }
/* Parent Dashboard notifications list. */
.erp-notification-row {
display: flex; align-items: flex-start; gap: 10px;
padding: 10px; border-radius: 10px; border: 1px solid var(--color-divider);
position: relative;
transition: background var(--motion-fast) ease, border-color var(--motion-fast) ease;
}
.erp-notification-row:hover { background: rgba(var(--brand-rgb), 0.03); border-color: rgba(var(--brand-rgb), 0.35); }
.erp-notification-icon {
width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
}
.erp-notification-dot {
width: 8px; height: 8px; border-radius: 50%; background: var(--color-info);
flex-shrink: 0; margin-top: 4px;
box-shadow: 0 0 0 3px rgba(41,182,246,0.18);
}
/* ============================================================================
Super Admin Dashboard: real-data Growth Overview / System Summary layout.
============================================================================ */
.erp-sa-grid {
display: grid; grid-template-columns: 1.8fr 1.1fr 0.9fr; gap: var(--space-lg);
align-items: stretch; margin-top: var(--space-lg);
}
@media (max-width: 1100px) {
.erp-sa-grid { grid-template-columns: 1fr; }
}
.erp-sa-summary-donuts { display: flex; justify-content: space-around; gap: 8px; }
.erp-sa-mini-donut { width: 100px; height: 100px; }
/* Dual y-axis wrapper (Schools left scale, Students right scale) for the
Schools & Students Overview growth chart — both scales are real, honestly
rounded maxima computed from the actual counts, never invented. */
.erp-dual-axis-wrap { display: flex; gap: 8px; align-items: stretch; }
.erp-dual-yaxis {
display: flex; flex-direction: column; justify-content: space-between;
font-size: 10px; color: var(--color-text-secondary); font-variant-numeric: tabular-nums;
padding: 2px 0; flex-shrink: 0; width: 32px; text-align: right;
}
.erp-dual-yaxis-right { text-align: left; }
/* ============================================================================
Owners page: premium cards (Total Schools / Active Students / Platform Fee)
with a center-modal detail view + editable per-Owner fee rate.
============================================================================ */
.erp-owner-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-lg); }
.erp-owner-card {
padding: var(--space-lg); cursor: pointer;
display: flex; flex-direction: column; gap: 14px;
position: relative;
}
.erp-owner-card-head { display: flex; align-items: flex-start; gap: 12px; }
.erp-owner-avatar {
width: 46px; height: 46px; border-radius: 14px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
font-weight: 800; font-size: 15px; color: #fff;
background: var(--gradient-brand); background-size: cover; background-position: center;
}
.erp-owner-name-block { flex: 1; min-width: 0; }
.erp-owner-name { font-size: 15px; font-weight: 700; letter-spacing: -0.1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.erp-owner-company { font-size: 12px; color: var(--color-text-secondary); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.erp-owner-mobile { font-size: 11.5px; color: var(--color-text-disabled); margin-top: 5px; display: flex; align-items: center; gap: 5px; }
.erp-owner-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.erp-owner-stat { background: var(--color-background); border-radius: 12px; padding: 10px 12px; }
.erp-owner-stat .erp-owner-stat-lbl { font-size: 10px; color: var(--color-text-secondary); font-weight: 650; text-transform: uppercase; letter-spacing: .3px; }
.erp-owner-stat .erp-owner-stat-val { font-size: 16.5px; font-weight: 800; margin-top: 3px; letter-spacing: -0.2px; font-variant-numeric: tabular-nums; }
.erp-owner-stat.fee-in .erp-owner-stat-val { color: var(--color-success); }
.erp-owner-stat.fee-out .erp-owner-stat-val { color: var(--color-error); }
.erp-owner-card-footer {
display: flex; align-items: center; justify-content: space-between;
padding-top: 12px; border-top: 1px solid var(--color-divider);
font-size: 12px; color: var(--color-secondary); font-weight: 650;
}
.erp-owner-card-footer .material-symbols-rounded { font-size: 16px; transition: transform 0.2s ease; }
.erp-owner-card:hover .erp-owner-card-footer .material-symbols-rounded { transform: translateX(3px); }
/* Detail modal content */
.erp-owner-detail-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: var(--space-md); }
.erp-owner-detail-stat { background: var(--color-background); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 6px; }
.erp-owner-detail-stat .erp-owner-detail-icon {
width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center;
}
.erp-owner-detail-stat .erp-owner-detail-icon .material-symbols-rounded { font-size: 16px; }
.erp-owner-detail-stat .erp-owner-detail-lbl { font-size: 11px; color: var(--color-text-secondary); font-weight: 600; }
.erp-owner-detail-stat .erp-owner-detail-val { font-size: 19px; font-weight: 800; letter-spacing: -0.3px; font-variant-numeric: tabular-nums; }
.erp-owner-detail-stat.green .erp-owner-detail-val { color: var(--color-success); }
.erp-owner-detail-stat.red .erp-owner-detail-val { color: var(--color-error); }
.erp-owner-school-row {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
background: var(--color-background); border-radius: 12px; padding: 10px 13px; margin-bottom: 8px;
}
.erp-owner-school-row .erp-owner-school-name { font-size: 13px; font-weight: 650; }
.erp-owner-school-row .erp-owner-school-sub { font-size: 11px; color: var(--color-text-secondary); margin-top: 1px; }
.erp-fee-plan-box {
background: linear-gradient(160deg, rgba(30,136,229,0.08), transparent 70%);
border: 1px solid var(--color-divider); border-radius: 16px; padding: var(--space-lg);
}
.erp-fee-plan-current { display: flex; align-items: baseline; gap: 6px; margin-bottom: 4px; }
.erp-fee-plan-current .erp-fee-plan-amt { font-size: 26px; font-weight: 800; letter-spacing: -0.5px; }
.erp-fee-plan-current .erp-fee-plan-unit { font-size: 12.5px; color: var(--color-text-secondary); font-weight: 600; }
.erp-fee-plan-note { font-size: 11.5px; color: var(--color-text-disabled); margin-bottom: 14px; }
.erp-rate-edit-row { display: flex; align-items: center; gap: 10px; }
.erp-rate-input-wrap { position: relative; flex: 1; }
.erp-rate-input-wrap span { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 13px; color: var(--color-text-secondary); font-weight: 650; }
.erp-rate-input-wrap input { padding-left: 30px !important; font-weight: 700; }
.erp-fee-preview-line { font-size: 12px; color: var(--color-text-secondary); margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--color-divider); }
/* ============================================================================
Standalone search bar - a clearly-a-search-box pill (icon + real
placeholder + visible border/shadow), distinct from the floating-label
form-field style used inside Create/Edit forms.
============================================================================ */
.erp-search-bar { position: relative; max-width: 340px; margin-bottom: var(--space-lg); }
.erp-search-bar > .material-symbols-rounded {
position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
font-size: 18px; color: var(--color-text-secondary); pointer-events: none;
}
.erp-search-bar input {
width: 100%; padding: 11px 14px 11px 42px; border-radius: 999px;
border: 1.5px solid var(--color-divider); background: var(--color-surface);
color: var(--color-text-primary); font-size: 13.5px; font-family: inherit;
box-shadow: var(--shadow-card);
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.erp-search-bar input:focus {
outline: none; border-color: var(--color-secondary);
box-shadow: 0 0 0 3px rgba(30,136,229,0.14);
}
.erp-search-bar input::placeholder { color: var(--color-text-disabled); }
.erp-fee-preview-line strong { color: var(--color-text-primary); }
/* Per-User Permission override rows (Super Admin - Users screen). */
.erp-permission-row {
display: flex; align-items: center; gap: 10px;
padding: 8px 10px; border-radius: 10px; cursor: pointer;
transition: background 0.15s ease;
}
.erp-permission-row:hover { background: var(--color-background); }
.erp-permission-row input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--color-secondary); cursor: pointer; flex-shrink: 0; }
/* Audience Role chip checkboxes (Notices - Super Admin platform notice targeting). */
.erp-role-chip {
display: inline-flex; align-items: center; gap: 6px;
padding: 7px 12px; border-radius: var(--radius-pill);
border: 1.5px solid var(--color-divider); background: var(--color-surface);
font-size: 12.5px; color: var(--color-text-secondary); cursor: pointer;
transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.erp-role-chip input[type="checkbox"] { width: 14px; height: 14px; accent-color: var(--color-secondary); cursor: pointer; }
.erp-role-chip.is-selected { border-color: var(--color-secondary); background: rgba(30,136,229,0.08); color: var(--color-text-primary); font-weight: 600; }
/* Owner Dashboard - Quick Reports / Quick Actions button grid. */
.erp-owner-quick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-md); }
.erp-owner-quick-btn {
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
padding: var(--space-md); color: var(--color-text-primary); text-decoration: none;
font-size: 12.5px; font-weight: 600; text-align: center;
}
.erp-owner-quick-btn .material-symbols-rounded { font-size: 24px; }
.erp-permission-name { font-size: 13px; flex: 1; }
/* [V2.7.1] Designation Permissions is a full-width page: keep "(Default: On)" next to the name, not at the far edge. */
.rp-row .erp-permission-name { flex: 0 1 auto; }
/* Facebook-style searchable phone country-code picker (CountryCodeSelect.razor). */
.erp-phone-input-row { display: flex; gap: 8px; align-items: stretch; }
.erp-country-code-select { position: relative; flex: 0 0 auto; }
.erp-country-code-trigger {
display: flex; align-items: center; gap: 6px; height: 100%;
padding: var(--space-md) var(--space-sm); border-radius: var(--radius-input);
border: 1.5px solid var(--color-divider); background: var(--color-surface);
font-size: 13.5px; font-family: inherit; color: var(--color-text-primary);
cursor: pointer; transition: border-color 0.18s ease, box-shadow 0.18s ease;
white-space: nowrap;
}
.erp-country-code-trigger:hover { border-color: var(--color-secondary); }
.erp-country-code-caret { font-size: 16px !important; color: var(--color-text-secondary); }
.erp-country-flag { font-size: 16px; line-height: 1; }
/* Real flag image (flagcdn.com) instead of flag emoji - Windows 10's bundled
emoji font has no flag glyphs and falls back to plain "PK"-style text. */
.erp-country-flag-img { width: 20px; height: 15px; object-fit: cover; border-radius: 2px; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(0,0,0,0.08); }
.erp-phone-number-input { flex: 1; min-width: 0; }
.erp-country-code-backdrop { position: fixed; inset: 0; z-index: 1090; background: transparent; }
.erp-country-code-dropdown {
position: absolute; top: calc(100% + 6px); left: 0; z-index: 1091;
width: max(100%, 280px); max-width: 82vw; background: var(--color-surface);
border: 1px solid var(--color-divider); border-radius: var(--radius-input);
box-shadow: 0 12px 32px rgba(15,23,42,0.18); overflow: hidden;
}
.erp-country-code-search {
position: relative; padding: var(--space-sm); border-bottom: 1px solid var(--color-divider);
}
.erp-country-code-search .material-symbols-rounded {
position: absolute; left: 20px; top: 50%; transform: translateY(-50%);
font-size: 17px; color: var(--color-text-secondary); pointer-events: none;
}
.erp-country-code-search input {
width: 100%; padding: 8px 10px 8px 34px; border-radius: var(--radius-pill);
border: 1.5px solid var(--color-divider); background: var(--color-background);
font-size: 13px; font-family: inherit; color: var(--color-text-primary);
}
.erp-country-code-search input:focus { outline: none; border-color: var(--color-secondary); }
.erp-country-code-list { max-height: 260px; overflow-y: auto; padding: 6px; }
.erp-country-code-item {
display: flex; align-items: center; gap: 8px; padding: 8px 10px;
border-radius: 10px; cursor: pointer; font-size: 13px;
}
.erp-country-code-item:hover { background: var(--color-background); }
.erp-country-code-item.is-selected { background: rgba(var(--brand-rgb), 0.08); font-weight: 600; }
.erp-country-code-name { flex: 1; color: var(--color-text-primary); }
.erp-country-code-dial { color: var(--color-text-secondary); font-variant-numeric: tabular-nums; }
.erp-country-code-empty { padding: var(--space-md); text-align: center; font-size: 12.5px; color: var(--color-text-secondary); }
/* Generic searchable dropdown (SearchableTextSelect.razor) - used by AddressCascadeSelect for Country/Province. */
.erp-select-wrap { position: relative; width: 100%; }
.erp-select-trigger {
display: flex; align-items: center; justify-content: space-between; gap: 6px; width: 100%;
padding: var(--space-md) var(--space-standard); border-radius: var(--radius-input);
border: 1.5px solid var(--color-divider); background: var(--color-surface);
font-size: 13.5px; font-family: inherit; color: var(--color-text-primary);
cursor: pointer; transition: border-color 0.18s ease;
}
.erp-select-trigger:hover:not(.is-disabled) { border-color: var(--color-secondary); }
.erp-select-trigger.is-disabled { cursor: not-allowed; background: var(--color-background); color: var(--color-text-disabled); }
.erp-select-trigger-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.erp-select-trigger-text.is-placeholder { color: var(--color-text-disabled); }
/* Country -> Province cascade + auto-generated Address preview (AddressCascadeSelect.razor). */
.erp-cascade-label { display: block; font-size: 12px; color: var(--color-text-secondary); margin-bottom: 6px; }
.erp-address-preview {
background: var(--color-background); border: 1.5px dashed var(--color-divider);
border-radius: var(--radius-input); padding: var(--space-md) var(--space-standard);
}
.erp-address-preview-label {
display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700;
text-transform: uppercase; letter-spacing: .4px; color: var(--color-text-secondary);
margin-bottom: 6px;
}
.erp-address-preview-text { font-size: 13.5px; color: var(--color-text-primary); line-height: 1.5; }
.erp-cascade-custom-input { margin-top: 6px; font-size: 12.5px; padding-top: 8px; padding-bottom: 8px; }
/* ============================================================================
Mobile shell — easypaisa-inspired greeting header, quick-action grid,
sliding KPI carousel, in-app bottom nav, compact phone density.
Desktop/tablet layout above is unchanged; everything phone-specific lives
in the @media (max-width: 640px) block near the bottom of this section.
============================================================================ */
/* ---- Greeting header (replaces the old title / role / school topbar) ---- */
.app-topbar-greeting { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.app-topbar-hi {
color: #fff; font-weight: 700; font-size: 16px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.app-topbar-sub {
color: rgba(255,255,255,0.72); font-weight: 500; font-size: 12px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.app-topbar-logout {
flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
width: 38px; height: 38px; border-radius: 50%;
background: rgba(255,255,255,0.10); border: none; color: #fff; cursor: pointer;
transition: background 0.18s ease;
}
.app-topbar-logout:hover { background: rgba(255,255,255,0.20); }
.app-topbar-logout .material-symbols-rounded { font-size: 20px; }
/* ---- Quick-action tile grid (QuickActions.razor) ---- */
.erp-quick-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: var(--space-md); margin-bottom: var(--space-lg);
}
.erp-quick-tile {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: var(--space-sm); padding: var(--space-lg) var(--space-md);
color: var(--color-text-primary); text-align: center;
}
.erp-quick-tile-icon {
width: 44px; height: 44px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: rgba(41,182,246,0.14); color: var(--color-primary);
}
.erp-quick-tile-icon .material-symbols-rounded { font-size: 22px; }
.erp-quick-tile-label { font-size: 12.5px; font-weight: 600; line-height: 1.2; }
/* ---- In-app bottom navigation (MobileBottomNav.razor) ----
Hidden everywhere by default; only shown inside the Flutter WebView
() at phone width — see the @media block below. */
.erp-bottom-nav { display: none; }
@media (max-width: 640px) {
/* ---- Compact density: ~22% tighter tokens + trimmed chrome ---- */
:root {
--space-xs: 3px;
--space-sm: 6px;
--space-md: 9px;
--space-standard: 12px;
--space-lg: 14px;
--space-xl: 16px;
--space-section: 20px;
--radius-card: 12px;
--radius-button: 12px;
--radius-dialog: 16px;
}
h1, .erp-h1 { font-size: 20px; }
h2, .erp-h2 { font-size: 17px; }
h3, .erp-h3 { font-size: 14px; }
.erp-body { font-size: 13px; }
.erp-caption { font-size: 11px; }
.app-topbar { height: 54px; padding: 0 var(--space-standard); gap: var(--space-sm); }
.app-topbar-avatar-wrap { width: 34px; height: 34px; }
.app-topbar-avatar { width: 34px; height: 34px; font-size: 13px; }
.app-topbar-avatar-online { display: none; }
.app-topbar-hi { font-size: 13.5px; }
.app-topbar-sub { font-size: 10.5px; }
.app-topbar-logout { width: 32px; height: 32px; }
.app-topbar-logout .material-symbols-rounded { font-size: 18px; }
.app-content { padding: var(--space-md); max-width: none; }
.erp-page-header { gap: var(--space-sm); margin-bottom: var(--space-md); }
.erp-page-header-icon { display: none; }
.erp-page-header-title { font-size: 15px; }
.erp-page-header-subtitle { font-size: 11px; }
.erp-tabs-body { padding: var(--space-md); }
/* ---- Tab strips (e.g. Accounts: Chart of Accounts / Ledger / Trial
Balance / Profit & Loss): the card is `overflow:hidden`, so on a narrow
phone the last tab(s) were simply clipped and unreachable. Let the strip
scroll sideways instead, and tighten each tab so more of them fit. ---- */
.erp-tabs-header {
justify-content: flex-start;
overflow-x: auto; -webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.erp-tabs-header::-webkit-scrollbar { display: none; }
.erp-tabs { flex-wrap: nowrap; column-gap: var(--space-md); }
/* A strip used on its own (My Attendance) had no scrolling parent and
pushed the whole page sideways - it scrolls by itself instead. */
:not(.erp-tabs-header) > .erp-tabs {
max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
:not(.erp-tabs-header) > .erp-tabs::-webkit-scrollbar { display: none; }
.erp-tab {
flex: 0 0 auto; white-space: nowrap;
font-size: 12.5px; padding-left: 2px; padding-right: 2px;
}
.erp-tab .material-symbols-rounded { font-size: 16px; }
/* ---- Sliding KPI carousel: the KPI row becomes a horizontal
scroll-snap strip on a phone (every Role's .erp-hub-row), auto-advanced
by uiHelpers.js. ~2 cards visible at once, next card peeking. The
vertical padding leaves room for the card shadow. ---- */
.erp-hub-row {
display: flex; flex-wrap: nowrap;
overflow-x: auto; -webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
gap: var(--space-lg);
margin-inline: calc(var(--space-md) * -1);
padding: 6px var(--space-md) 10px;
scrollbar-width: none;
}
.erp-hub-row::-webkit-scrollbar { display: none; }
/* Fixed height so every carousel card is the same compact size and every
sparkline lands on the same baseline. Cards WITH a sparkline stack from
the top (sparkline pushed to the bottom by margin-top:auto); simple
cards with no sparkline just centre their content so there's no big
empty gap (e.g. the Leave Requests "Student Leave / Employee Leave"
tiles). */
/* Auto height with a 150px floor - the old fixed 118px was shorter than a
card that carries BOTH a 3-item detail row (Present / Absent / %) AND a
sparkline, so `overflow:hidden` sliced the graph (and often the last
detail line) clean off the bottom on every Role's dashboard. Height is
`auto` so the flex strip's default align-items:stretch makes every card
match the tallest one - the sparklines keep a shared baseline. */
.erp-hub-row > * { flex: 0 0 47%; min-height: 150px; height: auto; scroll-snap-align: start; }
.erp-hub-row > .erp-hub-card { justify-content: center; }
.erp-hub-row > .erp-hub-card:has(.erp-spark-wrap) { justify-content: flex-start; }
.erp-hub-card { padding: var(--space-sm) var(--space-md) 10px; }
/* Long KPI titles (e.g. "New Admissions (This Month)") clamp to 2 lines
instead of stretching the card. */
.erp-hub-card-title {
display: -webkit-box; -webkit-box-orient: vertical;
-webkit-line-clamp: 2; overflow: hidden;
}
.erp-hub-card-count { font-size: 15px; margin-top: 3px; }
.erp-hub-card-title { font-size: 9px; }
.erp-hub-card-subtitle { font-size: 8px; margin-top: 2px; }
.erp-hub-card-detail { font-size: 8.5px; gap: 2px 6px; margin-top: 3px; }
.erp-hub-icon { width: 30px; height: 30px; margin-bottom: 5px; }
.erp-hub-icon .material-symbols-rounded { font-size: 15px; }
.erp-hub-card-kpi .erp-hub-icon { width: 24px; height: 24px; }
.erp-hub-card-kpi .erp-hub-icon .material-symbols-rounded { font-size: 13px; }
.erp-hub-card-heading { gap: 5px; }
/* Every card has a different amount of text above the sparkline, so the
line lands at a different height per card. Pin it to the bottom of the
card (flex column) so all sparklines sit on the same baseline. */
.erp-hub-card .erp-spark-wrap { margin-top: auto; height: 34px; padding-top: 2px; }
/* The Parent page header already says "My Children"; the duplicate section
heading just eats space and was the thing the card glow overlapped. */
.erp-parent-col-heading { display: none; }
.erp-parent-grid { gap: var(--space-standard); }
/* ---- Quick grid: exactly 3 clickable cards per row ---- */
.erp-quick-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-sm); margin-bottom: var(--space-standard); }
.erp-quick-tile { padding: var(--space-md) var(--space-xs); gap: var(--space-xs); }
.erp-quick-tile-icon { width: 38px; height: 38px; }
.erp-quick-tile-icon .material-symbols-rounded { font-size: 19px; }
.erp-quick-tile-label { font-size: 10.5px; }
/* ---- Bottom nav: only inside the mobile app. Same navy as the topbar.
Its own bar area is ~42px (a touch shorter than the 54px topbar) plus
the phone's home-indicator safe-area, which reads as roughly equal
visual weight. ---- */
.erp-in-app .erp-bottom-nav {
display: flex; align-items: stretch;
position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
height: calc(42px + env(safe-area-inset-bottom, 0px));
background-image: linear-gradient(180deg, var(--brand-bar) 0%, var(--brand-bar-end) 100%);
border-top: 1px solid rgba(255,255,255,0.12);
box-shadow: 0 -2px 12px rgba(10,25,47,0.18);
padding-bottom: env(safe-area-inset-bottom, 0px);
}
.erp-in-app .app-content { padding-bottom: calc(52px + env(safe-area-inset-bottom, 0px)); }
.erp-bottom-nav-item {
flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 1px; padding: 3px 2px; min-width: 0; cursor: pointer;
color: rgba(255,255,255,0.66); background: none; border: none;
text-decoration: none;
}
.erp-bottom-nav-item .material-symbols-rounded { font-size: 17px; }
.erp-bottom-nav-label {
font-size: 8.5px; font-weight: 600; line-height: 1;
max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.erp-bottom-nav-item.active { color: #fff; }
.erp-bottom-nav-item.active .material-symbols-rounded { font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24; }
/* ---- Keep the sticky topbar above everything, so no card is ever
painted over it while the page scrolls. ---- */
.app-topbar { z-index: 30; background-color: var(--brand-bar); }
.erp-hub-card, .erp-card, .erp-tabs-card, .erp-resource-card { z-index: auto; }
/* ---- Data tables: keep each cell on ONE line (readable) and let wide
tables scroll sideways inside the card. Forcing every column to wrap
broke words character-by-character and was unreadable. ---- */
.erp-tabs-body, .erp-modal-body { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.erp-table { table-layout: auto; width: auto; min-width: 100%; }
.erp-table th, .erp-table td {
padding: 6px 8px; font-size: 11px; white-space: nowrap; vertical-align: middle;
}
.erp-table .erp-badge { font-size: 9.5px; padding: 2px 6px; }
/* Chart of Accounts: let the (only) long column - the account name - wrap,
so the table fits the phone width and every name shows in full instead
of the row scrolling off-screen. Code + amount stay on one line. */
.acct-chart-table { width: 100%; min-width: 0; }
.acct-chart-table td:nth-child(2), .acct-chart-table th:nth-child(2) { white-space: normal; overflow-wrap: anywhere; }
.acct-chart-table td:nth-child(3), .acct-chart-table th:nth-child(3) { text-align: right; }
/* ---- Button rows (tabs like "Final Approval Needed" / "History"): every
button in a flex row takes an equal share so none is huge / tiny. ---- */
.erp-btn { font-size: 12px; padding: var(--space-sm) var(--space-md); }
.erp-tabs-card [style*="display:flex"] > .erp-btn,
.erp-tabs-body [style*="display:flex"] > .erp-btn {
flex: 1 1 0; min-width: 0;
}
}
/* ============================================================================
Question Paper Generator - print template (A4 / RTL / Urdu)
============================================================================ */
.qp-toolbar {
display: flex; gap: 10px; padding: 16px; background: var(--color-background);
border-bottom: 1px solid var(--color-border); position: sticky; top: 0; z-index: 5;
}
.qp-print-root {
direction: rtl;
font-family: 'Noto Nastaliq Urdu', 'Jameel Noori Nastaleeq', 'Alvi Nastaleeq', serif;
color: #000; background: #fff;
max-width: 210mm; margin: 12px auto; padding: 16mm 14mm; line-height: 2.1;
box-shadow: 0 0 6px rgba(0,0,0,0.15);
}
.qp-header { display: flex; align-items: center; gap: 14px; border-bottom: 2px solid #000; padding-bottom: 8px; }
.qp-logo { width: 64px; height: 64px; object-fit: contain; }
.qp-school { flex: 1; text-align: center; }
.qp-school-name { font-size: 22px; font-weight: 700; }
.qp-school-address { font-size: 13px; }
.qp-title { text-align: center; font-size: 17px; font-weight: 700; margin: 10px 0 6px; }
.qp-meta-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 18px; font-size: 13px; border-bottom: 1px solid #000; padding-bottom: 6px; }
.qp-student-table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 13px; }
.qp-student-table td { padding: 6px 8px; vertical-align: bottom; }
.qp-student-table .qp-fill { border-bottom: 1px dotted #000; min-width: 120px; }
.qp-digit-box { display: inline-block; width: 26px; height: 32px; border: 1px solid #000; margin-inline-end: 4px; vertical-align: middle; }
.qp-marks-box { display: inline-block; width: 54px; height: 30px; border: 1px solid #000; vertical-align: middle; }
.qp-section-heading { font-weight: 700; font-size: 14px; margin: 16px 0 6px; text-decoration: underline; }
.qp-mcq-list, .qp-q-list { margin: 0; padding-inline-start: 22px; }
.qp-mcq-list li, .qp-q-list li { margin-bottom: 10px; }
.qp-q-text { display: inline; }
.qp-q-marks { font-weight: 700; }
.qp-mcq-options { display: flex; flex-wrap: wrap; gap: 6px 28px; margin-top: 2px; }
.qp-mcq-option { min-width: 40%; }
.qp-answer-space { border-bottom: 1px dotted #000; height: 96px; }
.qp-answer-space-sm { height: 40px; }
.qp-key-table { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 14px; }
.qp-key-table th, .qp-key-table td { border: 1px solid #000; padding: 6px 10px; text-align: center; }
@media print {
@page { size: A4; margin: 12mm; }
body { background: #fff; }
.app-shell, .app-sidebar, .app-topbar, .app-main, .qp-noprint { display: none !important; }
.qp-print-root { box-shadow: none; margin: 0; padding: 0; max-width: none; }
.qp-answer-space { height: 90px; }
}
/* ============================================================================
Connection-lost overlay (Blazor Server circuit reconnect) + offline hint.
blazor-boot.js retries forever, so this only ever shows while the network is
actually down - and it clears itself the moment the circuit is back.
============================================================================ */
.erp-reconnect {
display: none;
position: fixed; inset: 0; z-index: 100000;
background: rgba(15, 23, 42, 0.55);
backdrop-filter: blur(2px);
align-items: center; justify-content: center;
padding: 24px;
}
/* Blazor adds one of these classes to #components-reconnect-modal by id */
.erp-reconnect.components-reconnect-show,
.erp-reconnect.components-reconnect-failed,
.erp-reconnect.components-reconnect-rejected { display: flex; }
.erp-reconnect-card {
background: var(--color-surface, #fff); color: var(--color-text-primary, #0f172a);
border-radius: 16px; padding: 28px 26px; max-width: 340px; width: 100%;
text-align: center; box-shadow: 0 18px 50px rgba(0,0,0,0.35);
}
.erp-reconnect-spinner { width: 34px; height: 34px; margin: 0 auto 14px; display: block; }
.erp-reconnect-title { font-weight: 700; font-size: 15px; margin-bottom: 6px; }
.erp-reconnect-sub { font-size: 12.5px; line-height: 1.7; color: var(--color-text-secondary, #64748b); }
.erp-reconnect.components-reconnect-failed .erp-reconnect-title::after,
.erp-reconnect.components-reconnect-rejected .erp-reconnect-title::after {
content: " — still trying"; font-weight: 400;
}
/* ---- Attendance Devices status dot ---- */
.adev-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; background: var(--color-border); flex-shrink: 0; }
.adev-dot-online { background: #22c55e; }
.adev-dot-offline { background: #9ca3af; }
.adev-dot-error { background: #ef4444; }
.adev-dot-unknown { background: #f59e0b; }
/* ---- Module 11: Collect Fee workspace ---- */
.feecol-steps { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: var(--space-md); font-size: 12px; }
.feecol-step { padding: 3px 10px; border-radius: var(--radius-pill); background: var(--color-background); color: var(--color-text-secondary); font-weight: 600; }
.feecol-step.is-done { background: rgba(var(--brand-rgb), 0.10); color: var(--color-primary); }
.feecol-step.is-active { background: var(--color-primary-fill); color: #fff; }
.feecol-step-sep { color: var(--color-text-secondary); }
.feecol-amount-block { background: var(--color-background); border: 1px solid var(--color-divider); border-radius: 12px; padding: var(--space-md); }
.feecol-amount-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.feecol-chip, .feecol-method { border: 1px solid var(--color-divider); background: var(--color-surface); color: var(--color-text-primary); border-radius: var(--radius-pill); padding: 6px 14px; font-size: 12px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.feecol-method { border-radius: 10px; padding: 9px 14px; }
.feecol-method .material-symbols-rounded, .feecol-chip .material-symbols-rounded { font-size: 16px; }
.feecol-chip.is-active, .feecol-method.is-active { background: var(--color-primary-fill); color: #fff; border-color: var(--color-primary); }
.feecol-link-btn { background: none; border: none; color: var(--color-primary); font-size: 12px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; padding: 8px 0; }
.feecol-status-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 600; }
.feecol-status-chip .material-symbols-rounded { font-size: 16px; }
.erp-btn-block { width: 100%; justify-content: center; font-size: 15px; padding: 12px; }
.feeset-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--color-divider); }
.feeset-row:last-child { border-bottom: none; }
/* ---------------- Accounting: balance chip, bank list, voucher confirmation ---------------- */
.acct-balance-chip { margin: -4px 0 12px; padding: 8px 12px; background: var(--color-background); border: 1px solid var(--color-divider); border-radius: 10px; font-size: 13px; }
.acct-balance-chip strong { color: var(--color-text-primary); }
.acct-banks-card { padding: 14px 16px; margin-bottom: var(--space-lg); }
.acct-banks-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 13px; font-weight: 700; color: var(--color-text-secondary); margin-bottom: 8px; }
.acct-banks-list { display: flex; flex-direction: column; }
.acct-bank-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--color-divider); font-size: 14px; }
.acct-bank-row:last-child { border-bottom: none; }
/* Long account names ("Cash Collected - Pending Hand-over (1005)") must wrap
onto a second line instead of squeezing the amount to nothing / forcing the
whole card to overflow sideways. */
.acct-bank-row > :first-child { min-width: 0; overflow-wrap: anywhere; }
.acct-bank-row > strong { flex-shrink: 0; white-space: nowrap; }
.voucher-result { text-align: center; padding: 8px 0 4px; }
.voucher-result-icon { font-size: 44px; color: var(--color-success); }
.voucher-result-no-label { margin-top: 8px; font-size: 12px; color: var(--color-text-secondary); }
.voucher-result-no { font-size: 20px; font-weight: 800; letter-spacing: 0.5px; }
/* ---------------- [V2.3] Inventory - Items & Setup ---------------- */
.inv-stats { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-bottom: var(--space-lg); }
.inv-stat-clickable { cursor: pointer; }
.inv-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: var(--space-md); }
.inv-toolbar-end { justify-content: flex-end; }
.inv-toolbar .erp-search-bar { margin-bottom: 0; }
.inv-toolbar-search { flex: 1 1 240px; max-width: none; }
.inv-toolbar-select { flex: 0 1 180px; width: auto; }
.inv-toolbar-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--color-text-secondary); margin: var(--space-sm) 0; }
.inv-toolbar-action { margin-left: auto; }
.inv-table-wrap { overflow-x: auto; }
.inv-table td { vertical-align: top; }
.inv-num { text-align: right; white-space: nowrap; }
.inv-code { font-weight: 700; white-space: nowrap; letter-spacing: 0.3px; }
.inv-item-name { font-weight: 600; }
.inv-col-item { min-width: 190px; }
.inv-item-desc { font-size: 12px; color: var(--color-text-secondary); margin-top: 2px; max-width: 280px; overflow-wrap: anywhere; }
.inv-unit { font-size: 12px; color: var(--color-text-secondary); }
.inv-actions { display: flex; gap: 6px; flex-wrap: nowrap; }
.inv-icon-btn { padding: 4px 8px; line-height: 1; }
.inv-icon-btn .material-symbols-rounded { font-size: 17px; }
.inv-muted { font-size: 13px; color: var(--color-text-secondary); }
.inv-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-md); }
.inv-settings { max-width: 420px; }
@media (max-width: 600px) {
.inv-form-grid { grid-template-columns: 1fr; }
.inv-toolbar-select { flex: 1 1 140px; }
.inv-toolbar-action { margin-left: 0; width: 100%; justify-content: center; }
}
/* ---------------- [V2.3] Inventory - Module 2: Stock In ---------------- */
.si-card { margin-bottom: var(--space-lg); }
.si-row { cursor: pointer; }
.si-pill-primary { color: var(--color-primary); border-color: var(--color-primary); }
.si-history-btn { margin-left: 4px; vertical-align: middle; }
.si-section-title { font-weight: 700; font-size: 15px; margin: var(--space-md) 0 var(--space-sm); }
.si-num-input { width: 110px; text-align: right; padding: 6px 8px; }
.si-lines .erp-input { margin: 0; }
.si-lines .si-line-item { min-width: 200px; }
.si-qty { display: inline-flex; align-items: center; gap: 6px; }
.si-total-label { font-weight: 700; }
.si-total { font-weight: 700; font-size: 15px; }
.si-submit-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md); margin-top: var(--space-lg); padding-top: var(--space-md); border-top: 1px solid var(--color-divider); }
.si-inline-icon { font-size: 16px; vertical-align: text-bottom; }
.si-detail-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-md); }
.si-detail-no { font-size: 20px; font-weight: 700; letter-spacing: 0.3px; }
.si-detail-status { text-align: right; }
.si-status-note { margin-top: 4px; }
.si-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px var(--space-lg); margin-bottom: var(--space-md); font-size: 14px; }
.si-facts > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.si-fact-wide { grid-column: 1 / -1; }
.si-fact-label { font-size: 12px; color: var(--color-text-secondary); }
.si-strong { font-weight: 700; }
.si-decision { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); margin-top: var(--space-lg); padding-top: var(--space-md); border-top: 1px solid var(--color-divider); }
.si-decision-remarks { flex: 1 1 260px; margin-bottom: 0; }
.si-decision-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-left: auto; }
.si-timeline { list-style: none; margin: 0; padding: 0; }
.si-timeline-item { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--color-divider); }
.si-timeline-item:last-child { border-bottom: none; }
.si-timeline-icon { font-size: 22px; color: var(--color-text-secondary); }
.si-timeline-approved .si-timeline-icon { color: var(--color-success); }
.si-timeline-rejected .si-timeline-icon { color: var(--color-error); }
.si-timeline-submitted .si-timeline-icon { color: var(--color-primary); }
.si-timeline-remarks { margin-top: 4px; font-size: 13px; }
@media (max-width: 600px) {
.si-facts { grid-template-columns: 1fr; }
.si-detail-status { text-align: left; }
.si-decision-actions { margin-left: 0; width: 100%; }
.si-decision-actions .erp-btn { flex: 1 1 auto; justify-content: center; }
.si-submit-row .erp-btn { width: 100%; justify-content: center; }
/* Stock In lines become stacked cards so nothing needs sideways scrolling. */
.si-lines thead { display: none; }
.si-lines, .si-lines tbody, .si-lines tr, .si-lines td { display: block; width: 100%; }
.si-lines tr { border: 1px solid var(--color-divider); border-radius: 10px; padding: 8px 10px; margin-bottom: 10px; }
.si-lines td { border: none; padding: 4px 0; text-align: left; }
.si-lines td[data-label]::before { content: attr(data-label); display: block; font-size: 12px; color: var(--color-text-secondary); margin-bottom: 2px; }
.si-lines .si-num-input { width: 100%; text-align: left; }
.si-lines .si-qty { display: flex; }
.si-lines tfoot tr { border: none; padding: 0; }
.si-lines tfoot td { display: inline-block; width: auto; }
}
/* Stock History (ledger) modal: a little wider, compact columns so Balance stays visible. */
.erp-modal:has(.si-ledger) { width: 720px; }
.si-ledger th, .si-ledger td { padding: 8px 10px; font-size: 13px; }
/* ---------------- [V2.3] Inventory - Module 3: Stock Out & Student Issue ---------------- */
a.so-stat-link { color: inherit; text-decoration: none; }
.so-toolbar-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-left: auto; }
.so-narrow { max-width: 420px; }
.so-extra { margin-top: var(--space-md); }
.so-line-warn { font-size: 12px; color: var(--color-error); margin-top: 2px; }
.so-free-check { margin: 0; white-space: nowrap; }
.so-btn-spinner { width: 14px; height: 14px; margin-right: 6px; vertical-align: middle; }
.so-row-reversed td { color: var(--color-text-secondary); text-decoration: line-through; }
.so-row-reversed td:last-child, .so-row-reversed td:nth-last-child(2), .so-row-reversed td:nth-child(6) { text-decoration: none; }
.so-picker .inv-toolbar { margin-bottom: var(--space-sm); }
.so-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; margin-bottom: var(--space-md); max-height: 320px; overflow-y: auto; }
.so-result { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: 10px 12px; border: 1px solid var(--color-divider); border-radius: 10px; background: var(--color-surface); cursor: pointer; font: inherit; color: inherit; }
.so-result:hover, .so-result:focus-visible { border-color: var(--color-primary); }
.so-picked { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--color-primary); border-radius: 10px; margin-bottom: var(--space-md); max-width: 520px; }
.so-picked > .material-symbols-rounded { color: var(--color-primary); }
.so-picked-text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.so-history-summary { display: flex; flex-wrap: wrap; gap: var(--space-lg); margin-bottom: var(--space-md); font-size: 14px; }
.so-history-summary > div { display: flex; flex-direction: column; gap: 2px; }
.so-confirm-lines { list-style: none; margin: var(--space-md) 0; padding: 0; }
.so-confirm-lines li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--color-divider); }
/* [V2.3] Inventory - Module 5: Reports & Analytics */
.ir-period { display: flex; flex-wrap: wrap; align-items: center; gap: 10px var(--space-md); margin-bottom: var(--space-md); }
.ir-period .erp-field { width: 180px; margin-bottom: 0; }
.ir-period-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ir-tabs { overflow-x: auto; }
.ir-section-title { font-weight: 600; margin: var(--space-md) 0 var(--space-sm); }
.ir-section-title:first-child { margin-top: 0; }
.ir-note { font-size: 12.5px; margin: 4px 0 var(--space-md); }
.ir-totals { display: flex; flex-wrap: wrap; gap: 10px var(--space-lg); margin-bottom: var(--space-sm); font-size: 14px; }
.ir-totals > div { display: flex; flex-direction: column; gap: 2px; }
.ir-breakdown { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--space-md); }
.ir-chip { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 8px 12px; border: 1px solid var(--color-divider); border-radius: 10px; background: var(--color-surface); cursor: pointer; font: inherit; color: inherit; text-align: left; }
.ir-chip:hover, .ir-chip:focus-visible { border-color: var(--color-primary); }
.ir-subtabs { display: flex; gap: 8px; margin-bottom: var(--space-md); }
.ir-pill-active { border-color: var(--color-primary); color: var(--color-primary); font-weight: 600; }
.ir-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: var(--space-sm); font-size: 13px; }
.ir-pager-buttons { display: flex; align-items: center; gap: 8px; }
.ir-pager-page { min-width: 48px; text-align: center; }
@media (max-width: 600px) {
.ir-period .erp-field { width: calc(50% - 5px); }
.ir-totals { gap: 8px 16px; }
}
/* Student Issue charge mode - three explicit choices, none pre-selected */
.so-mode-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: var(--space-md); }
.so-mode-card { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; padding: 12px 14px; border: 1px solid var(--color-divider); border-radius: 10px; background: var(--color-surface); cursor: pointer; font: inherit; color: inherit; }
.so-mode-card:hover, .so-mode-card:focus-visible { border-color: var(--color-primary); }
.so-mode-card.selected { border-color: var(--color-primary); box-shadow: inset 0 0 0 1px var(--color-primary); }
.so-mode-card-title { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.so-mode-card-title .material-symbols-rounded { font-size: 20px; color: var(--color-primary); }
.so-mode-card-hint { font-size: 12.5px; color: var(--color-text-secondary); }
.so-mode-tag { display: inline-block; font-size: 11.5px; color: var(--color-text-secondary); margin-top: 2px; }
.so-bill-card { border: 1px solid var(--color-divider); border-radius: 10px; padding: 12px 14px; margin-bottom: var(--space-md); display: flex; flex-wrap: wrap; align-items: center; gap: 10px var(--space-lg); }
.so-bill-card > div { display: flex; flex-direction: column; gap: 2px; }
.so-bill-card .so-bill-actions { flex-direction: row; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.ib-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ib-totals { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; margin: var(--space-sm) 0 var(--space-md); font-size: 14px; }
.ib-totals > div { display: flex; gap: 16px; }
.ib-totals .si-fact-label { min-width: 110px; text-align: right; }
@media (max-width: 600px) {
.so-toolbar-actions { margin-left: 0; width: 100%; }
.so-toolbar-actions .erp-btn { flex: 1 1 auto; justify-content: center; }
.so-picked { flex-wrap: wrap; }
.so-picked-change { width: 100%; justify-content: center; }
.so-mode-grid { grid-template-columns: 1fr; }
.so-bill-card .so-bill-actions { margin-left: 0; width: 100%; }
.ib-totals { align-items: stretch; }
.ib-totals > div { justify-content: space-between; }
.ib-totals .si-fact-label { text-align: left; }
}
/* ---------------- Fee Reports ---------------- */
.fr-card { padding: var(--space-lg); margin-bottom: var(--space-lg); min-width: 0; }
.fr-card-title { font-weight: 700; font-size: 15px; color: var(--color-text-primary); }
.fr-card-hint { font-size: 12.5px; color: var(--color-text-secondary); margin-top: 2px; }
.fr-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px var(--space-md); padding: var(--space-md) var(--space-lg); }
.fr-filters .erp-field { width: 200px; margin-bottom: 0; }
.fr-filters-note { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--color-text-secondary); flex: 1 1 220px; }
.fr-filters-note .material-symbols-rounded { font-size: 16px; }
.fr-context { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm) var(--space-lg); margin-bottom: var(--space-md); }
.fr-context-title { font-size: 18px; font-weight: 700; color: var(--color-text-primary); }
.fr-context-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 4px; font-size: 12.5px; color: var(--color-text-secondary); }
.fr-context-meta > span { display: inline-flex; align-items: center; gap: 4px; }
.fr-context-meta .material-symbols-rounded { font-size: 15px; }
.fr-context-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fr-updated { font-size: 12px; color: var(--color-text-secondary); }
.fr-chip { display: inline-flex; align-items: center; gap: 2px; padding: 2px 4px 2px 10px; border-radius: var(--radius-pill); background: rgba(var(--brand-rgb), 0.08); color: var(--color-primary); font-weight: 600; }
.fr-chip button { display: inline-flex; border: 0; background: transparent; color: inherit; cursor: pointer; padding: 0; }
.fr-chip .material-symbols-rounded { font-size: 16px; }
.fr-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-md); margin-bottom: var(--space-md); }
.fr-kpi { align-items: flex-start; min-width: 0; }
.fr-kpi-body { flex: 1; min-width: 0; }
.fr-kpi-hint { font-size: 12px; color: var(--color-text-secondary); margin-top: 4px; }
.fr-kpi-danger .erp-stat-value { color: var(--color-error); }
.fr-kpi-link { cursor: pointer; }
/* [V2.7.1] A card that opens a list says so ("View ... ›") and takes keyboard focus. */
.fr-kpi-link:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 2px; }
.fr-kpi-link .fr-kpi-body { align-self: stretch; display: flex; flex-direction: column; }
.fr-kpi-more { display: inline-flex; align-items: center; gap: 2px; margin-top: auto; padding-top: 8px; align-self: flex-start; font-size: 12px; font-weight: 600; color: var(--color-primary); }
.fr-kpi-more .material-symbols-rounded { font-size: 16px; transition: transform 0.15s ease; }
.fr-kpi-link:hover .fr-kpi-more .material-symbols-rounded { transform: translateX(3px); }
[dir="rtl"] .fr-kpi-more .material-symbols-rounded { transform: scaleX(-1); }
[dir="rtl"] .fr-kpi-link:hover .fr-kpi-more .material-symbols-rounded { transform: scaleX(-1) translateX(3px); }
.fr-reveal-target { scroll-margin-top: 84px; }
/* [V2.7.1] Wide report tables: name, class and parent keep a readable width (a long class name used to
break into five lines); dates and day badges stay on one line. The table scrolls sideways if needed. */
.fr-table th.fr-w-student { min-width: 150px; }
.fr-table th.fr-w-class { min-width: 190px; }
.fr-table th.fr-w-parent { min-width: 150px; }
.fr-table th.fr-w-date, .fr-table td.fr-nowrap { white-space: nowrap; }
.fr-table td.fr-col-focus { background: rgba(var(--brand-rgb), 0.06); }
.fr-table tfoot td.fr-col-focus { background: rgba(var(--brand-rgb), 0.12); }
.fr-table thead th.fr-col-focus { box-shadow: inset 0 -3px 0 rgba(255,255,255,0.85); }
.erp-reveal { animation: erp-reveal 1.6s ease-out; }
@keyframes erp-reveal {
0%, 35% { outline: 3px solid rgba(var(--brand-rgb), 0.45); outline-offset: 3px; }
100% { outline: 3px solid rgba(var(--brand-rgb), 0); outline-offset: 3px; }
}
.fr-stat-icon-red { background: rgba(139,0,0,0.1); color: var(--color-error); }
.fr-progress { height: 6px; border-radius: var(--radius-pill); background: var(--color-divider); overflow: hidden; margin-top: 8px; }
.fr-progress-fill { height: 100%; border-radius: inherit; background: var(--color-success); transition: width 0.3s ease; }
.fr-breakup { font-size: 12.5px; color: var(--color-text-secondary); margin: 0 0 var(--space-md); }
.fr-grid-2 { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 0 var(--space-lg); align-items: start; }
.fr-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12px; color: var(--color-text-secondary); margin: 8px 0 12px; }
.fr-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.fr-swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.fr-swatch-billed, .fr-bar-billed { background: rgba(var(--brand-rgb), 0.22); }
.fr-swatch-collected, .fr-bar-collected { background: var(--gradient-brand); }
.fr-chart { display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: 180px auto; }
.fr-chart-axis { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; padding-right: 6px; font-size: 10.5px; color: var(--color-text-secondary); transform: translateY(-6px); height: calc(100% + 12px); }
.fr-chart-plot { position: relative; border-left: 1px solid var(--color-divider); }
.fr-chart-gridline { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--color-divider); }
.fr-chart-cols { position: absolute; inset: 0; display: flex; align-items: stretch; gap: 4px; padding: 0 4px; }
.fr-chart-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-width: 0; }
.fr-chart-value { font-size: 10px; font-weight: 600; color: var(--color-primary); height: 14px; white-space: nowrap; }
.fr-chart-bars { display: flex; align-items: flex-end; justify-content: center; gap: 3px; width: 100%; height: calc(100% - 14px); }
.fr-bar { width: min(16px, 40%); border-radius: 4px 4px 0 0; transition: height 0.3s ease; }
.fr-chart-labels { display: flex; gap: 4px; padding: 6px 4px 0; }
.fr-chart-labels > span { flex: 1; min-width: 0; text-align: center; font-size: 10.5px; line-height: 1.2; color: var(--color-text-secondary); }
.fr-empty-inline { padding: var(--space-lg) 0; text-align: center; font-size: 13px; color: var(--color-text-secondary); }
.fr-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; color: var(--color-text-secondary); }
.fr-empty .material-symbols-rounded { font-size: 36px; color: var(--color-text-disabled); }
.fr-aging { display: flex; flex-direction: column; }
.fr-aging .fr-card-hint { margin-bottom: 8px; }
.fr-aging-row { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--color-divider); font-size: 13px; }
.fr-aging-row:last-child { border-bottom: 0; }
.fr-aging-track { height: 10px; border-radius: var(--radius-pill); background: var(--color-background); overflow: hidden; }
.fr-aging-fill { height: 100%; border-radius: inherit; transition: width 0.3s ease; }
.fr-aging-not_due { background: #1E88E5; }
.fr-aging-1_30 { background: #FFB300; }
.fr-aging-31_60 { background: #FB8C00; }
.fr-aging-61_90 { background: #E53935; }
.fr-aging-90_plus { background: #8B0000; }
.fr-aging-amount { text-align: end; font-weight: 600; white-space: nowrap; }
.fr-aging-amount small { display: block; font-weight: 400; font-size: 11px; color: var(--color-text-secondary); white-space: normal; }
.fr-methods { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-top: var(--space-md); }
.fr-method { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--color-divider); border-radius: 10px; font-size: 12.5px; color: var(--color-text-secondary); }
.fr-method strong { font-size: 16px; color: var(--color-text-primary); }
.fr-method small { font-size: 11px; }
.fr-method-total { background: rgba(0,100,0,0.05); border-color: rgba(0,100,0,0.25); }
.fr-method-sub { background: var(--color-background); }
.fr-tabs-card { margin-bottom: var(--space-lg); }
.fr-tabs { overflow-x: auto; }
.fr-table-hint { margin: 0 0 var(--space-sm); }
.fr-table-wrap { overflow-x: auto; }
.fr-table { box-shadow: none; border: 1px solid var(--color-divider); }
.fr-table .fr-num { text-align: end; white-space: nowrap; }
.fr-table tfoot td { font-weight: 700; background: rgba(var(--brand-rgb), 0.05); border-top: 2px solid var(--color-primary); }
.fr-row-link { cursor: pointer; }
.fr-strong { font-weight: 600; }
.fr-sub { font-size: 12px; color: var(--color-text-secondary); }
.fr-danger { color: var(--color-error); }
.fr-tel { display: inline-flex; align-items: center; gap: 3px; text-decoration: none; color: var(--color-primary); }
.fr-tel .material-symbols-rounded { font-size: 14px; }
.fr-sort { display: inline-flex; align-items: center; gap: 2px; border: 0; background: transparent; padding: 0; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; }
.fr-sort .material-symbols-rounded { font-size: 15px; opacity: 0.6; }
.fr-sort-active .material-symbols-rounded { opacity: 1; }
.fr-rate { display: flex; align-items: center; gap: 8px; min-width: 120px; }
.fr-rate-track { flex: 1; height: 6px; border-radius: var(--radius-pill); background: var(--color-divider); overflow: hidden; }
.fr-rate-fill { height: 100%; border-radius: inherit; }
.fr-rate-good { background: var(--color-success); }
.fr-rate-mid { background: #FB8C00; }
.fr-rate-low { background: var(--color-error); }
.fr-rate > span { font-size: 12.5px; font-weight: 600; min-width: 42px; text-align: end; }
.fr-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: var(--space-sm); }
.fr-toolbar .erp-search-bar { margin-bottom: 0; }
.fr-search { flex: 1 1 260px; max-width: 420px; }
.fr-toolbar-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
@media (max-width: 900px) {
.fr-grid-2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
.fr-filters { padding: var(--space-md); }
.fr-filters .erp-field { width: calc(50% - 6px); }
.fr-context-actions { width: 100%; }
.fr-kpis { grid-template-columns: minmax(0, 1fr); }
.fr-aging-row { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; }
.fr-aging-track { grid-column: 1 / -1; grid-row: 2; }
.fr-toolbar-actions { margin-left: 0; }
.fr-chart { grid-template-columns: 36px minmax(0, 1fr); }
}
/* ---------------- Attendance Reports (reuses the Fee Reports fr-* layout) ---------------- */
.ar-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ar-chart { margin-top: 18px; }
.ar-bar { width: min(18px, 70%); background: var(--gradient-brand); }
.ar-bar-low { background: linear-gradient(180deg, #E53935 0%, #8B0000 100%); }
.ar-threshold-line { border-top: 1px dashed rgba(229,57,53,0.55); }
.ar-mix-bar { display: flex; height: 14px; border-radius: var(--radius-pill); overflow: hidden; background: var(--color-divider); margin: var(--space-md) 0; }
.ar-mix-seg { height: 100%; }
.ar-mix-present { background: #2E7D32; }
.ar-mix-late { background: #FFB300; }
.ar-mix-halfday { background: #29B6F6; }
.ar-mix-leave { background: #7E57C2; }
.ar-mix-absent { background: #C62828; }
.ar-mix-legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 6px 12px; font-size: 12.5px; }
.ar-mix-legend > div { display: flex; align-items: center; gap: 6px; }
.ar-mix-legend strong { margin-inline-start: auto; }
.ar-mix-legend small { color: var(--color-text-secondary); min-width: 40px; text-align: end; }
.ar-mix-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.ar-weekday-row { grid-template-columns: 90px minmax(0, 1fr) auto; }
.ar-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--color-text-secondary); cursor: pointer; }
.ar-warn { color: #a15c00; font-weight: 600; }
.ar-badge-muted { background: rgba(97,97,97,0.12); color: #545454; }
@media (max-width: 900px) {
.ar-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
.ar-kpis { grid-template-columns: minmax(0, 1fr); }
.ar-weekday-row { grid-template-columns: minmax(0, 1fr) auto; }
}
/* ============================================================================
[V2.4] Wide modal, Admission Form sections, Student / Employee Profile
============================================================================ */
.erp-modal-lg { width: 780px; }
.erp-modal-lg .erp-modal-footer { flex-wrap: wrap; }
/* ---- Admission Form: numbered, grouped sections on a responsive grid ---- */
.erp-form-section {
border: 1px solid var(--color-divider);
border-radius: var(--radius-card);
padding: var(--space-standard) var(--space-lg) var(--space-xs);
margin-bottom: var(--space-md);
background: var(--color-surface);
}
.erp-form-section-head { display: flex; align-items: flex-start; gap: var(--space-md); margin-bottom: var(--space-standard); }
.erp-form-step {
width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
background: rgba(var(--brand-rgb), 0.1); color: var(--color-primary);
font-size: 12.5px; font-weight: 700;
}
.erp-form-section-title { font-size: 14px; font-weight: 700; margin: 2px 0 0; color: var(--color-text-primary); }
.erp-form-section-hint { font-size: 12px; color: var(--color-text-secondary); margin: 2px 0 0; }
.erp-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-standard); }
.erp-form-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.erp-form-grid > .erp-span-all { grid-column: 1 / -1; }
.erp-form-grid .erp-field select.erp-input { padding-top: 20px; }
.erp-floating-label.is-pinned { top: -2px !important; font-size: 11px !important; font-weight: 600; color: var(--color-primary) !important; }
.erp-form-section .erp-note { margin-top: 0; margin-bottom: var(--space-standard); }
/* Candidate identity: photo beside the name */
.erp-form-identity { display: flex; align-items: flex-start; gap: var(--space-standard); }
.erp-form-identity > .erp-form-identity-fields { flex: 1; min-width: 0; }
.erp-form-photo {
position: relative; flex-shrink: 0;
width: 92px; height: 108px; margin-bottom: var(--space-standard);
border: 2px dashed var(--color-divider); border-radius: 12px;
background: var(--color-background); overflow: hidden;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
color: var(--color-text-secondary); font-size: 11px; text-align: center; cursor: pointer;
transition: border-color 0.15s ease;
}
.erp-form-photo:hover, .erp-form-photo:focus-within { border-color: var(--color-primary); }
.erp-form-photo img { width: 100%; height: 100%; object-fit: cover; }
.erp-form-photo .material-symbols-rounded { font-size: 26px; }
.erp-form-photo input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.erp-form-photo-hint { font-size: 11px; color: var(--color-text-secondary); margin: -8px 0 var(--space-standard); }
.erp-form-photo-error { font-size: 11px; color: var(--color-error); margin: -8px 0 var(--space-standard); }
/* Read-only summary of what the Principal already entered (Complete Admission Form) */
.erp-form-summary {
display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-sm) var(--space-standard);
margin: 0 0 var(--space-md); padding: var(--space-md) var(--space-standard);
background: var(--color-background); border-radius: var(--radius-input);
}
.erp-form-summary dt { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-secondary); }
.erp-form-summary dd { margin: 2px 0 0; font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.erp-form-brand { display: flex; align-items: center; gap: var(--space-md); margin-bottom: var(--space-md); }
.erp-form-brand-logo { width: 44px; height: 44px; object-fit: contain; }
.erp-form-brand-photo { width: 56px; height: 64px; border-radius: 10px; object-fit: cover; border: 1px solid var(--color-divider); margin-inline-start: auto; }
.erp-form-brand-name { font-size: 15px; font-weight: 700; }
.erp-form-brand-sub { font-size: 12px; color: var(--color-text-secondary); }
/* Document upload rows */
.erp-doc-row {
display: flex; justify-content: space-between; align-items: center; gap: var(--space-sm); flex-wrap: wrap;
border: 1px solid var(--color-divider); border-radius: var(--radius-input);
padding: var(--space-sm) var(--space-standard); margin-bottom: var(--space-sm);
}
.erp-doc-row-name { display: flex; align-items: center; gap: var(--space-sm); font-size: 13px; font-weight: 600; min-width: 0; }
.erp-doc-row-name .material-symbols-rounded { font-size: 20px; color: var(--color-text-disabled); }
.erp-doc-row-name.is-on-file .material-symbols-rounded { color: var(--color-success); }
.erp-doc-row-file { display: block; font-size: 11px; font-weight: 400; color: var(--color-text-secondary); overflow-wrap: anywhere; }
.erp-doc-row-actions { display: flex; gap: 6px; flex-shrink: 0; flex-wrap: wrap; }
/* ---- Student / Employee Profile (same layout family as the PDF / Word documents) ---- */
.erp-profile-hero {
display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: var(--space-standard) var(--space-lg);
padding: var(--space-lg); border: 1px solid var(--color-divider); border-radius: var(--radius-card);
background: var(--color-background);
}
.erp-profile-photo {
grid-row: span 2; width: 104px; height: 124px; border-radius: 12px; overflow: hidden;
border: 1px solid var(--color-divider); background: #E8EEF8;
display: flex; align-items: center; justify-content: center;
font-size: 32px; font-weight: 700; color: var(--color-primary);
}
.erp-profile-photo img { width: 100%; height: 100%; object-fit: cover; }
.erp-profile-identity { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.erp-profile-name { font-size: 21px; font-weight: 700; line-height: 1.25; margin: 0; overflow-wrap: anywhere; }
.erp-profile-name-urdu, .erp-profile-urdu {
font-family: "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", "Alvi Nastaleeq", serif; line-height: 2;
}
.erp-profile-name-urdu { font-size: 17px; }
.erp-profile-subtitle { font-size: 13.5px; color: var(--color-text-secondary); }
.erp-profile-identity .erp-badge { margin-top: 4px; }
.erp-profile-highlights { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-xl); margin: 0; align-self: end; }
.erp-profile-highlights dt { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-secondary); }
.erp-profile-highlights dd { margin: 2px 0 0; font-size: 14.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.erp-profile-section { margin-top: var(--space-xl); }
.erp-profile-section h3 {
margin: 0; padding-bottom: 6px; border-bottom: 2px solid var(--color-primary);
font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-primary);
}
.erp-profile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-xl); margin: 0; }
.erp-profile-field { padding: 10px 0; border-bottom: 1px solid var(--color-divider); min-width: 0; }
.erp-profile-field.is-wide { grid-column: 1 / -1; }
.erp-profile-field dt { font-size: 11.5px; color: var(--color-text-secondary); }
.erp-profile-field dd { margin: 2px 0 0; font-size: 14px; color: var(--color-text-primary); overflow-wrap: anywhere; }
.erp-profile-field dd.erp-profile-urdu { font-size: 15px; text-align: start; }
.erp-profile-record { margin: var(--space-standard) 0 0; font-size: 12px; font-style: italic; color: var(--color-text-secondary); }
/* School watermark (Settings > Document Watermark) - same as the printed PDF / Word; drawn over the
content (the tinted hero would hide it underneath) but faint and click-through. */
.erp-profile { position: relative; overflow: hidden; }
.erp-profile-watermark {
position: absolute; inset: 0; z-index: 1; pointer-events: none; user-select: none;
display: flex; align-items: center; justify-content: center;
}
.erp-profile-watermark span {
transform: rotate(-35deg); white-space: nowrap; max-width: 140%;
font-size: clamp(22px, 7vw, 64px); font-weight: 800; letter-spacing: 0.04em;
color: var(--color-primary); opacity: 0.07;
}
.erp-profile-watermark.is-long span { font-size: clamp(16px, 3.4vw, 34px); }
/* Settings > Document Watermark live preview - a mini page with the watermark as it will print. */
.erp-watermark-preview {
height: 96px; margin-bottom: var(--space-standard); overflow: hidden;
display: flex; align-items: center; justify-content: center;
border: 1px dashed var(--color-divider); border-radius: var(--radius-input); background: var(--color-surface, #fff);
}
.erp-watermark-preview span {
transform: rotate(-18deg); white-space: nowrap; font-size: 22px; font-weight: 800; letter-spacing: 0.04em;
color: var(--color-primary); opacity: 0.25;
}
.erp-watermark-preview em { font-size: 12.5px; color: var(--color-text-secondary); }
@media (max-width: 640px) {
.erp-modal-overlay:has(.erp-modal-lg) { padding: var(--space-sm); }
.erp-modal-lg .erp-modal-body { padding: var(--space-standard); }
.erp-form-section { padding: var(--space-md) var(--space-md) var(--space-xs); }
.erp-form-grid, .erp-form-grid-3 { grid-template-columns: minmax(0, 1fr); }
.erp-profile-hero { grid-template-columns: 76px minmax(0, 1fr); padding: var(--space-standard); gap: var(--space-md); }
.erp-profile-photo { grid-row: auto; width: 76px; height: 92px; font-size: 24px; }
.erp-profile-name { font-size: 18px; }
.erp-profile-highlights { grid-column: 1 / -1; gap: var(--space-sm) var(--space-lg); }
.erp-profile-grid { grid-template-columns: minmax(0, 1fr); }
}
/* ============================================================================
[V2.4] Page building blocks - born on the Finance screens, now the shared
vocabulary for every module. Each block has a neutral erp-* name for new
screens; the original fin-* names stay as aliases so nothing breaks.
KPI row ........ .erp-kpis > .erp-kpi (.fin-kpis > .fin-kpi)
Section panel .. .erp-section / -head / -title / -hint / -body (.fin-section*)
Item row ....... .erp-row / -main / -title / -meta / -amount / -actions (.fin-row*)
Filter bar ..... .erp-filters, segmented toggle .erp-seg (.fin-filters, .fin-seg)
Statement ...... .erp-statement (.fin-statement)
Info note ...... .erp-info-note (.fin-note)
Surfaces (background/border/shadow/accent) come from the Design System.
============================================================================ */
/* ---- KPI tiles: label, figure, one line of context ---- */
.erp-kpis, .fin-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-md); margin-bottom: var(--space-lg); }
.erp-kpis.is-compact, .fin-kpis.is-compact { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.erp-kpis.is-narrow, .fin-kpis.is-narrow { grid-template-columns: repeat(auto-fill, minmax(180px, 240px)); }
.erp-kpi, .fin-kpi { position: relative; min-width: 0; padding: var(--space-standard) var(--space-lg); }
.erp-kpi-label, .fin-kpi-label { font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-secondary); }
.erp-kpi-value, .fin-kpi-value { font-size: 22px; font-weight: 700; margin-top: 4px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.erp-kpi-sub, .fin-kpi-sub { font-size: 12px; color: var(--color-text-secondary); margin-top: 2px; }
.is-compact > .erp-kpi .erp-kpi-value, .is-compact > .fin-kpi .fin-kpi-value { font-size: 17px; }
/* ---- Section panel ---- */
.erp-section, .fin-section { margin-bottom: var(--space-lg); overflow: hidden; }
.erp-section-head, .fin-section-head {
display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); flex-wrap: wrap;
padding: var(--space-md) var(--space-lg); border-bottom: 1px solid var(--color-divider);
}
.erp-section-title, .fin-section-title { display: flex; align-items: center; gap: var(--space-sm); font-size: 14.5px; font-weight: 700; margin: 0; }
.erp-section-title .material-symbols-rounded, .fin-section-title .material-symbols-rounded { font-size: 19px; color: var(--color-primary); }
.erp-count, .fin-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: var(--radius-pill); background: var(--status-info-bg); color: var(--status-info-fg); font-size: 11.5px; font-weight: 700; }
.erp-count.is-alert, .fin-count.is-alert { background: var(--status-warning-bg); color: var(--status-warning-fg); }
.erp-section-hint, .fin-section-hint { font-size: 12px; color: var(--color-text-secondary); margin: 2px 0 0; }
.erp-section-body, .fin-section-body { padding: var(--space-md) var(--space-lg); }
.erp-section-body.is-flush, .fin-section-body.is-flush { padding: 0; }
.erp-section-body.is-flush .erp-table, .fin-section-body.is-flush .erp-table { margin: 0; border-radius: 0; box-shadow: none; }
/* ---- Empty state inside a section ---- */
.fin-empty { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-md) 0; font-size: 13px; color: var(--color-text-secondary); }
.fin-empty .material-symbols-rounded { font-size: 20px; color: var(--color-success); }
.erp-empty-inline { font-size: 13px; color: var(--color-text-secondary); margin: var(--space-sm) 0; }
/* ---- Item rows (action lists, alerts, notices) ---- */
.erp-row, .fin-row {
display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap;
padding: var(--space-md) 0; border-bottom: 1px solid var(--color-divider);
}
.erp-row:last-child, .fin-row:last-child { border-bottom: none; }
.erp-row-main, .fin-row-main { min-width: 0; flex: 1 1 260px; }
.erp-row-title, .fin-row-title { font-weight: 600; font-size: 14px; overflow-wrap: anywhere; }
.erp-row-meta, .fin-row-meta { font-size: 12px; color: var(--color-text-secondary); margin-top: 2px; overflow-wrap: anywhere; }
.erp-row-amount, .fin-row-amount { font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.erp-row-actions, .fin-row-actions { display: flex; gap: 6px; flex-wrap: wrap; }
/* Compact dashboard list (alerts / pending items / notices), optionally a link. */
.erp-list-row { display: flex; align-items: center; gap: 12px; padding: var(--space-sm) 0; border-bottom: 1px solid var(--color-divider); }
.erp-list-row.is-split { justify-content: space-between; }
.erp-list-row.is-stack { display: block; }
.erp-list-link { display: block; color: inherit; text-decoration: none; border-radius: 8px; transition: background var(--motion-fast) ease; }
.erp-list-link:hover { background: rgba(var(--brand-rgb), 0.04); }
.erp-list-title { font-size: 13px; font-weight: 600; }
.erp-list-meta { font-size: 11.5px; color: var(--color-text-secondary); }
.erp-list-text { font-size: 12.5px; color: var(--color-text-primary); }
/* ---- Filter bar + segmented toggle ---- */
.erp-filters, .fin-filters { display: flex; align-items: flex-end; gap: var(--space-sm) var(--space-md); flex-wrap: wrap; margin-bottom: var(--space-lg); }
.erp-filters .erp-field, .fin-filters .erp-field { margin-bottom: 0; flex: 0 1 170px; min-width: 140px; }
.erp-filters .erp-field.is-wide, .fin-filters .erp-field.is-wide { flex-basis: 240px; }
.erp-filters-spacer, .fin-filters .fin-filters-spacer { flex: 1 1 auto; }
.erp-seg, .fin-seg { display: inline-flex; padding: 3px; border-radius: var(--radius-pill); background: var(--color-background); border: 1px solid var(--color-divider); }
.erp-seg button, .fin-seg button { border: none; background: transparent; padding: 5px 14px; border-radius: var(--radius-pill); font-size: 12.5px; font-weight: 600; color: var(--color-text-secondary); cursor: pointer; font-family: inherit; }
.erp-seg button.active, .fin-seg button.active { background: var(--color-surface); color: var(--color-primary); box-shadow: 0 1px 3px rgba(10,25,47,0.12); }
/* ---- Tables ---- */
.erp-table-wrap, .fin-table-wrap { overflow-x: auto; }
.fin-muted { color: var(--color-text-secondary); }
.fin-sub { display: block; font-size: 11.5px; color: var(--color-text-secondary); }
.erp-table tfoot td, .erp-table tr.fin-total td, .erp-table tr.erp-total td { font-weight: 700; background: var(--color-background); }
/* ---- Accounting statement (Profit & Loss) ---- */
.erp-statement, .fin-statement { width: 100%; border-collapse: collapse; font-size: 14px; }
.erp-statement th, .fin-statement th { text-align: left; font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-primary); padding: 14px 0 6px; border-bottom: 2px solid var(--color-primary); }
.erp-statement td, .fin-statement td { padding: 9px 0; border-bottom: 1px solid var(--color-divider); }
.erp-statement td:last-child, .erp-statement th:last-child,
.fin-statement td:last-child, .fin-statement th:last-child { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fin-statement tr.fin-subtotal td { font-weight: 700; border-bottom: none; }
.fin-statement tr.fin-net td { font-weight: 800; font-size: 16px; border-top: 2px solid var(--color-text-primary); border-bottom: 3px double var(--color-text-primary); padding-top: 12px; }
.fin-statement tr.fin-net.is-profit td:last-child { color: var(--color-success); }
.fin-statement tr.fin-net.is-loss td:last-child { color: var(--color-error); }
/* ---- Inline info note (what a figure includes / excludes) ---- */
.erp-info-note, .fin-note { display: flex; gap: var(--space-sm); align-items: flex-start; font-size: 12px; color: var(--color-text-secondary); background: #F3F6FB; border: 1px solid rgba(var(--brand-rgb), 0.12); border-radius: var(--radius-input); padding: var(--space-sm) var(--space-md); margin: 0 0 var(--space-md); }
.erp-info-note .material-symbols-rounded, .fin-note .material-symbols-rounded { font-size: 17px; color: var(--color-primary); flex-shrink: 0; }
/* ---- Page header actions (primary action beside the title) ---- */
.fin-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap; }
.fin-page-head .erp-page-header { margin-bottom: var(--space-md); }
.fin-page-actions { display: flex; gap: var(--space-sm); flex-wrap: wrap; align-items: center; margin-bottom: var(--space-md); }
.erp-parent-children { display: flex; flex-direction: column; gap: var(--space-md); }
@media (max-width: 640px) {
.erp-kpis, .fin-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); }
.erp-kpi, .fin-kpi { padding: var(--space-md); }
.erp-kpi-value, .fin-kpi-value, .is-compact > .fin-kpi .fin-kpi-value { font-size: 16px; }
.erp-kpi-label, .fin-kpi-label { font-size: 10.5px; }
.erp-section-head, .erp-section-body, .fin-section-head, .fin-section-body { padding-left: var(--space-md); padding-right: var(--space-md); }
.erp-filters .erp-field, .fin-filters .erp-field { flex: 1 1 140px; }
.erp-row-actions, .fin-row-actions { width: 100%; }
.erp-row-actions .erp-btn, .fin-row-actions .erp-btn { flex: 1 1 auto; justify-content: center; }
}
/* ============================================================================
[V2.4] UT School ERP Design System - surfaces, cards, statuses, motion
----------------------------------------------------------------------------
The single source of truth for how every card-like surface in the app looks.
It is loaded LAST in this file on purpose: component rules above only
describe layout (padding, grid, typography inside the card); background,
border, radius, shadow, accent and hover live here and nowhere else.
Two kinds of surface:
PANEL - a content container (a section, a tabs card, a form card, a modal).
Clean surface, hairline border, soft shadow. No accent.
TILE - a card that stands for one thing (a KPI, a stat, a person, a
school, a navigation tile). Same surface plus a bold accent line
on its leading edge; on hover a hairline of the same colour traces
the whole card. Nothing moves, zooms or loops.
New screens: use .erp-panel / .erp-tile (+ .erp-tile-group on the grid) -
the older component class names below are aliases of the same two rules.
Accent colour: automatic. The Nth tile in any tile group gets the Nth
colour of --accent-1..8, so six cards in a row are six different colours
without any per-page colour code. When a colour carries meaning (attendance
statuses, overdue, income vs expense) the page pins every tile of that
group with .erp-tone-*. Tiles outside a group use --accent-1.
============================================================================ */
/* ---- Panels ----
:where() keeps this at zero specificity: it is the default surface, and a
component that deliberately differs (e.g. the borderless Login card) still
wins with a plain class rule. */
:where(.erp-panel, .erp-card, .erp-tabs-card, .erp-section, .fin-section, .fr-card, .acct-banks-card) {
background: var(--color-surface);
border: 1px solid var(--color-divider);
border-radius: var(--radius-card);
box-shadow: var(--shadow-card);
}
/* An empty state that stands on the page itself (not inside a panel) gets the
panel surface too, so it never floats unreadably on the photo background. */
.erp-empty-card:not(:is(.erp-panel, .erp-card, .erp-tabs-card, .erp-section, .fin-section, .fr-card, .erp-modal) *) {
background: var(--color-surface);
border: 1px solid var(--color-divider);
border-radius: var(--radius-card);
box-shadow: var(--shadow-card);
}
/* ---- Tiles ---- */
.erp-tile, .erp-hub-card, .erp-stat-card, .erp-kpi, .fin-kpi, .erp-resource-card,
.erp-school-card, .erp-owner-card, .erp-quick-tile, .erp-owner-quick-btn, .erp-parent-child-card {
--tile-accent: var(--card-tone, var(--card-accent, var(--accent-1)));
background: var(--color-surface);
border: 1px solid var(--color-divider);
border-inline-start: var(--accent-width) solid var(--tile-accent);
border-radius: var(--radius-card);
box-shadow: var(--shadow-card);
transition: border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease;
}
.erp-tile:hover, .erp-hub-card:hover, .erp-stat-card:hover, .erp-kpi:hover, .fin-kpi:hover, .erp-resource-card:hover,
.erp-school-card:hover, .erp-owner-card:hover, .erp-quick-tile:hover, .erp-owner-quick-btn:hover,
.erp-parent-child-card:hover, .erp-card-link:focus-visible > * {
border-color: var(--tile-accent);
box-shadow: var(--shadow-card-hover);
}
/* A tile that is the current selection (a section switcher, the chosen child
on the Parent dashboard): hairline turns into a 2px ring + faint tint. */
.erp-tile.is-selected, .erp-hub-card.is-selected, .erp-stat-card.is-selected, .erp-resource-card.is-selected,
.erp-quick-tile.active, .erp-parent-child-card.is-selected {
border-color: var(--tile-accent);
box-shadow: 0 0 0 1px var(--tile-accent), var(--shadow-card-hover);
background: linear-gradient(0deg, rgba(var(--brand-rgb), 0.04), rgba(var(--brand-rgb), 0.04)), var(--color-surface);
background: linear-gradient(0deg, color-mix(in srgb, var(--tile-accent) 6%, transparent), color-mix(in srgb, var(--tile-accent) 6%, transparent)), var(--color-surface);
}
/* Summary / total tile - same accent, faint tint of it behind the figures. */
.erp-tile.is-total, .erp-kpi.is-total, .fin-kpi.is-total {
background: linear-gradient(135deg, rgba(var(--brand-rgb), 0.06), rgba(var(--brand-rgb), 0.02)), var(--color-surface);
background: linear-gradient(135deg, color-mix(in srgb, var(--tile-accent) 8%, transparent), transparent 70%), var(--color-surface);
}
/* ---- Automatic accent per position inside a tile group ---- */
:is(.erp-tile-group, .erp-hub-row, .erp-kpis, .fin-kpis, .fr-kpis, .inv-stats, .erp-toolbar-row, .erp-resource-grid,
.erp-school-grid, .erp-owner-grid, .erp-quick-grid, .erp-owner-quick-grid, .erp-parent-children) > :nth-child(8n+1) { --card-accent: var(--accent-1); }
:is(.erp-tile-group, .erp-hub-row, .erp-kpis, .fin-kpis, .fr-kpis, .inv-stats, .erp-toolbar-row, .erp-resource-grid,
.erp-school-grid, .erp-owner-grid, .erp-quick-grid, .erp-owner-quick-grid, .erp-parent-children) > :nth-child(8n+2) { --card-accent: var(--accent-2); }
:is(.erp-tile-group, .erp-hub-row, .erp-kpis, .fin-kpis, .fr-kpis, .inv-stats, .erp-toolbar-row, .erp-resource-grid,
.erp-school-grid, .erp-owner-grid, .erp-quick-grid, .erp-owner-quick-grid, .erp-parent-children) > :nth-child(8n+3) { --card-accent: var(--accent-3); }
:is(.erp-tile-group, .erp-hub-row, .erp-kpis, .fin-kpis, .fr-kpis, .inv-stats, .erp-toolbar-row, .erp-resource-grid,
.erp-school-grid, .erp-owner-grid, .erp-quick-grid, .erp-owner-quick-grid, .erp-parent-children) > :nth-child(8n+4) { --card-accent: var(--accent-4); }
:is(.erp-tile-group, .erp-hub-row, .erp-kpis, .fin-kpis, .fr-kpis, .inv-stats, .erp-toolbar-row, .erp-resource-grid,
.erp-school-grid, .erp-owner-grid, .erp-quick-grid, .erp-owner-quick-grid, .erp-parent-children) > :nth-child(8n+5) { --card-accent: var(--accent-5); }
:is(.erp-tile-group, .erp-hub-row, .erp-kpis, .fin-kpis, .fr-kpis, .inv-stats, .erp-toolbar-row, .erp-resource-grid,
.erp-school-grid, .erp-owner-grid, .erp-quick-grid, .erp-owner-quick-grid, .erp-parent-children) > :nth-child(8n+6) { --card-accent: var(--accent-6); }
:is(.erp-tile-group, .erp-hub-row, .erp-kpis, .fin-kpis, .fr-kpis, .inv-stats, .erp-toolbar-row, .erp-resource-grid,
.erp-school-grid, .erp-owner-grid, .erp-quick-grid, .erp-owner-quick-grid, .erp-parent-children) > :nth-child(8n+7) { --card-accent: var(--accent-7); }
:is(.erp-tile-group, .erp-hub-row, .erp-kpis, .fin-kpis, .fr-kpis, .inv-stats, .erp-toolbar-row, .erp-resource-grid,
.erp-school-grid, .erp-owner-grid, .erp-quick-grid, .erp-owner-quick-grid, .erp-parent-children) > :nth-child(8n+8) { --card-accent: var(--accent-8); }
/* Fixed colour for one tile, when the colour itself carries meaning
(Present = green, Absent / Overdue / Expenses = red, Pending = amber ...).
A group that pins some tiles should pin all of them, so they stay distinct. */
.erp-tone-navy { --card-tone: var(--accent-navy); }
.erp-tone-green { --card-tone: var(--accent-green); }
.erp-tone-amber { --card-tone: var(--accent-amber); }
.erp-tone-purple { --card-tone: var(--accent-purple); }
.erp-tone-teal { --card-tone: var(--accent-teal); }
.erp-tone-slate { --card-tone: var(--accent-slate); }
.erp-tone-brown { --card-tone: var(--accent-brown); }
.erp-tone-red { --card-tone: var(--accent-red); }
/* The icon badge and sparkline inside a tile take the tile's own colour, so a
card reads as one identity (accent line = icon = trend line). */
:is(.erp-tile, .erp-hub-card, .erp-stat-card, .erp-quick-tile, .erp-owner-quick-btn) :is(.erp-hub-icon, .erp-hub-card-icon, .erp-stat-icon, .erp-quick-tile-icon) {
color: var(--tile-accent);
background: rgba(var(--brand-rgb), 0.08);
background: color-mix(in srgb, var(--tile-accent) 11%, var(--color-surface));
}
.erp-owner-quick-btn .material-symbols-rounded { color: var(--tile-accent); }
.erp-spark-wrap path[stroke]:not([stroke="none"]) { stroke: var(--tile-accent, currentColor); }
.erp-spark-wrap circle { fill: var(--tile-accent, currentColor); }
.erp-spark-wrap stop { stop-color: var(--tile-accent, currentColor); }
/* A whole tile that is a link (dashboard KPI -> its report). */
.erp-card-link { display: flex; height: 100%; color: inherit; text-decoration: none; border-radius: var(--radius-card); }
.erp-card-link > * { flex: 1 1 auto; min-width: 0; }
.erp-card-link:focus-visible { outline: none; }
/* ---- Value state (the accent is identity; state is shown on the figure) ---- */
.erp-text-success { color: var(--status-success-fg) !important; }
.erp-text-danger { color: var(--status-danger-fg) !important; }
.erp-text-warning { color: var(--status-warning-fg) !important; }
.erp-text-muted { color: var(--color-text-secondary) !important; }
/* ---- One status vocabulary for every badge / pill in the app ---- */
.erp-badge, .fin-status, .feecash-status {
display: inline-flex; align-items: center; gap: 4px;
padding: 3px 10px; border-radius: var(--radius-pill);
font-size: 11.5px; font-weight: 600; line-height: 1.35; white-space: nowrap;
background: var(--status-neutral-bg); color: var(--status-neutral-fg);
}
.erp-badge-active, .erp-badge-success, .fin-status-done, .feecash-confirmed, .feecol-status-chip.is-ok { background: var(--status-success-bg); color: var(--status-success-fg); }
.erp-badge-inactive, .erp-badge-danger, .fin-status-bad, .feecash-rejected { background: var(--status-danger-bg); color: var(--status-danger-fg); }
.erp-badge-pending, .erp-badge-warning, .fin-status-pending, .feecash-pending, .feecol-status-chip.is-pending { background: var(--status-warning-bg); color: var(--status-warning-fg); }
.erp-badge-info, .fin-status-info, .feecol-status-chip.is-online { background: var(--status-info-bg); color: var(--status-info-fg); }
.erp-badge-withdrawn, .erp-badge-neutral, .fin-status-muted, .ar-badge-muted { background: var(--status-neutral-bg); color: var(--status-neutral-fg); }
/* ---- Amount columns ---- */
.erp-num, .fin-num, .inv-num, .fr-table .fr-num { text-align: end !important; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* ---- Focus ring (keyboard only) for every interactive control ---- */
.erp-btn:focus-visible, .erp-pill-btn:focus-visible, .erp-btn-pill:focus-visible, .erp-tab:focus-visible,
.erp-hub-btn:focus-visible, .fin-seg button:focus-visible, .erp-link-button:focus-visible, .erp-card-link:focus-visible > * {
outline: 2px solid var(--color-border-focus);
outline-offset: 2px;
}
/* ---- Reduced motion: honour the OS setting everywhere ---- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* ============================================================================
[V2.5] Phase 1 - toasts, confirm dialog, skeleton loading, pager, global
search (top bar button + command palette). Built on the V2.4 tokens above.
============================================================================ */
/* ---- Toasts (ToastHost / ToastService) ----
Top-right under the top bar on desktop, full width at the top on phones.
Above modals (1000), the palette (1400) and the confirm dialog (1500),
below the reconnect overlay and boot splash (3000). */
.erp-toasts {
position: fixed; top: 80px; right: var(--space-xl); z-index: 2500;
display: flex; flex-direction: column; gap: var(--space-sm);
width: min(380px, calc(100vw - 32px)); pointer-events: none;
}
.erp-toast {
--toast-accent: var(--accent-navy);
display: flex; align-items: flex-start; gap: 10px;
padding: 12px 10px 12px 14px;
background: var(--color-surface); color: var(--color-text-primary);
border: 1px solid var(--color-divider);
border-inline-start: var(--accent-width) solid var(--toast-accent);
border-radius: var(--radius-input);
box-shadow: 0 10px 30px rgba(10,25,47,0.16), 0 2px 6px rgba(10,25,47,0.08);
font-size: 13.5px; line-height: 1.45;
pointer-events: auto;
animation: erp-toast-in 0.22s ease-out;
}
.erp-toast.is-success { --toast-accent: var(--accent-green); }
.erp-toast.is-error { --toast-accent: var(--accent-red); }
.erp-toast.is-warning { --toast-accent: var(--accent-amber); }
.erp-toast.is-info { --toast-accent: var(--accent-navy); }
.erp-toast-icon { color: var(--toast-accent); font-size: 20px; margin-top: 1px; flex-shrink: 0; }
.erp-toast-text { flex: 1; min-width: 0; white-space: pre-line; overflow-wrap: anywhere; padding-top: 1px; }
.erp-toast-close {
display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
width: 26px; height: 26px; margin: -3px 0; border-radius: 50%;
border: none; background: transparent; color: var(--color-text-secondary); cursor: pointer;
}
.erp-toast-close:hover { background: var(--color-background); color: var(--color-text-primary); }
.erp-toast-close .material-symbols-rounded { font-size: 18px; }
.erp-toast-close:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 1px; }
/* JS-created toast (downloadHelper.js) - its own slot at the bottom. */
.erp-toast-standalone {
position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 2500;
width: max-content; max-width: min(460px, calc(100vw - 32px)); padding-right: 16px;
animation: none;
}
@keyframes erp-toast-in { from { opacity: 0; transform: translateY(-8px) scale(0.98); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) {
.erp-toasts { top: 64px; left: 16px; right: 16px; width: auto; }
.erp-in-app .erp-toast-standalone { bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
}
/* ---- Confirm dialog (ConfirmHost / ConfirmService) ---- */
.erp-confirm-overlay { z-index: 1500; }
.erp-confirm {
width: 420px; padding: var(--space-xl) var(--space-xl) var(--space-lg);
text-align: center;
}
.erp-confirm-icon {
width: 52px; height: 52px; margin: 0 auto var(--space-md); border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: var(--status-info-bg); color: var(--status-info-fg);
}
.erp-confirm-icon.is-danger { background: var(--status-danger-bg); color: var(--status-danger-fg); }
.erp-confirm-icon .material-symbols-rounded { font-size: 28px; }
.erp-confirm-title { margin: 0 0 6px; font-size: 17px; font-weight: 700; color: var(--color-text-primary); }
.erp-confirm-message { margin: 0 0 var(--space-lg); font-size: 13.5px; color: var(--color-text-secondary); line-height: 1.55; white-space: pre-line; }
.erp-confirm-actions { display: flex; gap: var(--space-sm); justify-content: center; flex-wrap: wrap; }
.erp-confirm-actions .erp-btn { min-width: 128px; }
@media (max-width: 640px) {
.erp-confirm-actions { flex-direction: column-reverse; }
.erp-confirm-actions .erp-btn { width: 100%; }
}
/* ---- Skeleton loading ----
Every page already shows
while it fetches. That same element is now drawn as grey placeholder lines
where the content will appear (no markup change on 160+ screens). It fades
in after 150 ms, so a fast response never flashes a skeleton at all. The
bars are an SVG without viewBox: widths in %, heights in px, so they stretch
with the container without distorting the rounded corners. */
.erp-loading-row {
display: block; position: relative; overflow: hidden;
min-height: 150px; padding: 0; margin: var(--space-sm) 0;
border-radius: var(--radius-input);
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='150'%3E%3Cg fill='%23E6EAF0'%3E%3Crect x='0' y='2' width='34%25' height='14' rx='7'/%3E%3Crect x='0' y='36' width='100%25' height='12' rx='6'/%3E%3Crect x='0' y='64' width='92%25' height='12' rx='6'/%3E%3Crect x='0' y='92' width='97%25' height='12' rx='6'/%3E%3Crect x='0' y='120' width='78%25' height='12' rx='6'/%3E%3C/g%3E%3C/svg%3E") no-repeat 0 0 / 100% 150px;
animation: erp-skeleton-in 0.25s ease 0.15s both;
}
.erp-loading-row > .erp-spinner { display: none; }
.erp-loading-row::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,0.65) 50%, transparent 80%);
transform: translateX(-100%);
animation: erp-skeleton-sweep 1.3s ease-in-out infinite;
}
@keyframes erp-skeleton-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes erp-skeleton-sweep { to { transform: translateX(100%); } }
/* ---- Pager (Pager.razor / PageState) ---- */
.erp-pager {
display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
flex-wrap: wrap; padding: var(--space-md) 2px 0;
font-size: 12.5px; color: var(--color-text-secondary);
}
.erp-pager-summary { font-variant-numeric: tabular-nums; }
.erp-pager-controls { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.erp-pager-size { display: inline-flex; align-items: center; gap: 6px; margin-inline-end: var(--space-sm); }
.erp-pager-size select {
font: inherit; font-size: 12.5px; color: var(--color-text-primary);
padding: 4px 6px; border: 1px solid var(--color-divider); border-radius: 8px; background: var(--color-surface);
}
.erp-pager-btn {
min-width: 32px; height: 32px; padding: 0 8px;
display: inline-flex; align-items: center; justify-content: center;
border: 1px solid var(--color-divider); border-radius: 8px; background: var(--color-surface);
font: inherit; font-size: 12.5px; font-weight: 600; color: var(--color-text-primary);
font-variant-numeric: tabular-nums; cursor: pointer;
}
.erp-pager-btn .material-symbols-rounded { font-size: 18px; }
.erp-pager-btn:hover:not(:disabled):not(.is-current) { border-color: var(--color-primary); color: var(--color-primary); }
.erp-pager-btn.is-current { background: var(--color-primary-fill); border-color: var(--color-primary); color: #fff; cursor: default; }
.erp-pager-btn:disabled { opacity: 0.4; cursor: default; }
.erp-pager-btn:focus-visible, .erp-pager-size select:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 2px; }
.erp-pager-gap { padding: 0 4px; }
/* ---- Global search: top bar button ---- */
.app-topbar-search {
display: inline-flex; align-items: center; gap: 8px;
height: 38px; min-width: 220px; padding: 0 8px 0 12px;
border: 1px solid rgba(255,255,255,0.22); border-radius: var(--radius-pill);
background: rgba(255,255,255,0.10); color: rgba(255,255,255,0.85);
font: inherit; font-size: 13px; cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease;
}
.app-topbar-search:hover { background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.35); }
.app-topbar-search:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.app-topbar-search .material-symbols-rounded { font-size: 19px; }
.app-topbar-search-text { flex: 1; text-align: start; }
.app-topbar-search-kbd {
font: inherit; font-size: 11px; font-weight: 600; letter-spacing: 0.3px;
padding: 2px 7px; border-radius: 6px;
background: rgba(255,255,255,0.14); color: rgba(255,255,255,0.9);
}
@media (max-width: 900px) {
.app-topbar-search { min-width: 0; width: 40px; height: 40px; padding: 0; justify-content: center; border-radius: 50%; flex-shrink: 0; }
.app-topbar-search-text, .app-topbar-search-kbd { display: none; }
}
/* ---- Global search: command palette ---- */
.erp-palette-overlay {
position: fixed; inset: 0; z-index: 1400;
background: rgba(10,25,47,0.45); backdrop-filter: blur(2px);
display: flex; justify-content: center; align-items: flex-start;
padding: 12vh var(--space-standard) var(--space-standard);
animation: erp-fade-in 0.12s ease;
}
.erp-palette {
width: 640px; max-width: 100%; max-height: min(560px, 76vh);
display: flex; flex-direction: column; overflow: hidden;
background: var(--color-surface); border-radius: var(--radius-dialog);
box-shadow: var(--shadow-dialog);
animation: erp-slide-up 0.16s ease;
}
.erp-palette-search {
display: flex; align-items: center; gap: 10px;
padding: 14px 16px; border-bottom: 1px solid var(--color-divider);
}
.erp-palette-search > .material-symbols-rounded { font-size: 22px; color: var(--color-text-secondary); }
.erp-palette-search input {
flex: 1; min-width: 0; border: none; outline: none; background: transparent;
font: inherit; font-size: 15px; color: var(--color-text-primary);
}
.erp-palette-search input::placeholder { color: var(--color-text-disabled); }
.erp-palette-spinner { width: 18px; height: 18px; border-width: 2px; margin: 0; flex-shrink: 0; }
.erp-palette-esc {
font: inherit; font-size: 11px; font-weight: 600; color: var(--color-text-secondary);
padding: 3px 8px; border: 1px solid var(--color-divider); border-radius: 6px;
background: var(--color-background); cursor: pointer;
}
.erp-palette-list { overflow-y: auto; padding: 6px 8px 8px; flex: 1; }
.erp-palette-group {
padding: 10px 10px 4px; font-size: 11px; font-weight: 700;
letter-spacing: 0.4px; text-transform: uppercase; color: var(--color-text-secondary);
}
.erp-palette-item {
display: flex; align-items: center; gap: 12px;
padding: 9px 10px; border-radius: 12px; cursor: pointer;
border: 1px solid transparent;
}
.erp-palette-item:hover { background: var(--color-background); }
.erp-palette-item.is-active { background: var(--status-info-bg); border-color: rgba(var(--brand-rgb), 0.18); }
.erp-palette-icon {
width: 34px; height: 34px; flex-shrink: 0; border-radius: 10px;
display: inline-flex; align-items: center; justify-content: center;
background: var(--color-background); color: var(--color-primary); font-size: 19px;
}
.erp-palette-avatar {
width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%;
background-size: cover; background-position: center; background-color: var(--color-divider);
}
.erp-palette-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.erp-palette-title { font-size: 13.5px; font-weight: 600; color: var(--color-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.erp-palette-sub { font-size: 12px; color: var(--color-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.erp-palette-action { flex-shrink: 0; }
.erp-palette-action .material-symbols-rounded { font-size: 15px; }
.erp-palette-empty {
display: flex; flex-direction: column; align-items: center; gap: 6px;
padding: 36px 16px; text-align: center; font-size: 13px; color: var(--color-text-secondary);
}
.erp-palette-empty .material-symbols-rounded { font-size: 34px; color: var(--color-text-disabled); }
.erp-palette-footer {
display: flex; gap: var(--space-lg); padding: 9px 16px;
border-top: 1px solid var(--color-divider); background: var(--color-background);
font-size: 11.5px; color: var(--color-text-secondary);
}
.erp-palette-footer kbd {
display: inline-block; min-width: 18px; margin-inline-end: 3px; padding: 1px 5px;
font: inherit; font-size: 11px; font-weight: 600; text-align: center;
border: 1px solid var(--color-divider); border-bottom-width: 2px; border-radius: 5px;
background: var(--color-surface); color: var(--color-text-primary);
}
@media (max-width: 640px) {
.erp-palette-overlay { padding: 0; align-items: stretch; }
.erp-palette { max-height: none; height: 100%; border-radius: 0; }
.erp-palette-footer { display: none; }
}
/* ---- "No results" row inside a filtered table (the filter row stays usable) ---- */
.erp-table td.erp-table-empty {
text-align: center; padding: var(--space-xl) var(--space-standard);
color: var(--color-text-secondary); font-size: 13px;
}
.erp-palette-tip {
display: flex; align-items: center; gap: 8px;
padding: 8px 18px; font-size: 12px; color: var(--color-text-secondary);
background: var(--color-background); border-bottom: 1px solid var(--color-divider);
}
.erp-palette-tip .material-symbols-rounded { font-size: 16px; color: var(--accent-amber); }
.erp-palette-esc-icon { display: none; font-size: 18px; }
@media (max-width: 640px) {
.erp-palette-esc { border: none; background: transparent; padding: 4px; }
.erp-palette-esc-key { display: none; }
.erp-palette-esc-icon { display: inline-flex; }
}
/* ---- [V2.5] Collect Fee: challan barcode scan bar ---- */
.erp-scan-bar {
display: flex; align-items: center; gap: 10px;
max-width: 520px; margin-bottom: var(--space-md); padding: 0 14px;
border: 1.5px dashed var(--color-border-disabled); border-radius: var(--radius-input);
background: var(--color-surface);
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.erp-scan-bar:focus-within { border-style: solid; border-color: var(--color-secondary); box-shadow: 0 0 0 3px rgba(30,136,229,0.14); }
.erp-scan-bar > .material-symbols-rounded { font-size: 22px; color: var(--color-primary); }
.erp-scan-bar input {
flex: 1; min-width: 0; border: none; outline: none; background: transparent;
padding: 11px 0; font: inherit; font-size: 13.5px; letter-spacing: 0.3px; color: var(--color-text-primary);
}
.erp-scan-bar input::placeholder { color: var(--color-text-disabled); letter-spacing: normal; }
/* ---- [V2.5] Collect Fee: family (siblings) ---- */
.feecol-family-banner {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
padding: 10px 12px; margin-bottom: var(--space-md);
border: 1px solid rgba(91,44,148,0.22); border-inline-start: var(--accent-width) solid var(--accent-purple);
border-radius: var(--radius-input); background: rgba(91,44,148,0.05);
}
.feecol-family-banner > .material-symbols-rounded { font-size: 24px; color: var(--accent-purple); }
.feecol-family-list { border: 1px solid var(--color-divider); border-radius: var(--radius-input); padding: 6px 12px 10px; }
.feecol-family-row {
display: flex; align-items: center; gap: 10px;
padding: 8px 0; border-bottom: 1px solid var(--color-divider);
}
.feecol-family-row input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--color-primary); flex-shrink: 0; }
.feecol-family-row.is-disabled { opacity: 0.55; }
/* ---- [V2.5] Fee Reports: defaulter follow-up ---- */
.fu-filters { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-lg); margin: var(--space-sm) 0; }
.fu-filter-group { display: flex; flex-wrap: wrap; gap: 6px; }
.fu-count {
display: inline-block; min-width: 18px; margin-inline-start: 4px; padding: 0 5px;
border-radius: var(--radius-pill); background: var(--color-background);
font-size: 11px; font-weight: 700; text-align: center;
}
.feecol-chip.is-active .fu-count { background: rgba(255,255,255,0.25); }
.fu-wa-btn { border-color: rgba(0,100,0,0.35); color: #0B6B34; }
.fu-wa-btn:hover { background: rgba(0,100,0,0.06); }
.fu-history { margin-top: var(--space-md); padding-top: var(--space-md); border-top: 1px solid var(--color-divider); max-height: 240px; overflow-y: auto; }
.fu-history-row { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; border-bottom: 1px solid var(--color-divider); font-size: 13px; }
.fu-history-row:last-child { border-bottom: none; }
/* ---- [V2.5] Action Center: top bar shortcut + page ---- */
.app-topbar-action {
position: relative; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
width: 38px; height: 38px; border-radius: 50%; color: #fff; text-decoration: none;
transition: background 0.15s ease;
}
.app-topbar-action:hover { background: rgba(255,255,255,0.10); }
.app-topbar-action .material-symbols-rounded { font-size: 22px; }
.app-topbar-action-badge {
position: absolute; top: 2px; right: 0;
background: var(--accent-amber); color: #fff;
font-size: 9px; font-weight: 700; line-height: 1;
min-width: 15px; height: 15px; border-radius: var(--radius-pill);
display: flex; align-items: center; justify-content: center;
padding: 0 3px; border: 1.5px solid var(--color-primary-dark);
}
.ac-summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-lg); }
.ac-summary-total { display: flex; align-items: baseline; gap: 8px; margin-inline-end: var(--space-md); color: var(--color-text-secondary); font-size: 13px; }
.ac-summary-count { font-size: 28px; font-weight: 800; color: var(--color-primary); line-height: 1; }
.ac-summary-chip {
display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
border: 1px solid var(--color-divider); border-radius: var(--radius-pill); background: var(--color-surface);
font-size: 12.5px; font-weight: 600; color: var(--color-text-primary); text-decoration: none;
}
.ac-summary-chip:hover { border-color: var(--color-primary); color: var(--color-primary); }
.ac-summary-chip .material-symbols-rounded { font-size: 16px; color: var(--color-primary); }
.ac-group { margin-bottom: var(--space-lg); padding: var(--space-md) var(--space-lg); scroll-margin-top: 84px; }
.ac-group-head { display: flex; align-items: center; gap: 10px; padding-bottom: var(--space-sm); border-bottom: 1px solid var(--color-divider); }
.ac-group-icon {
width: 32px; height: 32px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
background: var(--status-info-bg); color: var(--color-primary); font-size: 18px;
}
.ac-group-title { flex: 1; margin: 0; font-size: 14.5px; font-weight: 700; }
.ac-item { display: flex; align-items: center; gap: var(--space-md); padding: 10px 0; border-bottom: 1px solid var(--color-divider); flex-wrap: wrap; }
.ac-item:last-of-type { border-bottom: none; }
.ac-item-main { flex: 1 1 260px; min-width: 0; }
.ac-item-title { font-weight: 600; font-size: 13.5px; }
.ac-item-sub { font-size: 12.5px; color: var(--color-text-secondary); margin-top: 1px; overflow-wrap: anywhere; }
.ac-item-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11.5px; color: var(--color-text-disabled); margin-top: 3px; }
.ac-item-amount { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ac-item-actions { display: flex; gap: 6px; flex-shrink: 0; }
.ac-approve { border-color: rgba(0,100,0,0.35); color: #0B6B34; }
.ac-approve:hover { background: rgba(0,100,0,0.06); }
.ac-more { display: inline-block; margin-top: var(--space-sm); font-size: 12.5px; font-weight: 600; }
/* ==========================================================================
[V2.5] Phase 3 - Data Import, setup checklist, Student 360
========================================================================== */
/* ---- Data Import ---- */
.di-school { max-width: 260px; margin-inline-start: auto; height: 38px; padding-top: 6px; padding-bottom: 6px; }
.di-steps { display: flex; flex-direction: column; gap: var(--space-md); margin-top: var(--space-md); }
.di-step { display: flex; gap: var(--space-md); align-items: flex-start; padding: var(--space-lg); }
.di-step-num {
flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
background: var(--color-primary-fill); color: #fff; font-weight: 800; font-size: 14px;
}
.di-step-body { flex: 1; min-width: 0; }
.di-step-title { margin: 4px 0 4px; font-size: 15px; font-weight: 700; }
.di-step-text { margin: 0 0 var(--space-md); color: var(--color-text-secondary); font-size: 13px; }
.di-upload-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); }
.di-upload { cursor: pointer; }
.di-upload.is-disabled { opacity: 0.6; pointer-events: none; }
.di-file-name { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--color-text-secondary); overflow-wrap: anywhere; }
.di-file-name .material-symbols-rounded { font-size: 18px; color: var(--accent-green); }
.di-option { display: flex; gap: 8px; align-items: flex-start; margin-top: var(--space-md); font-size: 13px; color: var(--color-text-secondary); cursor: pointer; }
.di-option input { margin-top: 3px; }
.di-busy { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-lg); font-weight: 600; }
.di-summary { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-bottom: var(--space-md); }
.di-chip {
display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; cursor: pointer;
border: 1px solid var(--color-divider); border-radius: var(--radius-pill); background: var(--color-surface);
font: inherit; font-size: 12.5px; font-weight: 600; color: var(--color-text-primary);
}
.di-chip .material-symbols-rounded { font-size: 16px; }
.di-chip.is-ok .material-symbols-rounded { color: var(--accent-green); }
.di-chip.is-error .material-symbols-rounded { color: var(--color-error); }
.di-chip.active { border-color: var(--color-primary); box-shadow: inset 0 0 0 1px var(--color-primary); }
.di-hint { margin-bottom: var(--space-md); }
.di-row-error td { background: var(--status-danger-bg); }
.di-notes { font-size: 12.5px; color: var(--color-text-secondary); min-width: 220px; }
.di-row-error .di-notes { color: var(--status-danger-fg); }
.di-ref { font-size: 11.5px; font-weight: 700; margin-top: 3px; font-variant-numeric: tabular-nums; }
.di-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-md); }
/* ---- Setup checklist card ---- */
.sc-card { padding: 0; margin-bottom: var(--space-lg); overflow: hidden; border-inline-start: 4px solid var(--accent-amber); }
.sc-head {
width: 100%; display: flex; align-items: center; gap: var(--space-md); padding: var(--space-md) var(--space-lg);
background: none; border: 0; cursor: pointer; font: inherit; color: inherit; text-align: start;
}
.sc-head-icon {
flex-shrink: 0; width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
background: var(--status-warning-bg); color: var(--accent-amber); font-size: 20px;
}
.sc-head-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sc-title { font-weight: 700; font-size: 14.5px; }
.sc-sub { font-size: 12.5px; color: var(--color-text-secondary); }
.sc-bar { flex: 0 0 140px; height: 8px; border-radius: var(--radius-pill); background: var(--color-divider); overflow: hidden; }
.sc-bar-fill { display: block; height: 100%; background: var(--accent-green); border-radius: inherit; transition: width 0.3s ease; }
.sc-chevron { color: var(--color-text-secondary); }
.sc-steps { list-style: none; margin: 0; padding: 0 var(--space-lg) var(--space-sm); border-top: 1px solid var(--color-divider); }
.sc-step { display: flex; align-items: center; gap: var(--space-md); padding: 10px 0; border-bottom: 1px solid var(--color-divider); flex-wrap: wrap; }
.sc-step:last-child { border-bottom: none; }
.sc-step-icon { font-size: 22px; color: var(--color-primary); }
.sc-step.is-done .sc-step-icon { color: var(--accent-green); }
.sc-step.is-done .sc-step-title { color: var(--color-text-secondary); }
.sc-step-main { flex: 1 1 220px; min-width: 0; }
.sc-step-title { font-weight: 600; font-size: 13.5px; }
.sc-step-hint { font-size: 12.5px; color: var(--color-text-secondary); }
.sc-optional { margin-inline-start: 6px; font-size: 11px; font-weight: 600; color: var(--color-text-disabled); text-transform: uppercase; letter-spacing: 0.03em; }
.sc-go { text-decoration: none; white-space: nowrap; }
.sc-owner-note { font-size: 12px; color: var(--color-text-disabled); white-space: nowrap; }
@media (max-width: 640px) {
.sc-bar { display: none; }
}
/* ---- Student 360 ---- */
.sd-name-link { color: inherit; font-weight: 600; text-decoration: none; }
.sd-name-link:hover { color: var(--color-primary); text-decoration: underline; }
.s360-back { margin-bottom: var(--space-sm); }
.s360-hero { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-lg); padding: var(--space-lg); }
.s360-photo {
flex-shrink: 0; width: 84px; height: 84px; border-radius: 50%; overflow: hidden;
display: flex; align-items: center; justify-content: center;
background: var(--gradient-brand); color: #fff; font-size: 28px; font-weight: 800;
}
.s360-photo img { width: 100%; height: 100%; object-fit: cover; }
.s360-identity { flex: 1 1 260px; min-width: 0; }
.s360-name { margin: 0; font-size: 22px; font-weight: 800; line-height: 1.2; }
.s360-name-urdu { font-family: 'Noto Nastaliq Urdu', serif; font-size: 16px; color: var(--color-text-secondary); margin-top: 2px; }
.s360-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px; font-size: 13px; color: var(--color-text-secondary); }
.s360-meta .material-symbols-rounded { font-size: 16px; vertical-align: -3px; color: var(--color-primary); }
.s360-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.s360-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.s360-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-md); margin: var(--space-md) 0; }
.s360-kpi { display: flex; align-items: center; gap: var(--space-md); text-align: start; font: inherit; color: inherit; cursor: pointer; border: 1px solid var(--color-divider); }
.s360-kpi:hover { box-shadow: var(--shadow-card-hover); }
.s360-kpi .erp-stat-value small { font-size: 13px; font-weight: 700; color: var(--color-text-secondary); }
.s360-kpi-hint { font-size: 12px; color: var(--color-text-secondary); margin-top: 2px; }
.s360-warn { color: var(--color-error); font-weight: 700; }
.s360-tabs { margin-bottom: var(--space-md); overflow-x: auto; }
.s360-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--space-md); }
.s360-grid { margin-bottom: var(--space-lg); }
.s360-grid > .erp-section { margin: 0; }
.s360-panel { padding: var(--space-standard) var(--space-lg); }
.s360-h { margin: 0 0 var(--space-md); font-size: 14px; font-weight: 700; }
.s360-h .erp-caption { font-weight: 500; margin-inline-start: 6px; }
.s360-person, .s360-row {
display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
padding: 10px 0; border-bottom: 1px solid var(--color-divider); flex-wrap: wrap;
}
.s360-person:last-child, .s360-row:last-child { border-bottom: none; }
.s360-person > div:first-child, .s360-row > div:first-child { flex: 1 1 180px; min-width: 0; }
.s360-person-name { font-weight: 600; font-size: 13.5px; }
.s360-contact { display: flex; gap: 6px; }
.s360-contact a { text-decoration: none; }
.s360-link { color: inherit; text-decoration: none; }
.s360-link:hover .s360-person-name { color: var(--color-primary); }
.s360-row.is-reversed .s360-person-name { text-decoration: line-through; color: var(--color-text-disabled); }
.s360-dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
.s360-dl dt { font-size: 11.5px; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.03em; }
.s360-dl dd { margin: 2px 0 0; font-weight: 600; font-size: 13.5px; }
.s360-overdue td { background: var(--status-danger-bg); }
.erp-table td.num, .erp-table th.num { text-align: end; font-variant-numeric: tabular-nums; }
.s360-att-chips, .s360-dates { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-bottom: var(--space-md); }
.s360-chip {
display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--radius-pill);
background: var(--status-neutral-bg); color: var(--status-neutral-fg); font-size: 12.5px; font-weight: 600;
}
.s360-chip.is-green { background: var(--status-success-bg); color: var(--status-success-fg); }
.s360-chip.is-red { background: var(--status-danger-bg); color: var(--status-danger-fg); }
.s360-chip.is-amber { background: var(--status-warning-bg); color: var(--status-warning-fg); }
.s360-chip.is-blue { background: var(--status-info-bg); color: var(--status-info-fg); }
.s360-bar { display: inline-block; width: calc(100% - 52px); height: 8px; border-radius: var(--radius-pill); background: var(--color-divider); overflow: hidden; vertical-align: middle; margin-inline-end: 8px; }
.s360-bar span { display: block; height: 100%; background: var(--accent-green); }
.s360-bar span.is-low { background: var(--accent-amber); }
.s360-timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.s360-timeline::before { content: ""; position: absolute; top: 6px; bottom: 6px; inset-inline-start: 15px; width: 2px; background: var(--color-divider); }
.s360-event { position: relative; display: flex; gap: var(--space-md); padding: 6px 0; }
.s360-event-icon {
position: relative; flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center; font-size: 17px;
background: var(--status-info-bg); color: var(--status-info-fg); border: 2px solid var(--color-surface);
}
.s360-event.is-payment .s360-event-icon, .s360-event.is-admission .s360-event-icon { background: var(--status-success-bg); color: var(--status-success-fg); }
.s360-event.is-absence .s360-event-icon, .s360-event.is-withdrawal .s360-event-icon { background: var(--status-danger-bg); color: var(--status-danger-fg); }
.s360-event.is-followup .s360-event-icon, .s360-event.is-leave .s360-event-icon { background: var(--status-warning-bg); color: var(--status-warning-fg); }
.s360-event-title { font-weight: 600; font-size: 13.5px; padding-top: 5px; }
@media (max-width: 640px) {
.s360-photo { width: 64px; height: 64px; font-size: 22px; }
.s360-name { font-size: 19px; }
.s360-actions { width: 100%; }
.s360-actions > * { flex: 1; justify-content: center; }
.s360-grid { grid-template-columns: 1fr; }
.s360-dl { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
.s360-kpi { flex-direction: column; align-items: flex-start; gap: 6px; padding: var(--space-md); }
.s360-kpi .erp-stat-value { font-size: 18px; }
}
/* ============================================================================
[V2.5 Phase 4.1] Timetable (Timetable.razor, MyTimetable.razor, TimetableGrid.razor)
============================================================================ */
.tt-school { max-width: 260px; margin-inline-start: auto; height: 38px; padding-top: 6px; padding-bottom: 6px; }
.tt-panel { padding: var(--space-md) var(--space-lg); }
.tt-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); margin-top: var(--space-md); }
.tt-picker { max-width: 340px; height: 40px; padding-top: 6px; padding-bottom: 6px; }
.tt-date { margin-bottom: 0; min-width: 180px; }
.tt-toolbar-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-inline-start: auto; }
.tt-section-title { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 700; margin: 0 0 var(--space-sm); }
.tt-hint { font-size: 12.5px; margin: var(--space-sm) 0 0; }
.tt-grid-wrap { overflow-x: auto; margin-top: var(--space-md); background: var(--color-surface); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.tt-grid { width: 100%; border-collapse: collapse; table-layout: fixed; min-width: 720px; }
.tt-grid th, .tt-grid td { border: 1px solid var(--color-divider); text-align: center; vertical-align: middle; }
.tt-grid thead th { background: var(--color-primary-fill); color: #fff; padding: 6px 4px; font-weight: 600; }
.tt-grid thead th.tt-break-col { background: #5B6B82; }
.tt-period-label { display: block; font-size: 12.5px; }
.tt-period-time { display: block; font-size: 11px; font-weight: 400; opacity: 0.85; }
.tt-day-col { width: 96px; }
.tt-grid tbody th.tt-day-col { background: var(--status-info-bg); color: var(--color-text-primary); font-size: 13px; font-weight: 600; padding: 6px; }
.tt-grid tr.is-today th.tt-day-col { background: var(--color-primary-fill); color: #fff; }
.tt-break-col { width: 40px; }
.tt-grid thead th.tt-break-col .tt-period-time { display: none; }
.tt-grid thead th.tt-break-col .tt-period-label { font-size: 10.5px; writing-mode: vertical-rl; transform: rotate(180deg); margin: 0 auto; white-space: nowrap; }
.tt-grid td.tt-break-col { background: repeating-linear-gradient(135deg, var(--color-divider) 0 6px, transparent 6px 12px); }
.tt-grid td { height: 64px; padding: 0; }
.tt-cell { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 100%; height: 100%; min-height: 64px; padding: 4px; border: 0; background: transparent; color: inherit; font: inherit; }
button.tt-cell { cursor: pointer; transition: background 0.15s; }
button.tt-cell:hover { background: var(--status-info-bg); }
button.tt-cell:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: -2px; }
.tt-cell-main { font-weight: 600; font-size: 13px; line-height: 1.2; overflow-wrap: anywhere; }
.tt-cell-sub { font-size: 11.5px; color: var(--color-text-secondary); line-height: 1.2; overflow-wrap: anywhere; }
.tt-cell-sub.is-missing { color: var(--status-warning-fg); }
.tt-cell-add { font-size: 20px; color: var(--color-text-disabled); }
.tt-grid td.is-cover { background: var(--status-success-bg); }
.tt-cover-tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--status-success-fg); }
.tt-subject-counts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: var(--space-sm); font-size: 12.5px; }
.tt-count-chip { padding: 3px 10px; border-radius: var(--radius-pill); background: var(--status-info-bg); color: var(--status-info-fg); }
.tt-away-list { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.tt-away-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 8px 6px 12px; border-radius: var(--radius-pill); background: var(--status-danger-bg); color: var(--status-danger-fg); font-size: 13px; }
.tt-away-chip.is-done { background: var(--status-success-bg); color: var(--status-success-fg); }
.tt-away-reason { font-size: 11.5px; opacity: 0.85; }
.tt-chip-x { display: inline-flex; border: 0; background: transparent; color: inherit; cursor: pointer; padding: 0; }
.tt-chip-x .material-symbols-rounded { font-size: 16px; }
.tt-add-away { margin-top: var(--space-sm); max-width: 340px; }
.tt-add-away select { height: 38px; padding-top: 6px; padding-bottom: 6px; }
.tt-sub-table td { vertical-align: middle; }
.tt-sub-table tr.tt-row-open td:first-child { box-shadow: inset 3px 0 0 var(--accent-amber); }
.tt-sub-table tr.tt-row-done td:first-child { box-shadow: inset 3px 0 0 var(--accent-green); }
.tt-sub-select { min-width: 190px; height: 36px; padding-top: 4px; padding-bottom: 4px; }
.tt-sub-note { min-width: 160px; height: 36px; padding-top: 4px; padding-bottom: 4px; }
.tt-days { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-bottom: var(--space-lg); }
.tt-day-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; cursor: pointer; white-space: nowrap; }
.tt-bell-list { display: flex; flex-direction: column; gap: var(--space-sm); }
.tt-bell-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); padding: 8px; border-radius: var(--radius-input); background: var(--color-background); }
.tt-bell-row.is-break { background: var(--status-warning-bg); }
.tt-bell-row .erp-input { height: 38px; padding-top: 6px; padding-bottom: 6px; }
.tt-bell-label { flex: 1 1 160px; min-width: 120px; }
.tt-bell-time { width: 150px; }
.tt-bell-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-md); }
.tt-cover-list { margin: 0; padding-inline-start: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; }
.tt-cover-note { font-size: 12.5px; color: var(--color-text-secondary); }
@media (max-width: 640px) {
.tt-toolbar-actions { margin-inline-start: 0; width: 100%; }
.tt-toolbar-actions > * { flex: 1; justify-content: center; }
.tt-tabs { overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.tt-tabs::-webkit-scrollbar { display: none; }
.tt-tabs .erp-tab { flex-shrink: 0; }
.tt-picker, .tt-school, .tt-add-away { max-width: none; width: 100%; }
.tt-bell-time { width: calc(50% - 20px); }
}
/* ============================================================================
[V2.5 Phase 4.2] Date sheet & admit cards (DateSheet.razor), Results print row
============================================================================ */
.ds-class-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); }
.ds-table td { vertical-align: middle; }
.ds-input { height: 36px; padding-top: 4px; padding-bottom: 4px; min-width: 130px; }
.ds-instructions { width: 100%; min-height: 130px; resize: vertical; padding-top: 10px; font-family: inherit; line-height: 1.5; }
.ds-count { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: var(--radius-pill); font-size: 12.5px; font-weight: 600; }
.ds-count.is-ok, .ds-chip.is-ok { background: var(--status-success-bg); color: var(--status-success-fg); }
.ds-count.is-blocked, .ds-chip.is-blocked { background: var(--status-danger-bg); color: var(--status-danger-fg); }
.ds-chip { display: inline-block; padding: 2px 10px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 600; }
.ds-chip.is-allowed { background: var(--status-warning-bg); color: var(--status-warning-fg); }
.ds-reason { font-size: 11.5px; margin-top: 2px; }
.ds-actions { white-space: nowrap; }
.ds-actions > * + * { margin-inline-start: 6px; }
.rs-print-row { display: flex; justify-content: flex-end; margin-bottom: var(--space-md); }
@media (max-width: 640px) {
.rs-print-row > .erp-btn { width: 100%; justify-content: center; }
}
/* ============================================================================
[V2.5 Phase 4.3] Certificates (Certificates.razor)
============================================================================ */
.ct-search { margin-bottom: 0; min-width: 260px; flex: 1 1 280px; max-width: 520px; }
.ct-filter { max-width: 240px; }
.ct-options { list-style: none; margin: var(--space-sm) 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; max-width: 620px; }
.ct-option { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: 100%; text-align: start; padding: 8px 12px; border: 1px solid var(--color-divider); border-radius: var(--radius-input); background: var(--color-surface); color: inherit; font: inherit; cursor: pointer; }
.ct-option:hover, .ct-option:focus-visible { border-color: var(--color-primary); background: var(--status-info-bg); outline: none; }
.ct-adm { font-size: 13px; font-weight: 500; margin-inline-start: 6px; }
.ct-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-sm) var(--space-lg); margin: var(--space-md) 0; }
.ct-facts dt { font-size: 11.5px; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.03em; }
.ct-facts dd { margin: 2px 0 0; font-weight: 600; }
.ct-due { color: var(--status-danger-fg); }
.ct-types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); margin-bottom: var(--space-md); }
.ct-type { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border: 1.5px solid var(--color-divider); border-radius: var(--radius-card); cursor: pointer; font-size: 13.5px; }
.ct-type input { margin-top: 3px; }
.ct-type .material-symbols-rounded { color: var(--color-primary); font-size: 22px; }
.ct-type.is-on { border-color: var(--color-primary); background: var(--status-info-bg); }
.ct-type.is-off { cursor: not-allowed; opacity: 0.75; }
.ct-type.is-off .erp-text-muted { color: var(--status-danger-fg); }
.ct-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-md); }
.ct-wide { grid-column: 1 / -1; }
.ct-prev-title { margin-top: var(--space-lg); }
tr.ct-cancelled td { opacity: 0.7; }
tr.ct-cancelled td:first-child strong { text-decoration: line-through; }
@media (max-width: 640px) {
.ct-facts, .ct-types, .ct-form { grid-template-columns: 1fr; }
.ct-search, .ct-filter { max-width: none; width: 100%; }
}
/* [V2.5 Phase 4.4] ID cards (IdCards.razor) */
.idc-check-col { width: 44px; text-align: center; }
.idc-check-col input { width: 16px; height: 16px; cursor: pointer; }
/* ============================================================================
[V2.5 Phase 4.5] Academic calendar (AcademicCalendar.razor)
============================================================================ */
.cal-panel { padding: var(--space-md) var(--space-lg); }
.cal-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-md); }
.cal-nav { display: flex; align-items: center; gap: var(--space-sm); }
.cal-nav-btn { padding-inline: 8px; min-width: 38px; }
.cal-month { margin: 0; min-width: 170px; text-align: center; font-size: 18px; font-weight: 700; }
.cal-add { margin-inline-start: auto; }
.cal-toolbar .tt-school + .cal-add { margin-inline-start: 0; }
.cal-legend { display: flex; flex-wrap: wrap; gap: 6px; margin: var(--space-md) 0 var(--space-sm); }
.cal-chip { display: inline-flex; align-items: center; max-width: 100%; padding: 2px 8px; border: 0; border-radius: 999px; font: inherit; font-size: 11.5px; font-weight: 600; line-height: 1.5; background: var(--status-neutral-bg); color: var(--status-neutral-fg); }
button.cal-chip { cursor: pointer; text-align: start; }
button.cal-chip:hover, button.cal-chip:focus-visible { filter: brightness(0.95); outline: 2px solid var(--color-border-focus); outline-offset: 1px; }
.cal-chip-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-type-holiday { background: var(--status-danger-bg); color: var(--status-danger-fg); }
.cal-type-vacation { background: var(--status-warning-bg); color: var(--status-warning-fg); }
.cal-type-exam { background: var(--status-info-bg); color: var(--status-info-fg); }
.cal-type-event { background: var(--status-success-bg); color: var(--status-success-fg); }
.cal-type-ptm { background: color-mix(in srgb, var(--color-primary) 14%, transparent); color: var(--color-primary); }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--color-divider); border-inline-start: 1px solid var(--color-divider); }
.cal-head { padding: 6px; font-size: 12px; font-weight: 700; text-align: center; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.03em; border-bottom: 1px solid var(--color-divider); border-inline-end: 1px solid var(--color-divider); background: var(--color-background); }
.cal-day { display: flex; flex-direction: column; gap: 3px; min-height: 96px; padding: 4px 5px 6px; border-bottom: 1px solid var(--color-divider); border-inline-end: 1px solid var(--color-divider); min-width: 0; }
.cal-day.is-other { background: var(--color-background); }
.cal-day.is-other .cal-day-num { color: var(--color-text-disabled); }
.cal-day.is-closed { background: color-mix(in srgb, var(--status-danger-bg) 55%, transparent); }
.cal-day.is-sunday .cal-day-num { color: var(--status-danger-fg); }
.cal-day-num { align-self: flex-start; min-width: 26px; height: 26px; padding: 0 4px; border: 0; border-radius: 999px; background: transparent; color: inherit; font: inherit; font-size: 13px; font-weight: 600; line-height: 26px; text-align: center; }
button.cal-day-num { cursor: pointer; }
button.cal-day-num:hover, button.cal-day-num:focus-visible { background: var(--status-info-bg); outline: none; }
.cal-day.is-today .cal-day-num { background: var(--color-primary-fill); color: #fff; }
.cal-more { font-size: 11px; color: var(--color-text-secondary); padding-inline-start: 4px; }
.cal-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.cal-item { display: grid; grid-template-columns: 190px minmax(0, 1fr) auto; gap: var(--space-md); align-items: start; padding: 12px 0; border-top: 1px solid var(--color-divider); }
.cal-item:first-child { border-top: 0; }
.cal-item-date { display: flex; flex-direction: column; font-size: 13.5px; }
.cal-item-title { margin-inline-start: 6px; }
.cal-item-desc { margin-top: 4px; font-size: 13px; }
.cal-item-closed { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 12.5px; color: var(--status-danger-fg); }
.cal-item-closed .material-symbols-rounded { font-size: 18px; }
.cal-item-actions { display: flex; gap: 6px; white-space: nowrap; }
.cal-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-md); }
.cal-wide { grid-column: 1 / -1; }
.cal-type-pick { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--space-md); }
.cal-type-option { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px 4px 6px; border: 1.5px solid var(--color-divider); border-radius: 999px; cursor: pointer; }
.cal-type-option.is-on { border-color: var(--color-primary); }
.cal-type-option input { margin: 0; }
@media (max-width: 760px) {
.cal-panel { padding: var(--space-sm) var(--space-md); }
.cal-day { min-height: 54px; padding: 2px; align-items: center; }
.cal-day .cal-chip { width: 8px; height: 8px; padding: 0; font-size: 0; }
.cal-day .cal-chip-text, .cal-more { display: none; }
.cal-head { padding: 4px 0; font-size: 10.5px; letter-spacing: 0; }
.cal-item { grid-template-columns: 1fr; gap: 6px; }
.cal-toolbar { flex-direction: column; align-items: stretch; }
.cal-nav { justify-content: space-between; }
.cal-month { min-width: 0; flex: 1; font-size: 16px; }
.cal-add { margin-inline-start: 0; justify-content: center; }
.cal-form { grid-template-columns: 1fr; }
}
/* ============================================================================
[V2.5 Phase 5.1] Result analytics (Exams/ResultAnalytics.razor)
One series per chart, so one hue (--color-primary); value printed on each row.
============================================================================ */
.ra-select { max-width: 320px; height: 40px; padding-top: 6px; padding-bottom: 6px; }
.ra-context-text { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ra-grid { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(0, 2fr); gap: var(--space-lg); align-items: start; }
.ra-grid > .fr-card { margin-bottom: 0; }
#ra_at_risk { margin-bottom: var(--space-lg); }
.ra-tab-count { margin-inline-start: 6px; }
.ra-note { margin: var(--space-sm) 0 0; }
.ra-bars { display: flex; flex-direction: column; gap: 8px; margin: var(--space-sm) 0; }
.ra-bar-row { display: grid; grid-template-columns: minmax(64px, 140px) minmax(0, 1fr) 96px; align-items: center; gap: 10px; font-size: 13px; }
.ra-bar-label { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ra-bar-track { height: 14px; border-radius: 0 4px 4px 0; background: var(--color-divider); overflow: hidden; }
.ra-bar-fill { height: 100%; border-radius: 0 4px 4px 0; background: var(--color-primary-fill); transition: width 0.3s ease; }
[dir="rtl"] .ra-bar-track, [dir="rtl"] .ra-bar-fill { border-radius: 4px 0 0 4px; }
.ra-bar-value { font-weight: 600; font-variant-numeric: tabular-nums; }
.ra-subject-table { margin-top: var(--space-md); }
tr.ra-sub-row td { font-size: 12.5px; background: var(--color-background); }
tr.ra-sub-row td:first-child { padding-inline-start: 28px; }
.ra-change { display: inline-flex; align-items: center; gap: 1px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--color-text-secondary); }
.ra-change .material-symbols-rounded { font-size: 15px; }
.ra-change.is-up { color: var(--status-success-fg); }
.ra-change.is-down { color: var(--status-danger-fg); }
.ra-rank, .ra-changes { list-style: none; margin: 0; padding: 0; }
.ra-rank li, .ra-changes li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--color-divider); font-size: 13.5px; }
.ra-rank li:first-child, .ra-changes li:first-child { border-top: 0; }
.ra-pos { flex: 0 0 26px; height: 26px; border-radius: 999px; background: var(--status-info-bg); color: var(--status-info-fg); font-weight: 700; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; }
.ra-rank-name { flex: 1; min-width: 0; }
.ra-rank-name a { font-weight: 600; color: inherit; }
.ra-subtitle { margin: var(--space-md) 0 4px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-text-secondary); }
@media (max-width: 900px) {
.ra-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
.ra-select { max-width: none; width: 100%; }
.ra-bar-row { grid-template-columns: 72px minmax(0, 1fr) 84px; gap: 6px; }
.ra-rank li, .ra-changes li { flex-wrap: wrap; }
}
/* ============================================================================
[V2.5 Phase 5.2] Parent timeline (Parent/Timeline.razor)
Tone colours always come with an icon and words.
============================================================================ */
.tl-filter { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--space-md); }
.tl-filter-btn { padding: 6px 14px; border: 1.5px solid var(--color-divider); border-radius: 999px; background: var(--color-surface); color: inherit; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.tl-filter-btn.is-on { border-color: var(--color-primary); background: var(--status-info-bg); color: var(--color-primary); }
.tl-coming, .tl-feed { padding: var(--space-md) var(--space-lg); }
.tl-coming .erp-section-title { display: flex; align-items: center; gap: 6px; }
.tl-coming-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.tl-coming-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--color-divider); border-inline-start: 4px solid var(--tl-tone); border-radius: 10px; }
.tl-coming-date { display: flex; flex-direction: column; align-items: center; min-width: 38px; line-height: 1.1; }
.tl-coming-date strong { font-size: 18px; }
.tl-coming-date span { font-size: 11px; text-transform: uppercase; color: var(--color-text-secondary); }
.tl-coming-body { display: flex; flex-direction: column; font-size: 13px; min-width: 0; }
.tl-day + .tl-day { margin-top: var(--space-md); }
.tl-day-title { margin: 0 0 6px; font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-secondary); }
.tl-list { list-style: none; margin: 0; padding: 0; border-inline-start: 2px solid var(--color-divider); margin-inline-start: 17px; }
.tl-item { position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 8px 0 8px 0; margin-inline-start: -18px; }
.tl-icon { flex: 0 0 34px; height: 34px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--tl-bg); color: var(--tl-tone); box-shadow: 0 0 0 3px var(--color-surface); }
.tl-icon .material-symbols-rounded { font-size: 18px; }
.tl-body { flex: 1; min-width: 0; }
.tl-text { font-size: 14px; font-weight: 600; }
.tl-extra { font-size: 13px; color: var(--color-text-secondary); margin-top: 2px; overflow-wrap: anywhere; }
.tl-meta { display: flex; flex-wrap: wrap; gap: 8px; font-size: 11.5px; color: var(--color-text-secondary); margin-top: 3px; }
.tl-amount { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tl-more { display: flex; justify-content: center; margin-top: var(--space-md); }
.tl-kind-info { --tl-tone: var(--status-info-fg); --tl-bg: var(--status-info-bg); }
.tl-kind-good { --tl-tone: var(--status-success-fg); --tl-bg: var(--status-success-bg); }
.tl-kind-warn { --tl-tone: var(--status-warning-fg); --tl-bg: var(--status-warning-bg); }
.tl-kind-bad { --tl-tone: var(--status-danger-fg); --tl-bg: var(--status-danger-bg); }
@media (max-width: 640px) {
.tl-coming, .tl-feed { padding: var(--space-sm) var(--space-md); }
.tl-item { flex-wrap: wrap; }
.tl-amount { margin-inline-start: 44px; }
}
/* ============================================================================
[V2.5 Phase 5.3] Complaint box (Complaints.razor) - reuses .tl-filter-btn,
.cal-chip, .cal-form from the timeline / calendar.
============================================================================ */
.cp-select { max-width: 240px; height: 40px; padding-top: 6px; padding-bottom: 6px; }
.cp-status-filter { display: flex; flex-wrap: wrap; gap: 6px; }
.cp-count { display: inline-block; min-width: 18px; padding: 0 5px; margin-inline-start: 4px; border-radius: 999px; background: var(--color-divider); font-size: 11px; text-align: center; }
.cp-search { flex: 1 1 220px; max-width: 360px; margin: 0; }
.cp-actions { display: flex; justify-content: flex-end; margin-bottom: var(--space-md); }
.cp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cp-row { display: flex; align-items: flex-start; gap: var(--space-md); width: 100%; padding: 12px 14px; border: 1px solid var(--color-divider); border-radius: var(--radius-card); background: var(--color-surface); color: inherit; font: inherit; text-align: start; cursor: pointer; }
.cp-row:hover, .cp-row:focus-visible { border-color: var(--color-primary); outline: none; }
.cp-row.is-awaiting { border-inline-start: 4px solid var(--status-danger-fg); }
.cp-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cp-row-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cp-serial { font-weight: 700; font-size: 12.5px; color: var(--color-text-secondary); font-variant-numeric: tabular-nums; }
.cp-subject { font-weight: 600; font-size: 14.5px; overflow-wrap: anywhere; }
.cp-row-meta { display: flex; flex-wrap: wrap; gap: 4px; font-size: 12.5px; color: var(--color-text-secondary); }
.cp-row-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: 12px; color: var(--color-text-secondary); white-space: nowrap; }
.cp-replies, .cp-awaiting { display: inline-flex; align-items: center; gap: 3px; }
.cp-replies .material-symbols-rounded, .cp-awaiting .material-symbols-rounded { font-size: 15px; }
.cp-awaiting { font-size: 12px; font-weight: 600; color: var(--status-danger-fg); }
.cp-detail { display: flex; flex-direction: column; gap: var(--space-sm); }
.cp-sender { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--color-background); font-size: 13px; }
.cp-sender .fr-tel { margin-inline-start: 8px; }
.cp-thread { list-style: none; margin: var(--space-sm) 0; padding: 0; display: flex; flex-direction: column; gap: 8px; max-height: 46vh; overflow-y: auto; }
.cp-msg { max-width: 88%; padding: 8px 12px; border-radius: 12px; font-size: 13.5px; }
.cp-msg.is-sender { align-self: flex-start; background: var(--color-background); border: 1px solid var(--color-divider); }
.cp-msg.is-school { align-self: flex-end; background: var(--status-info-bg); }
.cp-msg-head { font-size: 11.5px; color: var(--color-text-secondary); margin-bottom: 3px; }
.cp-msg-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.cp-msg-status { display: flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 12px; font-weight: 600; }
.cp-msg-status .material-symbols-rounded { font-size: 15px; }
.cp-reply { margin-bottom: var(--space-sm); }
.cp-status-pick { max-width: 280px; }
.cp-anon { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--color-divider); border-radius: 10px; cursor: pointer; }
.cp-anon input { margin-top: 3px; width: 16px; height: 16px; }
.cp-anon > span { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; }
@media (max-width: 640px) {
.cp-select, .cp-search { max-width: none; width: 100%; }
.cp-row { flex-direction: column; gap: 6px; }
.cp-row-side { flex-direction: row; align-items: center; }
.cp-msg { max-width: 100%; }
}
/* ============================================================================
[V2.5 Phase 5.4] Owner daily digest (Owner/DailyDigest.razor)
============================================================================ */
.dg-date { width: 170px; height: 40px; padding-top: 6px; padding-bottom: 6px; }
a.fr-kpi { color: inherit; text-decoration: none; }
.dg-note { margin: var(--space-sm) 0 0; }
.dg-settings-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-md); margin-top: var(--space-md); }
.dg-settings-row .erp-field { min-width: 180px; margin-bottom: 0; }
.dg-settings-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-sm); margin-top: var(--space-md); }
@media (max-width: 640px) {
.dg-settings-row .erp-field, .dg-settings-row .cp-anon { width: 100%; }
.dg-settings-actions > .erp-btn { flex: 1 1 100%; justify-content: center; }
}
/* ============================================================================
[V2.5 Phase 5.5] Branch comparison (Owner/BranchComparison.razor)
Best / weakest carry a word + arrow, not colour alone.
============================================================================ */
.bc-range { display: flex; align-items: center; gap: 6px; }
.bc-card { padding: 0; overflow: hidden; }
.bc-card .dg-note { padding: 0 var(--space-lg) var(--space-md); }
.bc-table th.bc-measure { position: sticky; inset-inline-start: 0; z-index: 1; text-align: start; min-width: 190px; }
.bc-table thead th.bc-measure { z-index: 2; }
/* Row labels are body cells: the table's header look (white caps on blue) must not apply. */
.bc-table tbody th { background: var(--color-surface); color: var(--color-text-primary); font-size: 13.5px; font-weight: 600; text-transform: none; letter-spacing: 0; }
.bc-table tbody th .fr-sub { font-weight: 400; }
.bc-table tr.bc-group th { background: var(--color-background); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-secondary); text-align: start; position: static; }
.bc-city { font-size: 11px; font-weight: 500; opacity: 0.85; text-transform: none; letter-spacing: 0; }
.bc-value { font-weight: 600; font-variant-numeric: tabular-nums; }
.bc-tag { display: inline-flex; align-items: center; gap: 1px; margin-top: 3px; padding: 0 6px 0 3px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.bc-tag .material-symbols-rounded { font-size: 13px; }
.bc-tag.is-best { background: var(--status-success-bg); color: var(--status-success-fg); }
.bc-tag.is-worst { background: var(--status-danger-bg); color: var(--status-danger-fg); }
@media (max-width: 640px) {
.bc-range { width: 100%; }
.bc-range .dg-date { flex: 1; width: auto; }
.bc-table th.bc-measure { min-width: 130px; }
}
/* ============================================================================
[V2.5 Phase 5.6] Audit trail (AuditTrail.razor)
============================================================================ */
.at-export { margin-inline-start: auto; }
.at-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.at-row { border: 1px solid var(--color-divider); border-radius: var(--radius-card); background: var(--color-surface); }
.at-row.is-open { border-color: var(--color-primary); }
.at-head { display: flex; align-items: flex-start; gap: var(--space-md); width: 100%; padding: 10px 14px; border: 0; background: transparent; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.at-head:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: -2px; border-radius: var(--radius-card); }
.at-when { flex: 0 0 64px; display: flex; flex-direction: column; font-size: 12px; color: var(--color-text-secondary); font-variant-numeric: tabular-nums; }
.at-when strong { font-size: 13.5px; color: var(--color-text-primary); }
.at-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.at-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.at-record { font-weight: 600; font-size: 13.5px; }
.at-desc { font-size: 13.5px; overflow-wrap: anywhere; }
.at-meta { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--color-text-secondary); }
.at-meta > span { display: inline-flex; align-items: center; gap: 3px; }
.at-meta .material-symbols-rounded { font-size: 15px; }
.at-chevron { color: var(--color-text-secondary); }
.at-detail { padding: 0 14px 14px calc(64px + var(--space-md) + 14px); }
.at-changes { margin-bottom: var(--space-sm); }
.at-changes td { overflow-wrap: anywhere; font-size: 13px; }
.at-old { color: var(--status-danger-fg); text-decoration: line-through; text-decoration-thickness: 1px; }
.at-new { color: var(--status-success-fg); font-weight: 600; }
.at-facts { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-lg); margin: 0; font-size: 12.5px; }
.at-facts dt { color: var(--color-text-secondary); font-size: 11.5px; }
.at-facts dd { margin: 0; }
.at-device { max-width: 480px; overflow-wrap: anywhere; }
.at-pager { display: flex; justify-content: center; align-items: center; gap: var(--space-md); margin-top: var(--space-md); }
@media (max-width: 640px) {
.at-export { margin-inline-start: 0; width: 100%; justify-content: center; }
.at-detail { padding: 0 12px 12px; }
.at-head { gap: 10px; padding: 10px 12px; }
.at-when { flex-basis: 52px; }
}
/* ============================================================================
[V2.5 Phase 5.7] Dark mode - (js/theme.js).
Screen only: printing and PDFs stay light. Most of the app follows the
tokens; the rules after the token block cover the few places that use
fixed colours (pale alert/notice fills, dark icon/text tints, the greeting
card, the skeleton, the background picture) and a handful of dark text
colours set inline by page code.
============================================================================ */
@media screen {
html[data-theme="dark"] {
color-scheme: dark;
--color-primary: #7AA7FF; /* text, links, borders, focus */
--color-primary-fill: #2356C4; /* behind white text */
--color-primary-dark: #1C469F;
--color-secondary: #6CB2FF;
--color-success: #3FBF7F;
--color-warning: #F5B042;
--color-error: #F27B7B;
--color-info: #4CC3F5;
--color-background: #0B1220;
--page-background: #0B1220;
--color-surface: #131C2E;
--color-text-primary: #E6EDF7;
--color-text-secondary: #A3B0C2;
--color-text-disabled: #66758C;
--color-divider: #26334B;
--color-border-focus: #7AA7FF;
--color-border-disabled: #33425C;
--gradient-brand: linear-gradient(135deg, #1E4FB8 0%, #2B7BD8 100%);
--shadow-card: 0 1px 2px rgba(0,0,0,0.45), 0 4px 12px rgba(0,0,0,0.28);
--shadow-card-hover: 0 2px 4px rgba(0,0,0,0.5), 0 10px 24px rgba(0,0,0,0.35);
--shadow-dialog: 0 20px 50px rgba(0,0,0,0.6);
--shadow-fab: 0 6px 16px rgba(0,0,0,0.5);
--accent-navy: #7AA7FF;
--accent-green: #4CC985;
--accent-amber: #F2A93B;
--accent-purple: #B79AF0;
--accent-teal: #3CC8B8;
--accent-slate: #94A3B8;
--accent-brown: #D29B65;
--accent-red: #F27B7B;
--status-success-bg: rgba(76,201,133,0.15); --status-success-fg: #7FDCA8;
--status-danger-bg: rgba(242,123,123,0.16); --status-danger-fg: #FFA3A3;
--status-warning-bg: rgba(245,176,66,0.16); --status-warning-fg: #F7C46A;
--status-info-bg: rgba(122,167,255,0.15); --status-info-fg: #A4C3FF;
--status-neutral-bg: rgba(148,163,184,0.16); --status-neutral-fg: #C6D0DD;
}
/* [V2.7.1] The neon picture behind every dark page, dimmed so text stays easy to read
(the light theme has no picture inside the app). */
html[data-theme="dark"] body {
background-image: linear-gradient(rgba(11,18,32,0.80), rgba(11,18,32,0.80)), url('/images/app-background-v3.jpg');
background-image: linear-gradient(rgba(11,18,32,0.80), rgba(11,18,32,0.80)), image-set(url('/images/app-background-v3.webp') type('image/webp'), url('/images/app-background-v3.jpg') type('image/jpeg'));
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
}
/* Fixed pale fills. */
html[data-theme="dark"] .erp-alert-error { background: rgba(242,123,123,0.12); border-color: rgba(242,123,123,0.3); }
html[data-theme="dark"] .erp-alert-success { background: rgba(76,201,133,0.12); border-color: rgba(76,201,133,0.3); }
html[data-theme="dark"] .erp-alert-warning { background: rgba(245,176,66,0.12); border-color: rgba(245,176,66,0.3); }
html[data-theme="dark"] .erp-alert-info { background: rgba(122,167,255,0.12); border-color: rgba(122,167,255,0.28); }
html[data-theme="dark"] .erp-info-note,
html[data-theme="dark"] .fin-note { background: rgba(122,167,255,0.08); border-color: rgba(122,167,255,0.2); }
html[data-theme="dark"] .erp-profile-photo { background: #1B2740; }
html[data-theme="dark"] .erp-skeleton { background: linear-gradient(90deg, var(--color-divider) 25%, #33415A 37%, var(--color-divider) 63%); background-size: 400% 100%; }
html[data-theme="dark"] .erp-loading-row { opacity: 0.18; }
html[data-theme="dark"] .erp-celebration-card,
html[data-theme="dark"] .erp-celebration-anniversary,
html[data-theme="dark"] .erp-celebration-special { background: linear-gradient(165deg, #22304A 0%, var(--color-surface) 55%); }
/* Dark icon / text tints that were fixed colours. */
html[data-theme="dark"] .erp-stat-icon-purple, html[data-theme="dark"] .erp-hub-icon-purple, html[data-theme="dark"] .erp-hub-count-purple { color: #C4B0F5; }
html[data-theme="dark"] .erp-stat-icon-green, html[data-theme="dark"] .erp-hub-icon-green, html[data-theme="dark"] .erp-hub-count-green { color: #7FDCA8; }
html[data-theme="dark"] .erp-stat-icon-blue, html[data-theme="dark"] .erp-hub-icon-blue, html[data-theme="dark"] .erp-hub-count-blue,
html[data-theme="dark"] .erp-info-banner .material-symbols-rounded { color: #8FD3F7; }
html[data-theme="dark"] .erp-stat-icon-amber, html[data-theme="dark"] .erp-hub-icon-amber, html[data-theme="dark"] .erp-hub-count-amber,
html[data-theme="dark"] .erp-celebration-sender, html[data-theme="dark"] .ar-warn { color: #F7C46A; }
html[data-theme="dark"] .ar-badge-muted { color: #C6D0DD; }
html[data-theme="dark"] .fu-wa-btn, html[data-theme="dark"] .ac-approve { color: #7FDCA8; border-color: rgba(127,220,168,0.4); }
/* The same dark text colours when page code sets them inline. */
html[data-theme="dark"] [style*="color:#006400"]:not([style*="background-color:#006400"]),
html[data-theme="dark"] [style*="color: #006400"],
html[data-theme="dark"] [style*="color:#0B6B34"] { color: #7FDCA8 !important; }
html[data-theme="dark"] [style*="color:#8B0000"]:not([style*="background-color:#8B0000"]),
html[data-theme="dark"] [style*="color: #8B0000"] { color: #FFA3A3 !important; }
html[data-theme="dark"] [style*="color:#a15c00"], html[data-theme="dark"] [style*="color: #a15c00"] { color: #F7C46A !important; }
html[data-theme="dark"] [style*="color:#1471a8"], html[data-theme="dark"] [style*="color: #1471a8"] { color: #8FD3F7 !important; }
html[data-theme="dark"] [style*="color:#6F42C1"], html[data-theme="dark"] [style*="color: #6F42C1"] { color: #C4B0F5 !important; }
html[data-theme="dark"] [style*="color:#0B3D91"], html[data-theme="dark"] [style*="color: #0B3D91"] { color: #A4C3FF !important; }
/* Things that must stay paper-white: question-paper preview, printed docs. */
html[data-theme="dark"] .qp-print-root { color: #000; background: #fff; }
}
/* ---- Settings: Appearance choice ---- */
.theme-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); }
.theme-choice { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 8px; border: 1.5px solid var(--color-divider); border-radius: var(--radius-card); background: var(--color-surface); color: var(--color-text-primary); font: inherit; font-weight: 600; font-size: 13.5px; cursor: pointer; }
.theme-choice:hover { border-color: var(--color-primary); }
.theme-choice:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 2px; }
.theme-choice.is-on { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--status-info-bg); }
.theme-swatch { display: flex; align-items: center; justify-content: center; width: 100%; height: 56px; border-radius: 10px; border: 1px solid rgba(128,128,128,0.25); }
.theme-swatch .material-symbols-rounded { font-size: 24px; }
.theme-swatch-light { background: #F5F7FB; color: #0B3D91; }
.theme-swatch-dark { background: #0B1220; color: #7AA7FF; }
.theme-swatch-system { background: linear-gradient(135deg, #F5F7FB 0%, #F5F7FB 50%, #0B1220 50%, #0B1220 100%); color: #5F6B7A; }
/* [V2.5 Phase 5.8] Settings: iPhone "Add to Home Screen" steps */
.pwa-steps { margin: 0; padding-inline-start: 22px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.pwa-steps .material-symbols-rounded { font-size: 18px; vertical-align: -4px; color: var(--color-primary); }
/* ============================================================================
[V2.6] Settings hub - /settings/{section}
Desktop: a sticky section menu on the start side, one section at a time on
the other. Phone/tablet (<=900px): the menu becomes a row of chips that
scrolls sideways under the page header. Logical properties throughout, so
Urdu (RTL) mirrors on its own.
============================================================================ */
.set-shell { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--space-xl); align-items: start; }
.set-nav {
position: sticky; top: var(--space-lg);
background: var(--color-surface); border-radius: var(--radius-card); box-shadow: var(--shadow-card);
padding: var(--space-standard) var(--space-sm);
}
.set-nav-user { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-xs) var(--space-sm) var(--space-standard); margin-bottom: var(--space-sm); border-bottom: 1px solid var(--color-divider); }
.set-nav-user-name { font-size: 14px; font-weight: 700; color: var(--color-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.set-nav-user-role { font-size: 12px; color: var(--color-text-secondary); }
.set-nav-group { font-size: 11px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--color-text-secondary); padding: var(--space-md) var(--space-sm) var(--space-xs); }
.set-nav-links { display: flex; flex-direction: column; gap: 2px; }
.set-nav-link {
display: flex; align-items: center; gap: var(--space-md);
padding: 10px var(--space-md); border-radius: 12px;
color: var(--color-text-primary); text-decoration: none; font-size: 14px; font-weight: 500;
transition: background var(--motion-fast, 0.15s) ease, color var(--motion-fast, 0.15s) ease;
}
.set-nav-link .material-symbols-rounded { font-size: 20px; color: var(--color-text-secondary); }
.set-nav-link:hover { background: var(--status-info-bg, rgba(var(--brand-rgb), 0.06)); }
.set-nav-link:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 1px; }
.set-nav-link.is-on { background: var(--status-info-bg, rgba(var(--brand-rgb), 0.08)); color: var(--color-primary); font-weight: 600; }
.set-nav-link.is-on .material-symbols-rounded { color: var(--color-primary); }
.set-avatar-sm { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--color-background); color: var(--color-text-secondary); }
.set-avatar-sm img { width: 100%; height: 100%; object-fit: cover; }
.set-avatar-sm .material-symbols-rounded { font-size: 28px; }
/* [V2.7.1] Forms keep a readable width (was 760px; full width made a password field 1270px long). */
.set-panel { max-width: 960px; display: flex; flex-direction: column; gap: var(--space-lg); min-width: 0; }
.set-panel-head { display: flex; align-items: flex-start; gap: var(--space-md); }
.set-panel-head .erp-page-header-icon { width: 40px; height: 40px; border-radius: 12px; }
.set-panel-title { font-size: 18px; font-weight: 700; color: var(--color-text-primary); margin: 0 0 2px; }
.set-panel-hint { font-size: 13px; color: var(--color-text-secondary); margin: 0; }
.set-card { padding: var(--space-xl); }
.set-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-lg); flex-wrap: wrap; }
.set-card-title { font-size: 16px; font-weight: 700; color: var(--color-text-primary); margin: 0 0 2px; }
.set-card-hint { font-size: 12.5px; color: var(--color-text-secondary); margin: 0; line-height: 1.5; }
.set-card-actions { display: flex; justify-content: flex-end; gap: var(--space-sm); margin-top: var(--space-sm); flex-wrap: wrap; }
.set-divider { height: 1px; background: var(--color-divider); margin: var(--space-lg) 0; border: 0; }
/* Photo / logo picker: the whole avatar is the button (a