/* ===================================================================== College ERP — theme (design-system approach ported from skv_new's modern-erp.css; distinct teal/green academic identity). ===================================================================== */ :root { --primary: #0f766e; /* teal-700 */ --primary-light: #14b8a6; /* teal-500 */ --primary-dark: #115e59; /* teal-800 */ /* RGB triplets (no #, no rgba()) so every tinted background/shadow in this file can be written as rgba(var(--primary-rgb), X) and pick up whatever role theme is active below — see "Role-based colour schemes". */ --primary-rgb: 15, 118, 110; --primary-light-rgb: 20, 184, 166; /* Darkest two stops of the navbar's diagonal gradient — a near-black tint of the theme colour, set per role alongside --primary/--primary-light/--primary-dark. */ --navbar-edge-1: #042f2e; --navbar-edge-2: #134e4a; --secondary: #1d4ed8; /* blue-700 */ --accent: #d97706; /* amber-600 */ --success: #10b981; --warning: #f59e0b; --danger: #ef4444; --info: #3b82f6; --ink: #0f172a; --muted: #64748b; --surface: #ffffff; --bg: #f0fdfa; --border: #e2e8f0; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06); --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08); --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12); } /* ===================================================================== Role-based colour schemes Every role a staff member can hold — plus the student portal — gets its own palette, so the navbar/buttons/focus-rings/table-headers/badges (all of which already run on --primary/--primary-light/--primary-dark and the two rgb-triplet variables above) instantly re-theme with NO markup changes anywhere else. App_Controller::role_theme() picks one role per session (priority order when a user holds several) and includes/header.php / portal/includes/header.php stamp it as `data-role-theme` on . Superadmin (and anyone whose only role has no palette below) gets the plain :root default above — the base teal "home" identity. ===================================================================== */ html[data-role-theme="principal"] { /* Principal — indigo (leadership) */ --primary: #4338ca; --primary-light: #6366f1; --primary-dark: #312e81; --primary-rgb: 67, 56, 202; --primary-light-rgb: 99, 102, 241; --navbar-edge-1: #0d0a2b; --navbar-edge-2: #1e1b4b; } html[data-role-theme="vice_principal"] { /* Vice Principal — blue */ --primary: #1d4ed8; --primary-light: #3b82f6; --primary-dark: #1e3a8a; --primary-rgb: 29, 78, 216; --primary-light-rgb: 59, 130, 246; --navbar-edge-1: #050e2e; --navbar-edge-2: #0f2557; } html[data-role-theme="coe"] { /* Controller of Examinations — rose */ --primary: #be123c; --primary-light: #f43f5e; --primary-dark: #881337; --primary-rgb: 190, 18, 60; --primary-light-rgb: 244, 63, 94; --navbar-edge-1: #200309; --navbar-edge-2: #3d0714; } html[data-role-theme="hod"] { /* Head of Department — violet */ --primary: #7e22ce; --primary-light: #a855f7; --primary-dark: #581c87; --primary-rgb: 126, 34, 206; --primary-light-rgb: 168, 85, 247; --navbar-edge-1: #1c0630; --navbar-edge-2: #3b0764; } html[data-role-theme="academic_branch"] { /* Academic Branch — sky blue */ --primary: #0369a1; --primary-light: #0ea5e9; --primary-dark: #0c4a6e; --primary-rgb: 3, 105, 161; --primary-light-rgb: 14, 165, 233; --navbar-edge-1: #031825; --navbar-edge-2: #062a3d; } html[data-role-theme="exam_branch"] { /* Examination Branch — fuchsia */ --primary: #a21caf; --primary-light: #d946ef; --primary-dark: #701a75; --primary-rgb: 162, 28, 175; --primary-light-rgb: 217, 70, 239; --navbar-edge-1: #240826; --navbar-edge-2: #40104a; } html[data-role-theme="finance_branch"] { /* Finance Branch — emerald */ --primary: #047857; --primary-light: #10b981; --primary-dark: #064e3b; --primary-rgb: 4, 120, 87; --primary-light-rgb: 16, 185, 129; --navbar-edge-1: #021712; --navbar-edge-2: #053323; } html[data-role-theme="admin_branch"] { /* Establishment/Admin Branch — amber */ --primary: #b45309; --primary-light: #f59e0b; --primary-dark: #78350f; --primary-rgb: 180, 83, 9; --primary-light-rgb: 245, 158, 11; --navbar-edge-1: #241000; --navbar-edge-2: #3d1d02; } html[data-role-theme="iqac"] { /* IQAC — lime */ --primary: #4d7c0f; --primary-light: #84cc16; --primary-dark: #365314; --primary-rgb: 77, 124, 15; --primary-light-rgb: 132, 204, 22; --navbar-edge-1: #0f1704; --navbar-edge-2: #1d2c08; } html[data-role-theme="librarian"] { /* Librarian — brown */ --primary: #6b4423; --primary-light: #92653e; --primary-dark: #3f2712; --primary-rgb: 107, 68, 35; --primary-light-rgb: 146, 101, 62; --navbar-edge-1: #140d06; --navbar-edge-2: #241809; } html[data-role-theme="admission_committee"] { /* Admission Committee — pink */ --primary: #be185d; --primary-light: #ec4899; --primary-dark: #831843; --primary-rgb: 190, 24, 93; --primary-light-rgb: 236, 72, 153; --navbar-edge-1: #1f0511; --navbar-edge-2: #3b0d20; } html[data-role-theme="accountant"] { /* Accountant — gold */ --primary: #a16207; --primary-light: #eab308; --primary-dark: #713f12; --primary-rgb: 161, 98, 7; --primary-light-rgb: 234, 179, 8; --navbar-edge-1: #1c1002; --navbar-edge-2: #331d05; } html[data-role-theme="front_desk"] { /* Front Desk — orange */ --primary: #c2410c; --primary-light: #f97316; --primary-dark: #7c2d12; --primary-rgb: 194, 65, 12; --primary-light-rgb: 249, 115, 22; --navbar-edge-1: #1f0a02; --navbar-edge-2: #3d1607; } html[data-role-theme="hostel_warden"] { /* Hostel Warden — red */ --primary: #b91c1c; --primary-light: #ef4444; --primary-dark: #7f1d1d; --primary-rgb: 185, 28, 28; --primary-light-rgb: 239, 68, 68; --navbar-edge-1: #1f0505; --navbar-edge-2: #3d0a0a; } html[data-role-theme="faculty"] { /* Teaching Faculty — cyan */ --primary: #0e7490; --primary-light: #06b6d4; --primary-dark: #164e63; --primary-rgb: 14, 116, 144; --primary-light-rgb: 6, 182, 212; --navbar-edge-1: #041e26; --navbar-edge-2: #0b3b46; } html[data-role-theme="non_teaching"] { /* Non-Teaching Staff — slate */ --primary: #475569; --primary-light: #64748b; --primary-dark: #1e293b; --primary-rgb: 71, 85, 105; --primary-light-rgb: 100, 116, 139; --navbar-edge-1: #0a0f1a; --navbar-edge-2: #141b2b; } html[data-role-theme="student"] { /* Student Portal — azure */ --primary: #2563eb; --primary-light: #60a5fa; --primary-dark: #1e40af; --primary-rgb: 37, 99, 235; --primary-light-rgb: 96, 165, 250; --navbar-edge-1: #050b1f; --navbar-edge-2: #0a1638; } html { -webkit-text-size-adjust: 100%; } body { font-family: 'Inter', -apple-system, 'Segoe UI', sans-serif; background: radial-gradient(circle at 15% 10%, rgba(var(--primary-light-rgb), 0.08), transparent 40%), radial-gradient(circle at 85% 90%, rgba(29, 78, 216, 0.06), transparent 40%), var(--bg); color: var(--ink); min-height: 100vh; /* Safety net: no element on any page should force the whole viewport to scroll sideways. Genuinely wide content (data tables, the timetable grid) scrolls inside its own container (see .card-body / .table-responsive below) — this just guarantees a stray overflow can't break the page. */ overflow-x: hidden; } /* ---------- Navbar ---------- */ .erp-navbar { background: linear-gradient(120deg, var(--navbar-edge-1) 0%, var(--primary-dark) 55%, var(--navbar-edge-2) 100%); color: #fff; position: sticky; top: 0; z-index: 1030; box-shadow: var(--shadow-md); } .erp-navbar-inner { display: flex; align-items: center; /* menu is a single carousel row now, so centering is safe */ gap: 1rem; padding: 0.4rem 1.25rem; max-width: 1400px; margin: 0 auto; } .erp-brand { display: flex; align-items: center; gap: 0.6rem; color: #fff; text-decoration: none; white-space: nowrap; } .erp-brand:hover { color: #fff; text-decoration: none; } .erp-brand-logo { font-size: 1.6rem; } .erp-brand-logo img { height: 34px; width: auto; max-width: 44px; object-fit: contain; display: block; } .erp-brand-text { display: flex; flex-direction: column; line-height: 1.15; } .erp-brand-text strong { font-size: 0.95rem; font-weight: 700; } .erp-brand-text small { font-size: 0.7rem; opacity: 0.75; } /* ---------- Vertical sidebar navigation (all portals) ---------- Slim gradient topbar (.erp-navbar) + a left sidebar (.erp-sidebar) carrying the whole menu vertically: staff = collapsible groups, student portal = flat list, applicant = its few links. Mobile slides the sidebar in as an off-canvas drawer (body.nav-open). */ /* Admin shell: full-viewport-height sidebar on the left (brand at its top); topbar + content + footer stacked in the right column (.erp-main), so the footer sits NEXT TO the sidebar, not under it. */ .erp-layout { display: flex; align-items: stretch; min-height: 100vh; } .erp-main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .erp-main > .erp-content { flex: 1; width: 100%; } /* Flex column: the head (brand + collapse toggle) stays pinned at the top; only the nav below it scrolls. */ .erp-sidebar { flex: 0 0 236px; width: 236px; background: linear-gradient(180deg, var(--navbar-edge-1) 0%, var(--primary-dark) 60%, var(--navbar-edge-2) 100%); position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; z-index: 1020; } /* Brand block at the very top of the sidebar (reuses .erp-brand-* styles). */ .erp-side-brand { display: flex; align-items: center; gap: 0.6rem; padding: 0.62rem 0.9rem; color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.14); white-space: nowrap; } .erp-side-brand:hover { color: #fff; text-decoration: none; } .erp-side-nav { padding: 0.7rem 0.55rem 1.2rem; flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.25) transparent; } .erp-side-nav::-webkit-scrollbar { width: 6px; } .erp-side-nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.22); border-radius: 3px; } /* Sidebar head: brand + the collapse/expand toggle side by side. */ .erp-side-head { flex: 0 0 auto; display: flex; align-items: center; border-bottom: 1px solid rgba(255, 255, 255, 0.14); } .erp-side-head .erp-side-brand { border-bottom: none; flex: 1; min-width: 0; } .erp-side-toggle { flex: 0 0 auto; margin-right: 0.5rem; width: 26px; height: 26px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.12); color: #fff; font-size: 0.7rem; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; } .erp-side-toggle:hover { background: rgba(255, 255, 255, 0.25); } .erp-side-toggle .erp-side-toggle-out { display: none; } /* Icon + label spans inside sidebar links/heads (labels hide in compact mode). */ .erp-side-ico { flex: 0 0 auto; width: 1.3rem; text-align: center; } .erp-side-lbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .erp-side-group-head .erp-side-lbl { flex: 1; text-align: left; } /* ---------- Compact (collapsed) sidebar: 64px icon rail + hover flyouts ---------- */ @media (min-width: 993px) { .erp-sidebar { transition: width 0.15s ease, flex-basis 0.15s ease; } /* The nav stays a scroll container (icons taller than the viewport must NOT spill past the sidebar's 100vh box — visible overflow would extend the document below the footer). Flyouts escape the clip via position:fixed, so no overflow:visible is needed. The scrollbar is hidden in compact (wheel-scroll still works) so the flyout flush at the rail edge has no dead hover zone. */ body.side-compact .erp-sidebar { flex: 0 0 64px; width: 64px; } body.side-compact .erp-side-nav { scrollbar-width: none; } body.side-compact .erp-side-nav::-webkit-scrollbar { width: 0; } body.side-compact .erp-side-head { flex-direction: column; gap: 0.4rem; padding: 0.5rem 0 0.55rem; } body.side-compact .erp-side-brand { padding: 0.1rem 0 0; justify-content: center; } body.side-compact .erp-side-brand .erp-brand-text { display: none; } body.side-compact .erp-side-toggle { margin: 0; } body.side-compact .erp-side-toggle .erp-side-toggle-in { display: none; } body.side-compact .erp-side-toggle .erp-side-toggle-out { display: inline; } body.side-compact .erp-side-nav { padding: 0.6rem 0.4rem 1rem; } body.side-compact .erp-side-lbl { display: none; } body.side-compact .erp-side-link { justify-content: center; padding: 0.55rem 0.4rem; position: relative; } body.side-compact .erp-side-group { position: relative; } body.side-compact .erp-side-group-head { justify-content: center; padding: 0.55rem 0.4rem; font-size: 0.95rem; } body.side-compact .erp-side-group-head .caret { display: none; } body.side-compact .erp-side-group.open > .erp-side-group-head { background: rgba(255, 255, 255, 0.14); border-radius: var(--radius-sm); } /* Group flyout: the submenu appears immediately right of the rail item. position:fixed (viewport coords set by the header JS on mouseenter) so the panel is never clipped by the rail's own scroll container. */ body.side-compact .erp-side-group-items { display: none; position: fixed; left: 64px; top: 0; min-width: 232px; max-height: calc(100vh - 20px); overflow-y: auto; background: var(--surface); border-radius: 0 var(--radius-md) var(--radius-md) var(--radius-md); box-shadow: var(--shadow-lg); padding: 0.45rem; z-index: 1080; } /* In compact mode ONLY hover shows a flyout — the accordion's .open state (set for the group holding the current page) must not pin it visible. The .open:hover selector out-specifies the .open display:none below. */ body.side-compact .erp-side-group.open > .erp-side-group-items { display: none; } body.side-compact .erp-side-group:hover > .erp-side-group-items, body.side-compact .erp-side-group.open:hover > .erp-side-group-items { display: block; } /* A flyout shifted upward (header JS sets an inline negative top so the panel stays inside the viewport for groups near the bottom) mirrors its corner radius since it no longer hangs below its rail item. */ body.side-compact .erp-side-group.fly-up > .erp-side-group-items { border-radius: var(--radius-md) var(--radius-md) var(--radius-md) 0; } body.side-compact .erp-side-group-items::before { content: attr(data-label); display: block; padding: 0.25rem 0.6rem 0.4rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); } body.side-compact .erp-side-group-items .erp-side-link { display: flex; justify-content: flex-start; color: var(--ink); padding: 0.45rem 0.6rem; } body.side-compact .erp-side-group-items .erp-side-lbl { display: block; } body.side-compact .erp-side-group-items .erp-side-link:hover { background: rgba(var(--primary-light-rgb), 0.1); color: var(--primary-dark); } body.side-compact .erp-side-group-items .erp-side-link.active { background: rgba(var(--primary-rgb), 0.14); color: var(--primary-dark); } /* Flat links (no submenu) show their label as a small flyout tooltip — also fixed; --fly-tip-y (the link's vertical centre) is set by JS. */ body.side-compact .erp-side-nav > .erp-side-link:hover::after { content: attr(data-label); position: fixed; left: var(--fly-tip-x, 64px); top: var(--fly-tip-y, 50vh); transform: translateY(-50%); background: var(--surface); color: var(--ink); font-size: 0.82rem; font-weight: 600; padding: 0.35rem 0.65rem; border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); white-space: nowrap; z-index: 1080; } } .erp-side-link { display: flex; align-items: center; gap: 0.5rem; padding: 0.48rem 0.75rem; color: rgba(255, 255, 255, 0.85); font-size: 0.86rem; font-weight: 500; text-decoration: none; border-radius: var(--radius-sm); transition: background 0.15s, color 0.15s; } .erp-side-link:hover { color: #fff; background: rgba(255, 255, 255, 0.10); text-decoration: none; } .erp-side-link.active { color: #fff; background: rgba(255, 255, 255, 0.18); font-weight: 600; } .erp-side-group { margin-top: 0.15rem; } .erp-side-group-head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; background: none; border: 0; cursor: pointer; padding: 0.5rem 0.75rem; color: rgba(255, 255, 255, 0.66); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; border-radius: var(--radius-sm); transition: color 0.15s, background 0.15s; } .erp-side-group-head:hover { color: #fff; background: rgba(255, 255, 255, 0.08); } .erp-side-group-head .caret { font-size: 0.62rem; transition: transform 0.15s; } .erp-side-group.open > .erp-side-group-head { color: #fff; } .erp-side-group.open > .erp-side-group-head .caret { transform: rotate(180deg); } .erp-side-group-items { display: none; padding-left: 1.1rem; } .erp-side-group.open > .erp-side-group-items { display: block; } /* Backdrop behind the mobile drawer */ .erp-side-backdrop { display: none; } /* With the menu in the sidebar, the topbar's search/user cluster sits right. */ .erp-navbar .erp-search-btn { margin-left: auto; } .erp-navbar .erp-search-btn + .erp-user { margin-left: 0.25rem; } /* The brand lives in the sidebar on desktop; the topbar copy shows only on mobile, where the sidebar is an off-canvas drawer. */ .erp-navbar .erp-brand { display: none; } @media print { .erp-navbar, .erp-sidebar, .erp-side-backdrop, .erp-footer, .erp-bottomnav { display: none !important; } .erp-layout, .erp-main { display: block; } } .erp-user { margin-left: auto; white-space: nowrap; position: relative; } .erp-avatar { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.16); color: #fff; font-weight: 700; font-size: 1rem; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 0.15s, box-shadow 0.15s; } .erp-avatar:hover, .erp-avatar[aria-expanded="true"] { background: rgba(255, 255, 255, 0.30); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.15); } .erp-user-menu { display: none; position: absolute; right: 0; top: calc(100% + 8px); min-width: 220px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-lg); border-radius: var(--radius-md); padding: 0.35rem 0; z-index: 1050; } .erp-user.open .erp-user-menu { display: block; } .erp-user-head { padding: 0.5rem 1rem 0.4rem; } .erp-user-head .erp-user-name { font-weight: 700; color: var(--ink); font-size: 0.9rem; } .erp-user-head .erp-user-email { font-size: 0.75rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; max-width: 200px; } .erp-user-divider { height: 1px; background: var(--border); margin: 0.35rem 0; } .erp-user-item { display: block; padding: 0.45rem 1rem; font-size: 0.86rem; color: var(--ink); text-decoration: none; } .erp-user-item:hover { background: rgba(var(--primary-light-rgb), 0.1); color: var(--primary-dark); text-decoration: none; } .erp-hamburger { display: none; background: none; border: none; color: #fff; font-size: 1.4rem; margin-left: auto; } @media (max-width: 992px) { .erp-hamburger { display: block; } .erp-navbar .erp-brand { display: flex; } .erp-side-toggle { display: none; } /* the drawer is always full width */ /* Off-canvas drawer: the sidebar slides in from the left over a backdrop. */ .erp-layout, .erp-main { display: block; min-height: 0; } .erp-sidebar { position: fixed; top: 0; left: -280px; width: 264px; /* Use the DYNAMIC viewport height: with 100vh the mobile address bar makes the drawer taller than the visible screen, so its bottom menu items fall below the fold and can't be reached. 100dvh matches the actual visible area; 100vh is the fallback for old browsers. */ height: 100vh; height: 100dvh; /* The .erp-side-nav inside is the scroll container (flex:1 + overflow), so keep the sidebar itself clipped and let ONLY the nav scroll — the brand head stays pinned, the whole menu is reachable. */ overflow: hidden; transition: left 0.2s ease; z-index: 1060; } body.nav-open .erp-sidebar { left: 0; box-shadow: var(--shadow-lg); } /* Lock the page behind the open drawer (same pattern as the Spotlight / lightbox scroll locks) so the page can't scroll while the menu is open. */ body.nav-open { overflow: hidden; } body.nav-open .erp-side-backdrop { display: block; position: fixed; inset: 0; background: rgba(15, 23, 42, 0.5); z-index: 1050; } } @media (max-width: 480px) { /* Guarantee a single-line header even with a long college name on a small phone: truncate with an ellipsis instead of wrapping/overflowing. */ .erp-brand-text { max-width: 46vw; } .erp-brand-text strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .erp-brand-text small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } /* ---------- Bottom tab bar (enrolled-student portal, mobile only) ---------- Fixed app-style bottom navigation, modeled on the reference skv_new student portal's `.bottomnav` (C:\wamp\www\skv_new\application\views\ student\portal\_bottom.php + assets/css/student-portal.css) — same idea (Home/Attendance/+2 daily items/More, hidden on desktop, shown ≤992px — the SAME breakpoint the off-canvas drawer already uses), adapted to this app's own conventions: emoji icons (no SVG icon system here) instead of skv's picon() helper, and the role-theme CSS variables (--primary etc.) instead of skv's fixed brand colors — so it recolors per role like every other portal component. Markup lives in portal/includes/footer.php (the enrolled-student portal, all students) AND includes/footer.php (the STAFF portal, rendered ONLY for teaching staff) — both use the .erp-bottomnav class; the applicant portal never renders it. */ .erp-bottomnav { display: none; position: fixed; left: 0; right: 0; bottom: 0; background: rgba(255, 255, 255, 0.97); backdrop-filter: blur(10px); border-top: 1px solid var(--border); box-shadow: 0 -2px 14px rgba(15, 23, 42, 0.09); z-index: 1040; padding-bottom: env(safe-area-inset-bottom); } .erp-bottomnav-inner { display: flex; height: 58px; max-width: 600px; margin: 0 auto; } .erp-bottomnav a { flex: 1; min-width: 0; /* let long labels shrink so ellipsis works */ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 0 2px; font-size: 0.62rem; font-weight: 700; color: var(--muted); text-decoration: none; position: relative; } .erp-bottomnav a:hover, .erp-bottomnav a:focus { color: var(--primary); text-decoration: none; } .erp-bottomnav a .erp-bn-ico { font-size: 1.3rem; line-height: 1; } /* the label span (2nd child): a long admin-chosen label ellipsis-clips instead of wrapping/pushing the 5-slot row wider than the viewport */ .erp-bottomnav a > span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .erp-bottomnav a.on { color: var(--primary); } .erp-bottomnav a.on::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 26px; height: 3px; border-radius: 0 0 3px 3px; background: var(--primary); } @media (max-width: 992px) { .erp-bottomnav { display: block; } /* The fixed bar sits over whatever is currently scrolled to the bottom of the page — pad the LAST in-flow element (the page footer, which always follows .erp-content) so it, and everything above it, can scroll clear of the bar instead of ending up hidden behind it. */ html[data-role-theme="student"] .erp-footer { padding-bottom: calc(58px + env(safe-area-inset-bottom) + 0.9rem); } /* Staff variant: the same bar (class erp-bottomnav) is also rendered in the STAFF footer, but ONLY for teaching staff (body gets .staff-has-bottomnav in includes/header.php). Pad the staff footer clear of the fixed bar too. */ body.staff-has-bottomnav .erp-footer { padding-bottom: calc(58px + env(safe-area-inset-bottom) + 0.9rem); } } /* ---------- Content ---------- */ .erp-content { max-width: 1400px; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; } /* Inside the sidebar layout the content column takes the remaining width. */ .erp-layout > .erp-content { flex: 1; min-width: 0; } .page-head { margin-bottom: 1.25rem; } .page-head h1 { font-size: 1.4rem; font-weight: 700; margin-bottom: 0.15rem; } .card { border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } /* Most tables in the app sit directly in a .card-body with no explicit .table-responsive wrapper. Rather than touch every list view, give every card-body the same "scroll internally, never break the page" behavior Bootstrap's .table-responsive provides — on a narrow screen a wide table (many columns, or a day/period grid) scrolls within its own card instead of forcing horizontal scroll on the whole page. (Verified no dropdown menu or Select2 popup in this codebase is positioned relative to a card-body ancestor, so nothing gets clipped by this.) */ .card-body { overflow-x: auto; } /* A table sitting directly in a zero-padding .card-body (edge-to-edge rows/ stripes) still needs its own left/right inset so cell text doesn't sit flush against the card border — otherwise it reads cramped next to a card-header or section title above it, which keeps the standard 1.25rem card padding. Only the outer columns need it; inner cells already have breathing room from their neighbors. */ .card-body.p-0 > table > thead > tr > th:first-child, .card-body.p-0 > table > tbody > tr > td:first-child { padding-left: 1.25rem; } .card-body.p-0 > table > thead > tr > th:last-child, .card-body.p-0 > table > tbody > tr > td:last-child { padding-right: 1.25rem; } .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1rem; } .stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 1.1rem 1.2rem; display: flex; flex-direction: column; border-top: 3px solid var(--primary-light); } .stat-value { font-size: 1.7rem; font-weight: 800; color: var(--primary-dark); } .stat-label { font-size: 0.8rem; color: var(--muted); font-weight: 500; } .btn-primary { background: linear-gradient(135deg, var(--primary), var(--primary-light)); border: none; } .btn-primary:hover, .btn-primary:focus { background: linear-gradient(135deg, var(--primary-dark), var(--primary)); } .erp-footer { text-align: center; color: var(--muted); font-size: 0.78rem; padding: 0.85rem 1rem; background: var(--surface); border-top: 1px solid var(--border); } /* ---------- Login page & portal chooser ---------- */ body.login-page { display: flex; align-items: center; justify-content: center; padding: 1.5rem; background: radial-gradient(circle at 20% 20%, rgba(var(--primary-light-rgb), 0.18), transparent 45%), radial-gradient(circle at 80% 80%, rgba(29, 78, 216, 0.12), transparent 45%), #f0fdfa; } /* Student-portal pre-auth card pages (track application) — azure base tint so the whole page matches the student /portal identity, not the teal base. */ html[data-role-theme="student"] body.login-page { background: radial-gradient(circle at 20% 20%, rgba(var(--primary-light-rgb), 0.18), transparent 45%), radial-gradient(circle at 80% 80%, rgba(37, 99, 235, 0.12), transparent 45%), #eff6ff; } .login-card, .portal-chooser { background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 2.2rem; width: 100%; } .login-card { max-width: 400px; } .portal-chooser { max-width: 760px; } .login-brand { text-align: center; margin-bottom: 1.5rem; } .login-logo { font-size: 2.6rem; } .login-logo img { max-height: 64px; } .login-brand h1 { font-size: 1.25rem; font-weight: 800; margin: 0.4rem 0 0.1rem; } .login-brand p { color: var(--muted); font-size: 0.85rem; margin: 0; } .login-footer { text-align: center; margin-top: 1.2rem; font-size: 0.8rem; } .login-footer a { color: var(--muted); } .portal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-top: 1.5rem; } .portal-tile { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; text-align: center; padding: 1.5rem 1rem; border: 1px solid var(--border); border-radius: var(--radius-lg); text-decoration: none; color: var(--ink); transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s; } .portal-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--primary-light); text-decoration: none; color: var(--ink); } .portal-icon { font-size: 2rem; } .portal-name { font-weight: 700; } .portal-desc { font-size: 0.78rem; color: var(--muted); } /* ---------- Sign-in pages (split hero) ---------- */ /* Used ONLY by auth/login.php and portal/auth/login.php — deliberately separate classes from .login-page/.login-card above, which the public admission pages (apply/pay/success/track) still rely on unchanged. */ body.login-split-page { margin: 0; min-height: 100vh; background: var(--surface); } .login-split { display: flex; min-height: 100vh; } .login-hero { flex: 1 1 44%; position: relative; overflow: hidden; background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px), linear-gradient(155deg, #042f2e 0%, var(--primary-dark) 45%, #0f766e 78%, #115e59 100%); background-size: 22px 22px, cover; color: #fff; padding: 3rem 3.25rem; display: flex; flex-direction: column; justify-content: space-between; } /* Student-portal login: azure hero (matches the student /portal identity) */ html[data-role-theme="student"] .login-hero { background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px), linear-gradient(155deg, #0a1638 0%, var(--primary-dark) 42%, #1d4ed8 76%, var(--primary) 100%); } .login-hero::before, .login-hero::after { content: ''; position: absolute; border-radius: 50%; filter: blur(6px); opacity: 0.4; pointer-events: none; } .login-hero::before { width: 320px; height: 320px; background: rgba(var(--primary-light-rgb), 0.55); top: -130px; right: -110px; } .login-hero::after { width: 240px; height: 240px; background: rgba(29, 78, 216, 0.4); bottom: -100px; left: -70px; } .login-hero-top, .login-hero-mid, .login-hero-bottom { position: relative; z-index: 1; } .login-hero-brand { display: flex; align-items: center; gap: 0.75rem; } .login-hero-emblem { width: 50px; height: 50px; flex: 0 0 auto; border-radius: 13px; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.28); display: flex; align-items: center; justify-content: center; font-size: 1.6rem; overflow: hidden; } .login-hero-emblem img { width: 100%; height: 100%; object-fit: contain; background: #fff; padding: 4px; } .login-hero-brand strong { display: block; font-size: 1.02rem; font-weight: 700; line-height: 1.25; } .login-hero-brand span { font-size: 0.76rem; opacity: 0.72; } .login-hero-mid h1 { font-size: 1.85rem; font-weight: 800; line-height: 1.28; margin: 0 0 0.7rem; max-width: 420px; } .login-hero-mid p { opacity: 0.82; font-size: 0.9rem; max-width: 380px; line-height: 1.6; margin: 0; } .login-hero-features { list-style: none; padding: 0; margin: 1.85rem 0 0; display: flex; flex-direction: column; gap: 0.8rem; } .login-hero-features li { display: flex; align-items: center; gap: 0.65rem; font-size: 0.85rem; opacity: 0.92; } .login-hero-features .ic { width: 28px; height: 28px; flex: 0 0 auto; border-radius: 8px; background: rgba(255, 255, 255, 0.14); display: flex; align-items: center; justify-content: center; font-size: 0.9rem; } .login-hero-bottom { font-size: 0.75rem; opacity: 0.6; padding-top: 2rem; } .login-panel { flex: 1 1 56%; display: flex; align-items: center; justify-content: center; padding: 2.5rem 2rem; background: radial-gradient(circle at 88% 12%, rgba(var(--primary-light-rgb), 0.07), transparent 45%), var(--bg); } .login-panel-inner { width: 100%; max-width: 380px; } .login-panel-head { margin-bottom: 1.75rem; } .login-panel-head h2 { font-size: 1.4rem; font-weight: 800; margin: 0 0 0.3rem; } .login-panel-head p { color: var(--muted); font-size: 0.87rem; margin: 0; } .login-panel .form-group label { display: flex; align-items: center; gap: 0.4rem; } .login-hint { margin-top: 1.1rem; font-size: 0.76rem; color: var(--muted); text-align: center; } .login-links { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 0.55rem; text-align: center; font-size: 0.85rem; } .login-links a { color: var(--primary-dark); font-weight: 600; text-decoration: none; } .login-links a:hover { text-decoration: underline; } .login-links .muted-link { color: var(--muted); font-weight: 500; } .login-links .muted-link:hover { color: var(--primary-dark); } /* Google sign-in panel (student/applicant login) */ .login-google { display: flex; justify-content: center; margin: 1.25rem 0 0.5rem; min-height: 44px; } .login-note { margin-top: 1.1rem; padding: 0.75rem 0.9rem; background: rgba(var(--primary-light-rgb), 0.09); border: 1px solid rgba(var(--primary-rgb), 0.18); border-radius: var(--radius); color: var(--ink); font-size: 0.78rem; line-height: 1.5; display: flex; gap: 0.55rem; } .login-note .ic { flex: 0 0 auto; font-size: 0.95rem; line-height: 1.3; } .login-secure { margin-top: 1.25rem; text-align: center; font-size: 0.72rem; color: var(--muted); letter-spacing: 0.02em; } /* Track-application result panel */ .track-result { margin-top: 1.5rem; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; } .track-result-head { padding: 1rem 1.1rem; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; background: rgba(var(--primary-light-rgb), 0.08); border-bottom: 1px solid var(--border); } .track-result-head .app-no { font-weight: 800; font-size: 0.95rem; color: var(--ink); } .track-result-head .app-name { font-size: 0.78rem; color: var(--muted); } .track-rows { padding: 0.4rem 1.1rem 0.9rem; } .track-row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.5rem 0; border-bottom: 1px dashed var(--border); font-size: 0.85rem; } .track-row:last-child { border-bottom: 0; } .track-row .k { color: var(--muted); } .track-row .v { font-weight: 600; color: var(--ink); text-align: right; } .track-remark { padding: 0.75rem 1.1rem; background: #fde3e3; color: #b03030; font-size: 0.8rem; border-top: 1px solid var(--border); } .track-empty { margin-top: 1.5rem; padding: 1.1rem; border: 1px dashed var(--border); border-radius: var(--radius-lg); text-align: center; color: var(--muted); font-size: 0.87rem; } .track-empty .ic { font-size: 1.6rem; display: block; margin-bottom: 0.4rem; } @media (max-width: 900px) { .login-split { flex-direction: column; min-height: 0; } .login-hero { flex: 0 0 auto; padding: 2rem 1.5rem 1.75rem; } .login-hero-features, .login-hero-bottom, .login-hero-mid p { display: none; } .login-hero-mid { margin-top: 1.5rem; } .login-hero-mid h1 { font-size: 1.35rem; max-width: none; } .login-panel { flex: 1 1 auto; padding: 2rem 1.25rem 3rem; } } /* ---------- Tables ---------- */ .table thead th { background: rgba(var(--primary-light-rgb), 0.07); border-bottom: 2px solid rgba(var(--primary-rgb), 0.25); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--primary-dark); } /* ---------- Permission matrix ---------- */ .perm-group-header { font-weight: 700; background: rgba(20,184,166,0.08); color: var(--primary-dark); } .perm-module { padding: 0.6rem 0; border-bottom: 1px dashed var(--border); } .perm-module:last-child { border-bottom: none; } .perm-module-name { margin-bottom: 0.35rem; cursor: pointer; } .perm-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; padding-left: 1.4rem; } .perm-chip { display: inline-flex; align-items: center; gap: 0.3rem; background: #f8fafc; border: 1px solid var(--border); border-radius: 999px; padding: 0.15rem 0.7rem; margin: 0; font-size: 0.78rem; text-transform: capitalize; cursor: pointer; } .perm-chip input { margin: 0; } /* ---------- Role picker (user form) ---------- */ .role-pick { padding: 0.4rem 0; border-bottom: 1px dashed var(--border); } .role-pick:last-child { border-bottom: none; } /* ===================================================================== Forms, inputs & filters ===================================================================== */ /* ---------- Labels & field rhythm ---------- */ .form-group { margin-bottom: 1.1rem; } .form-row > .form-group { margin-bottom: 1.1rem; } label, .form-group label, .col-form-label { font-size: 0.79rem; font-weight: 700; color: var(--ink); margin-bottom: 0.4rem; letter-spacing: 0.01em; } label .text-danger { font-weight: 700; } .form-text, small.text-muted { font-size: 0.76rem; } /* ---------- Inputs, selects, textareas ---------- */ .form-control, select.form-control, textarea.form-control, .custom-select { border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: 0.5rem 0.85rem; font-size: 0.88rem; color: var(--ink); background-color: #fff; min-height: calc(1.5em + 1rem + 3px); box-shadow: none; transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease; } textarea.form-control { min-height: 0; line-height: 1.45; } .form-control::placeholder { color: #9ca7b7; opacity: 1; } .form-control:hover, .custom-select:hover { border-color: #cbd5e1; } .form-control:focus, .custom-select:focus, textarea.form-control:focus { border-color: var(--primary-light); box-shadow: 0 0 0 3.5px rgba(var(--primary-light-rgb), 0.16); background-color: #fff; } .form-control:disabled, .form-control[readonly] { background-color: #f4f6f8; color: var(--muted); border-color: var(--border); opacity: 1; } .form-control.is-invalid { border-color: var(--danger); } .form-control.is-invalid:focus { box-shadow: 0 0 0 3.5px rgba(239, 68, 68, 0.15); } .form-control-file { font-size: 0.85rem; } /* Custom checkbox / radio accent to match the teal theme */ .form-check-input { margin-top: 0.28rem; accent-color: var(--primary); width: 1rem; height: 1rem; } .form-check-label { font-weight: 500; font-size: 0.86rem; color: var(--ink); } .form-check { padding-left: 1.6rem; } .form-switch .form-check-input { width: 2.2rem; } /* ---------- Select2 — restyled to match .form-control exactly ---------- */ .select2-container--default .select2-selection--single { border: 1.5px solid var(--border); border-radius: var(--radius-sm); height: calc(1.5em + 1rem + 3px); padding: 0.25rem 0.1rem; display: flex; align-items: center; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--ink); font-size: 0.88rem; line-height: 1.4; padding-left: 0.75rem; } .select2-container--default .select2-selection--single .select2-selection__placeholder { color: #9ca7b7; } .select2-container--default .select2-selection--single .select2-selection__arrow { height: 100%; right: 0.4rem; } .select2-container--default.select2-container--open .select2-selection--single, .select2-container--default .select2-selection--single:focus { border-color: var(--primary-light); box-shadow: 0 0 0 3.5px rgba(var(--primary-light-rgb), 0.16); } .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: var(--primary); } .select2-container--default .select2-results__option[aria-selected="true"] { background-color: rgba(var(--primary-light-rgb), 0.12); color: var(--primary-dark); } .select2-dropdown { border-color: var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); overflow: hidden; } .select2-search--dropdown .select2-search__field { border-radius: var(--radius-sm); border-color: var(--border); padding: 0.4rem 0.6rem; } .select2-container--default .select2-selection--multiple { border: 1.5px solid var(--border); border-radius: var(--radius-sm); min-height: calc(1.5em + 1rem + 3px); } .select2-container--default.select2-container--focus .select2-selection--multiple { border-color: var(--primary-light); box-shadow: 0 0 0 3.5px rgba(var(--primary-light-rgb), 0.16); } .select2-container--default .select2-selection--multiple .select2-selection__choice { background-color: rgba(var(--primary-light-rgb), 0.12); border-color: rgba(var(--primary-light-rgb), 0.3); color: var(--primary-dark); border-radius: 999px; padding: 0.1rem 0.6rem; } /* ---------- Card headers (section titles inside forms/lists) ---------- */ .card-header { background: rgba(var(--primary-light-rgb), 0.06); border-bottom: 1px solid var(--border); font-weight: 700; font-size: 0.92rem; color: var(--primary-dark); padding: 0.75rem 1.25rem; } .card-body { padding: 1.25rem; } /* ---------- Buttons ---------- */ .btn { border-radius: var(--radius-sm); font-weight: 600; font-size: 0.86rem; padding: 0.5rem 1rem; letter-spacing: 0.01em; transition: transform 0.08s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease; } .btn:active { transform: translateY(1px); } .btn-sm { padding: 0.32rem 0.7rem; font-size: 0.78rem; border-radius: 6px; } .btn-primary { box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.25); } .btn-primary:hover { box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.32); } .btn-outline-secondary { color: var(--ink); border-color: var(--border); } .btn-outline-secondary:hover { background: #f1f5f9; border-color: #cbd5e1; color: var(--ink); } .btn-outline-primary { color: var(--primary-dark); border-color: rgba(var(--primary-rgb), 0.4); } .btn-outline-primary:hover { background: var(--primary); border-color: var(--primary); } .btn-outline-danger:hover { box-shadow: 0 2px 8px rgba(239, 68, 68, 0.25); } /* small action buttons sitting side by side in table rows */ td .btn + .btn, td .btn + a.btn, td a.btn + a.btn, td a.btn + .btn { margin-left: 0.35rem; } td.text-right form { display: inline-block; } /* ---------- Filter bars ---------- */ /* .erp-filter-bar wraps a filter
; each label+control pair is an .erp-filter-field so the label sits above its control (instead of the cramped inline label-next-to-select soup Bootstrap's form-inline gives you by default). Purely presentational — field names/values/behavior (onchange auto-submit, GET/POST) are unchanged wherever this is applied. */ .erp-filter-bar { background: linear-gradient(180deg, rgba(var(--primary-light-rgb), 0.05), rgba(var(--primary-light-rgb), 0.015)); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1rem 1.15rem 1.05rem; margin-bottom: 1.25rem; } .erp-filter-bar form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.85rem 1rem; } .erp-filter-field { display: flex; flex-direction: column; gap: 0.32rem; min-width: 150px; } .erp-filter-field label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin: 0; white-space: nowrap; } .erp-filter-field .form-control, .erp-filter-field .select2-container { width: 100%; } .erp-filter-field--wide { min-width: 230px; flex: 1 1 230px; } .erp-filter-field--search { position: relative; min-width: 220px; flex: 1 1 220px; } .erp-filter-field--search input { padding-left: 2.15rem; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat 0.7rem center; background-size: 14px 14px; } .erp-filter-actions { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; } .erp-filter-actions .btn { white-space: nowrap; } .erp-filter-clear { font-size: 0.8rem; font-weight: 600; color: var(--muted); text-decoration: none; background: none; border: none; display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.5rem 0.2rem; white-space: nowrap; cursor: pointer; } .erp-filter-clear:hover { color: var(--danger); text-decoration: none; } .erp-filter-clear:focus { outline: none; color: var(--danger); } @media (max-width: 767px) { .erp-filter-bar form { flex-direction: column; align-items: stretch; } /* .erp-filter-field--wide/--search set a desktop flex-basis (e.g. 230px) meant as a WIDTH hint in the row-direction layout above; once the form switches to flex-direction:column here, that same flex-basis is read as a HEIGHT on the vertical main axis, stretching each field (most visibly a select2 field) to a tall box with dead space below its actual content. Reset the whole flex shorthand so fields size to their natural content height instead of inheriting the desktop width basis. */ .erp-filter-field, .erp-filter-field--wide, .erp-filter-field--search { min-width: 0; width: 100%; flex: 0 0 auto; } .erp-filter-actions { margin-left: 0; width: 100%; } .erp-filter-actions .btn { flex: 1; } } /* ===================================================================== Global quick-search (Spotlight) — Ctrl/Cmd+K command palette. Runs on the theme variables so it recolours per role automatically. ===================================================================== */ .erp-search-btn { display: inline-flex; align-items: center; gap: 8px; /* a wide search-box-style trigger: grows into the free navbar space */ flex: 1 1 auto; max-width: 480px; min-width: 0; margin-left: auto; margin-right: 14px; padding: 7px 14px; border: 1px solid rgba(255, 255, 255, 0.28); background: rgba(255, 255, 255, 0.12); color: #fff; border-radius: 999px; cursor: pointer; font-size: 0.85rem; transition: background 0.15s, border-color 0.15s; text-align: left; } .erp-search-btn .erp-search-label { flex: 1 1 auto; opacity: 0.85; white-space: nowrap; overflow: hidden; } .erp-search-btn .erp-search-kbd { margin-left: auto; } .erp-search-btn:hover { background: rgba(255, 255, 255, 0.22); border-color: rgba(255, 255, 255, 0.5); } .erp-search-btn .erp-search-ico { font-size: 0.95rem; line-height: 1; } .erp-search-btn .erp-search-kbd { display: inline-flex; gap: 3px; } .erp-search-btn .erp-search-kbd kbd { background: rgba(255, 255, 255, 0.22); border: none; color: #fff; border-radius: 4px; padding: 1px 5px; font-size: 0.68rem; font-family: inherit; } @media (max-width: 992px) { /* Collapse to an icon-only circle and pin it into the free gap just left of the avatar (which is absolute at right:4rem) so the two never overlap — right-aligned cluster becomes: [search] [avatar] [hamburger]. */ .erp-search-btn { position: absolute; right: 7rem; top: 0.5rem; margin-left: 0; width: 38px; height: 38px; padding: 0; border-radius: 50%; justify-content: center; } .erp-search-btn .erp-search-label, .erp-search-btn .erp-search-kbd { display: none; } .erp-search-btn .erp-search-ico { font-size: 1rem; } } body.erp-spotlight-lock { overflow: hidden; } .erp-spotlight { position: fixed; inset: 0; z-index: 2000; display: none; } .erp-spotlight.open { display: block; } .erp-spotlight-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.45); backdrop-filter: blur(2px); } .erp-spotlight-box { position: relative; z-index: 1; width: 92%; max-width: 700px; margin: 9vh auto 0; background: var(--surface, #fff); border-radius: var(--radius-lg, 16px); box-shadow: var(--shadow-lg, 0 12px 32px rgba(15,23,42,0.12)); overflow: hidden; animation: erpSpotlightIn 0.13s ease-out; } @keyframes erpSpotlightIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } } .erp-spotlight-input { display: flex; align-items: center; gap: 10px; padding: 15px 18px; border-bottom: 1px solid var(--border, #e2e8f0); } .erp-spotlight-glass { font-size: 1.05rem; opacity: 0.8; } .erp-spotlight-input input { flex: 1; border: none; outline: none; font-size: 1.05rem; color: var(--ink, #0f172a); background: transparent; } .erp-spotlight-esc { border: 1px solid var(--border, #e2e8f0); background: transparent; color: var(--muted, #64748b); border-radius: 6px; padding: 2px 9px; font-size: 0.72rem; cursor: pointer; } .erp-spotlight-results { max-height: 52vh; overflow-y: auto; padding: 6px; } .erp-spotlight-empty { padding: 26px 18px; text-align: center; color: var(--muted, #64748b); font-size: 0.9rem; } .erp-spotlight-group { padding: 10px 12px 4px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted, #64748b); } .erp-spotlight-item { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: var(--radius-md, 10px); text-decoration: none; color: var(--ink, #0f172a); cursor: pointer; } .erp-spotlight-item:hover, .erp-spotlight-item.active { background: rgba(var(--primary-rgb, 15, 118, 110), 0.10); text-decoration: none; } .erp-spotlight-item.active { box-shadow: inset 0 0 0 1px rgba(var(--primary-rgb, 15, 118, 110), 0.35); } .erp-spotlight-item-ico { flex: 0 0 auto; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; font-size: 1rem; background: rgba(var(--primary-rgb, 15, 118, 110), 0.09); border-radius: 8px; } .erp-spotlight-item-body { display: flex; flex-direction: column; min-width: 0; } .erp-spotlight-item-title { font-weight: 600; font-size: 0.92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .erp-spotlight-item-sub { font-size: 0.76rem; color: var(--muted, #64748b); } .erp-spotlight-foot { display: flex; gap: 16px; align-items: center; padding: 9px 16px; border-top: 1px solid var(--border, #e2e8f0); font-size: 0.72rem; color: var(--muted, #64748b); } .erp-spotlight-foot-tip { margin-left: auto; } .erp-spotlight-foot kbd { background: var(--bg, #f0fdfa); border: 1px solid var(--border, #e2e8f0); color: var(--muted, #64748b); border-radius: 4px; padding: 1px 5px; font-size: 0.68rem; font-family: inherit; } @media (max-width: 576px) { .erp-spotlight-box { margin-top: 5vh; width: 96%; } .erp-spotlight-foot-tip { display: none; } } /* Spotlight: matched-character highlight in result titles. */ .erp-spotlight-item-title mark.erp-sp-hl { background: transparent; color: var(--primary); font-weight: 800; padding: 0; } /* ===================================================================== Student Portal — interactive polish (buttons, DataTables, tabs, tiles). Scoped to html[data-role-theme="student"] so none of this touches the staff app; colours ride the portal's own --primary/--primary-light (azure) already set on that selector above. ===================================================================== */ /* ---------- Buttons: pill-shaped, lift-on-hover ---------- */ html[data-role-theme="student"] .btn { border-radius: 999px; transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.15s ease, border-color 0.15s ease; } html[data-role-theme="student"] .btn:hover { transform: translateY(-1px); } html[data-role-theme="student"] .btn:active { transform: translateY(0); } html[data-role-theme="student"] .btn-primary { background: linear-gradient(135deg, var(--primary), var(--primary-light)); border: none; box-shadow: 0 3px 10px rgba(var(--primary-rgb), 0.28); } html[data-role-theme="student"] .btn-primary:hover { background: linear-gradient(135deg, var(--primary-dark), var(--primary)); box-shadow: 0 5px 14px rgba(var(--primary-rgb), 0.36); } html[data-role-theme="student"] .btn-outline-primary { color: var(--primary-dark); border-color: rgba(var(--primary-rgb), 0.4); } html[data-role-theme="student"] .btn-outline-primary:hover { background: linear-gradient(135deg, var(--primary), var(--primary-light)); border-color: transparent; color: #fff; box-shadow: 0 3px 10px rgba(var(--primary-rgb), 0.28); } html[data-role-theme="student"] .btn-outline-secondary:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); } /* ---------- Cards: gentle hover lift ---------- */ html[data-role-theme="student"] .card { transition: transform 0.12s ease, box-shadow 0.12s ease; } html[data-role-theme="student"] .card:hover { box-shadow: var(--shadow-md); } /* ---------- Badges: pill, slightly bolder ---------- */ html[data-role-theme="student"] .badge { border-radius: 999px; padding: 0.38em 0.75em; font-weight: 600; letter-spacing: 0.01em; } /* ---------- Progress bars ---------- */ html[data-role-theme="student"] .progress { border-radius: 999px; background: rgba(var(--primary-rgb), 0.08); } html[data-role-theme="student"] .progress-bar { border-radius: 999px; } /* ---------- Dashboard quick-link tiles ---------- */ html[data-role-theme="student"] .quick-link-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 0.75rem; } html[data-role-theme="student"] .quick-link-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4rem; padding: 1.1rem 0.5rem; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); text-decoration: none; color: var(--ink); transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease, background 0.12s ease; } html[data-role-theme="student"] .quick-link-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: rgba(var(--primary-rgb), 0.35); text-decoration: none; color: var(--primary-dark); background: linear-gradient(180deg, rgba(var(--primary-rgb), 0.06), var(--surface)); } html[data-role-theme="student"] .qlt-icon { font-size: 1.7rem; line-height: 1; } html[data-role-theme="student"] .qlt-label { font-size: 0.78rem; font-weight: 700; text-align: center; } /* Stat cards with a leading icon */ html[data-role-theme="student"] .stat-card { flex-direction: row; align-items: center; gap: 0.9rem; } html[data-role-theme="student"] .stat-icon { font-size: 1.4rem; width: 46px; height: 46px; border-radius: 50%; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.14), rgba(var(--primary-light-rgb), 0.14)); } html[data-role-theme="student"] .stat-text { display: flex; flex-direction: column; } /* ---------- Nav pills (tab bars: settings/reports/verification/review/…) ---------- Originally student-portal-only; generalized (2026-07-17) because six STAFF screens (setup/settings, finance/reports, exam/verification, admissions/review, setup/holidays, timetable board) also use Bootstrap .nav-pills tab bars and were silently falling back to Bootstrap's own #007bff blue .active state instead of the logged-in user's role theme — every var here is already theme-safe (--ink/ --border are role-invariant; --primary* repaints per role), so making the rule global costs nothing and fixes all six pages at once, staff and student alike. */ .nav-pills { margin-bottom: 1rem; } .nav-pills .nav-link { border-radius: 999px; font-weight: 600; font-size: 0.85rem; color: var(--ink); padding: 0.4rem 1rem; margin: 0 0.4rem 0.4rem 0; border: 1px solid var(--border); } .nav-pills .nav-link.active { background: linear-gradient(135deg, var(--primary), var(--primary-light)); border-color: transparent; color: #fff; box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.3); } .nav-pills .nav-link:not(.active):hover { background: rgba(var(--primary-rgb), 0.08); border-color: rgba(var(--primary-rgb), 0.25); } /* ---------- Notification feed items ---------- */ html[data-role-theme="student"] .notif-item { border-left: 3px solid transparent; transition: background 0.12s ease; align-items: flex-start !important; } /* the .notif-list descendant makes this MORE specific than .sp-list-item's own padding/gap rule, so it wins the cascade without !important — the shared .6rem/.7rem list rhythm suits single-line rows (Syllabus's My Papers), but a notification body is often 2-3 lines and reads as a cramped wall of text at that spacing, so this feed gets its own roomier rhythm. */ html[data-role-theme="student"] .notif-list .notif-item { padding: 1rem 1.25rem; gap: 1rem; } html[data-role-theme="student"] .notif-item.is-unread { border-left-color: var(--primary); background: rgba(var(--primary-rgb), 0.05); } html[data-role-theme="student"] .notif-ic { margin-top: .1rem; } html[data-role-theme="student"] .notif-title { font-weight: 700; font-size: .92rem; color: #1f2937; } html[data-role-theme="student"] .notif-row-head { gap: .5rem; row-gap: .3rem; margin-bottom: .3rem; } html[data-role-theme="student"] .notif-time { margin-left: auto; } html[data-role-theme="student"] .notif-body { line-height: 1.6; font-size: .84rem; } html[data-role-theme="student"] .notif-toolbar { margin-bottom: 1rem; } html[data-role-theme="student"] .notif-toolbar .portal-search-box { flex: 0 1 300px; } @media (max-width: 575.98px) { html[data-role-theme="student"] .notif-toolbar .portal-search-box { flex: 1 1 100%; max-width: none; } } /* ---------- Feedback (portal) ---------- */ html[data-role-theme="student"] .fb-item { flex-wrap: wrap; } html[data-role-theme="student"] .fb-body { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: .1rem; } html[data-role-theme="student"] .fb-course { font-weight: 700; font-size: .88rem; color: #1f2937; } html[data-role-theme="student"] .fb-course .fb-title { font-weight: 400; color: var(--muted); font-size: .82rem; } html[data-role-theme="student"] .fb-sub { font-size: .76rem; color: var(--muted); } html[data-role-theme="student"] .fb-actions { display: flex; align-items: center; gap: .55rem; margin-left: auto; } @media (max-width: 575.98px) { /* keep the action row from squeezing the body into a sliver — let it drop to its own line aligned under the text, so the button is never off-screen */ html[data-role-theme="student"] .fb-actions { margin-left: calc(42px + .7rem); } } /* segmented 1–5 rating control (CSS-only, no JS) */ html[data-role-theme="student"] .fb-q { padding: 1rem 0; border-bottom: 1px dashed #edf1f5; } html[data-role-theme="student"] .fb-q:first-child { padding-top: 0; } html[data-role-theme="student"] .fb-q:last-of-type { border-bottom: 0; } html[data-role-theme="student"] .fb-q-label { display: flex; align-items: flex-start; gap: .55rem; font-weight: 600; color: #1f2937; margin-bottom: .7rem; } html[data-role-theme="student"] .fb-q-no { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; background: rgba(var(--primary-rgb), .12); color: var(--primary-dark); font-size: .75rem; font-weight: 800; display: flex; align-items: center; justify-content: center; margin-top: .05rem; } html[data-role-theme="student"] .fb-rating { display: inline-flex; flex-wrap: wrap; gap: .5rem; margin-left: calc(24px + .55rem); } html[data-role-theme="student"] .fb-rating-input { position: absolute; opacity: 0; pointer-events: none; } html[data-role-theme="student"] .fb-rating-lbl { width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 12px; cursor: pointer; font-weight: 700; color: #55606b; background: #fff; transition: all .12s ease; margin: 0; } html[data-role-theme="student"] .fb-rating-lbl:hover { border-color: var(--primary); color: var(--primary-dark); } html[data-role-theme="student"] .fb-rating-input:checked + .fb-rating-lbl { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff; border-color: var(--primary); box-shadow: 0 2px 6px rgba(var(--primary-rgb), .35); } html[data-role-theme="student"] .fb-rating-input:focus-visible + .fb-rating-lbl { outline: 2px solid var(--primary); outline-offset: 2px; } html[data-role-theme="student"] .fb-rating-scale { display: flex; justify-content: space-between; max-width: 274px; margin-left: calc(24px + .55rem); margin-top: .4rem; font-size: .72rem; color: var(--muted); } html[data-role-theme="student"] .fb-form-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid #eef2f6; } @media (max-width: 575.98px) { html[data-role-theme="student"] .fb-rating, html[data-role-theme="student"] .fb-rating-scale, html[data-role-theme="student"] .fb-q-label { margin-left: 0; } html[data-role-theme="student"] .fb-rating-lbl { width: 44px; height: 44px; } } /* ---------- Notice cards ---------- */ html[data-role-theme="student"] .notice-ic { margin-top: .1rem; } html[data-role-theme="student"] .notice-title { font-weight: 700; font-size: 1rem; color: #1f2937; } html[data-role-theme="student"] .notice-row-head { row-gap: .3rem; } html[data-role-theme="student"] .notice-when { margin-top: .15rem; } html[data-role-theme="student"] .notice-body { color: #3a4650; font-size: .88rem; line-height: 1.55; } html[data-role-theme="student"] .notice-body p:last-child { margin-bottom: 0; } /* ---------- Live text-search box (Notices) ---------- */ html[data-role-theme="student"] .portal-search-box { position: relative; max-width: 340px; margin-bottom: 1rem; } html[data-role-theme="student"] .portal-search-box input { border-radius: 999px; padding-left: 2.1rem; border: 1px solid var(--border); } html[data-role-theme="student"] .portal-search-box::before { content: '🔍'; position: absolute; left: 0.8rem; top: 50%; transform: translateY(-50%); font-size: 0.85rem; opacity: 0.6; pointer-events: none; } /* ---------- DataTables theming ---------- */ html[data-role-theme="student"] table.dataTable thead th { border-bottom: 2px solid var(--primary-light); } html[data-role-theme="student"] .dataTables_wrapper .dataTables_filter input { border-radius: 999px; border: 1px solid var(--border); padding: 0.3rem 0.9rem; margin-left: 0.5rem; } html[data-role-theme="student"] .dataTables_wrapper .dataTables_length select { border-radius: 6px; border: 1px solid var(--border); padding: 0.15rem 0.4rem; } html[data-role-theme="student"] .dataTables_wrapper .dataTables_paginate .paginate_button { border-radius: 999px !important; margin-left: 2px; } html[data-role-theme="student"] .dataTables_wrapper .dataTables_paginate .paginate_button.current, html[data-role-theme="student"] .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { background: linear-gradient(135deg, var(--primary), var(--primary-light)) !important; border-color: transparent !important; color: #fff !important; } html[data-role-theme="student"] .dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: rgba(var(--primary-rgb), 0.12) !important; border-color: transparent !important; color: var(--primary-dark) !important; } html[data-role-theme="student"] select.js-dt-column-filter { border-radius: 999px; max-width: 220px; display: inline-block; } /* ===================================================================== Applicant area (student_portal/*) — shares the student theme scope above; these are the components specific to the application wizard. ===================================================================== */ /* ---------- Wizard step progress bar ---------- */ html[data-role-theme="student"] .wizard-steps { display: flex; align-items: flex-start; margin: 1.25rem 0 1.5rem; list-style: none; padding: 0; } html[data-role-theme="student"] .wizard-step { flex: 1; position: relative; text-align: center; min-width: 0; } html[data-role-theme="student"] .wizard-step::before { content: ''; position: absolute; top: 18px; left: -50%; width: 100%; height: 3px; background: var(--border); z-index: 0; } html[data-role-theme="student"] .wizard-step:first-child::before { display: none; } html[data-role-theme="student"] .wizard-step.is-done::before, html[data-role-theme="student"] .wizard-step.is-current::before { background: rgba(var(--primary-rgb), 0.3); } html[data-role-theme="student"] .wizard-step-circle { position: relative; z-index: 1; width: 38px; height: 38px; margin: 0 auto 0.5rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.9rem; background: var(--surface); border: 2px solid var(--border); color: var(--muted); } html[data-role-theme="student"] .wizard-step.is-current .wizard-step-circle { border-color: var(--primary); color: var(--primary); box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.14); } html[data-role-theme="student"] .wizard-step.is-done .wizard-step-circle { background: linear-gradient(135deg, var(--primary), var(--primary-light)); border-color: transparent; color: #fff; } html[data-role-theme="student"] .wizard-step-label { font-size: 0.78rem; font-weight: 600; color: var(--muted); padding: 0 0.25rem; } html[data-role-theme="student"] .wizard-step.is-current .wizard-step-label, html[data-role-theme="student"] .wizard-step.is-done .wizard-step-label { color: var(--ink); } html[data-role-theme="student"] .wizard-step > a { text-decoration: none; display: block; } @media (max-width: 576px) { html[data-role-theme="student"] .wizard-step-label { font-size: 0.68rem; } } /* ---------- Applicant area shell + wizard form organization ---------- */ html[data-role-theme="student"] .erp-applicant-container { max-width: 1240px; margin: 0 auto; padding-left: 24px; padding-right: 24px; } @media (max-width: 768px) { html[data-role-theme="student"] .erp-applicant-container { padding-left: 14px; padding-right: 14px; } } html[data-role-theme="student"] .erp-wizard-card > .card-body { padding: 1.75rem 2rem 1.5rem; } @media (max-width: 768px) { html[data-role-theme="student"] .erp-wizard-card > .card-body { padding: 1.25rem 1rem; } } /* Section headings inside the application form */ html[data-role-theme="student"] .erp-form-section { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--primary-dark); margin: 1.9rem 0 1.1rem; padding-bottom: 0.5rem; border-bottom: 2px solid rgba(var(--primary-rgb), 0.15); } html[data-role-theme="student"] .erp-form-section:first-of-type { margin-top: 0.25rem; } html[data-role-theme="student"] .erp-form-section .small { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--muted); } /* Comfortable gutters + label rhythm (Bootstrap .form-row is a cramped 10px) */ html[data-role-theme="student"] .erp-wizard-card .form-row { margin-left: -10px; margin-right: -10px; } html[data-role-theme="student"] .erp-wizard-card .form-row > .col, html[data-role-theme="student"] .erp-wizard-card .form-row > [class*="col-"] { padding-left: 10px; padding-right: 10px; } html[data-role-theme="student"] .erp-wizard-card .form-group { margin-bottom: 1.15rem; } html[data-role-theme="student"] .erp-wizard-card .form-group > label { font-size: 0.8rem; font-weight: 600; color: var(--ink); margin-bottom: 0.35rem; } html[data-role-theme="student"] .erp-wizard-card .form-text { font-size: 0.72rem; } /* ---------- Document upload row with live preview ---------- */ html[data-role-theme="student"] .doc-upload-row { display: flex; align-items: center; gap: 1rem; padding: 0.75rem 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; } html[data-role-theme="student"] .doc-upload-row:last-child { border-bottom: none; } html[data-role-theme="student"] .doc-preview-box { width: 56px; height: 56px; border-radius: var(--radius-md); border: 1px dashed var(--border); display: flex; align-items: center; justify-content: center; overflow: hidden; flex: 0 0 auto; background: rgba(var(--primary-rgb), 0.04); font-size: 1.3rem; color: var(--muted); } html[data-role-theme="student"] .doc-preview-box.has-file { border-style: solid; border-color: rgba(var(--primary-rgb), 0.3); } html[data-role-theme="student"] .doc-preview-box img { width: 100%; height: 100%; object-fit: cover; } html[data-role-theme="student"] .doc-preview-file { font-size: 0.65rem; word-break: break-all; padding: 2px; line-height: 1.15; } html[data-role-theme="student"] .doc-upload-info { flex: 1 1 220px; min-width: 0; } /* ---- Rich-text editor (CKEditor 5, textarea.js-richtext) ---- */ .ck-editor__editable_inline { min-height: 320px; } .ck.ck-editor { width: 100%; } /* keep the editor under the app's dropdowns/spotlight but above the card */ .ck.ck-balloon-panel { z-index: 1060; } /* ---- Module Reports (reports/summary): card grid + detail bits ---- */ /* Module Reports search box — full width, matching the .rep-card look. */ .rep-search { margin-bottom: 1rem; } .rep-search input { width: 100%; padding: .62rem .95rem .62rem 2.55rem; font-size: .9rem; color: var(--ink, #1e293b); border: 1px solid rgba(var(--primary-rgb), 0.14); border-radius: 12px; transition: border-color .15s, box-shadow .15s; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat 0.95rem center; background-size: 16px 16px; } .rep-search input::placeholder { color: var(--muted, #94a3b8); } .rep-search input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .12); } /* Category grouping on the landing page. */ .rep-cat { display: flex; align-items: center; gap: .6rem; margin: 1.75rem 0 .85rem; } .rep-cat-group:first-child .rep-cat { margin-top: .4rem; } .rep-cat-ico { font-size: 1.1rem; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9px; background: rgba(var(--primary-rgb), .08); flex-shrink: 0; } .rep-cat-name { font-weight: 700; font-size: 1.02rem; color: var(--ink, #1e293b); white-space: nowrap; } .rep-cat-count { font-size: .68rem; font-weight: 700; color: var(--primary-dark, var(--primary)); background: rgba(var(--primary-rgb), .09); padding: .12rem .5rem; border-radius: 999px; } .rep-cat-rule { flex: 1 1 auto; height: 1px; background: linear-gradient(90deg, var(--border, #e5e7eb), transparent); min-width: 20px; } .rep-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; } .rep-card { display: flex; flex-direction: column; gap: .35rem; background: #fff; border: 1px solid rgba(var(--primary-rgb), 0.14); border-radius: 12px; padding: 1rem 1.1rem; text-decoration: none; color: inherit; border-top: 3px solid rgba(var(--primary-rgb), 0.55); box-shadow: 0 1px 3px rgba(0,0,0,.05); transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .rep-card:hover { text-decoration: none; color: inherit; transform: translateY(-3px); box-shadow: 0 8px 20px rgba(var(--primary-rgb), 0.16); border-color: rgba(var(--primary-rgb), 0.35); } .rep-card-top { display: flex; justify-content: space-between; align-items: flex-start; } .rep-card-ico { font-size: 1.7rem; line-height: 1; } .rep-card-stat { font-size: 1.25rem; font-weight: 800; color: var(--primary-dark, var(--primary)); font-variant-numeric: tabular-nums; } .rep-card-title { font-weight: 700; font-size: 1rem; margin-top: .1rem; } .rep-card-desc { font-size: .8rem; color: #6b7280; line-height: 1.45; flex: 1 1 auto; } .rep-card-foot { display: flex; justify-content: space-between; align-items: baseline; margin-top: .35rem; } .rep-card-hint { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: #9ca3af; } .rep-card-go { font-size: .78rem; font-weight: 600; color: var(--primary); opacity: 0; transform: translateX(-4px); transition: opacity .12s ease, transform .12s ease; } .rep-card:hover .rep-card-go { opacity: 1; transform: translateX(0); } .rep-bar { height: 6px; background: #eef0f3; border-radius: 3px; overflow: hidden; margin-bottom: 3px; } .rep-bar-fill { height: 100%; background: var(--primary); border-radius: 3px; } .rep-bar-fill.is-low { background: #dc3545; } .rep-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; text-align: center; } .rep-stat { padding: 1rem .5rem; border: 1px solid rgba(var(--primary-rgb), 0.12); border-radius: 10px; background: rgba(var(--primary-rgb), 0.03); } .rep-stat-num { font-size: 1.6rem; font-weight: 800; font-variant-numeric: tabular-nums; } .rep-stat-lbl { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: #6b7280; margin-top: .15rem; } /* ---- Analytics dashboard (reports/analytics) ---- */ .ana-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .8rem; margin-bottom: 1.25rem; } .ana-kpi { display: flex; align-items: center; gap: .7rem; background: #fff; border: 1px solid rgba(var(--primary-rgb), 0.14); border-radius: 10px; border-left: 4px solid rgba(var(--primary-rgb), 0.6); padding: .8rem .9rem; box-shadow: 0 1px 3px rgba(0,0,0,.05); } .ana-kpi.is-warn { border-left-color: #f59e0b; } .ana-kpi-ico { font-size: 1.5rem; line-height: 1; } .ana-kpi-num { font-size: 1.25rem; font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; } .ana-kpi-lbl { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: #6b7280; } /* Dashboard-only modifier: a small per-CARD category tag instead of a forced full-width row-break before each domain cluster. A spanning break (grid-column:1/-1) guarantees a short category leaves its unused trailing columns permanently blank — auto-fill can never pull a later card back into that gap once a hard break forces a new row. Tagging each card individually keeps the grid packing every row tight (no forced breaks = no gap is even possible) while the card still says exactly which domain it belongs to. Scoped to .dash-kpi--tagged so the shared .ana-kpi row layout used by reports/analytics + reports/summary is untouched. */ .dash-kpi--tagged { flex-direction: column; align-items: stretch; } .dash-kpi--tagged .ana-kpi-body { display: flex; align-items: center; gap: .7rem; } .dash-kpi-cat { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted, #64748b); margin-top: .55rem; padding-top: .4rem; border-top: 1px dashed rgba(0, 0, 0, .1); } /* grid-auto-flow: dense backfills any cell a span-2 card can't reach (the real fix for "blank rectangle" gaps); default align-items (stretch) plus Bootstrap 4's own .card{display:flex;flex-direction:column} + .card-body {flex:1 1 auto} make every card in a row settle to the SAME height for free — no manual h-100 juggling needed. */ .ana-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-flow: dense; gap: 1rem; } .ana-span2 { grid-column: span 2; } .ana-span3 { grid-column: span 3; } @media (max-width: 992px) { .ana-grid { grid-template-columns: 1fr; } .ana-span2, .ana-span3 { grid-column: span 1; } } .ana-card { margin-bottom: 0; height: 100%; } .ana-card .card-header { font-weight: 600; font-size: .85rem; } .ana-chart { position: relative; height: 240px; } .ana-chart--wide { height: 260px; } .ana-empty { color: #6b7280; font-size: .85rem; text-align: center; padding: 2.5rem 1rem; } @media print { .ana-grid { display: block; } .ana-card { page-break-inside: avoid; margin-bottom: 1rem; } } /* ---- Feedback report (interactive analytics view) ---- */ .fbr-stars { color: #f59e0b; letter-spacing: 1px; white-space: nowrap; } .fbr-score { display: inline-flex; align-items: baseline; gap: .3rem; } .fbr-score-num { font-size: 1.7rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; } .fbr-score-max { font-size: .8rem; color: var(--muted); } .fbr-chip { display: inline-flex; flex-direction: column; align-items: flex-end; gap: .1rem; padding: .4rem .7rem; border-radius: var(--radius-md); background: rgba(var(--primary-rgb), .06); } .fbr-chip.is-good { background: rgba(16,185,129,.10); } .fbr-chip.is-ok { background: rgba(245,158,11,.12); } .fbr-chip.is-bad { background: rgba(239,68,68,.10); } .fbr-card { border: 1px solid var(--border); border-radius: var(--radius-md); } .fbr-card.is-good { border-left: 4px solid #10b981; } .fbr-card.is-ok { border-left: 4px solid #f59e0b; } .fbr-card.is-bad { border-left: 4px solid #ef4444; } .fbr-card.is-none { border-left: 4px solid var(--border); } .fbr-qrow { display: flex; align-items: center; gap: .75rem; padding: .35rem 0; border-top: 1px dashed var(--border); } .fbr-qrow:first-of-type { border-top: 0; } .fbr-qrow .fbr-q { flex: 1 1 220px; min-width: 0; } .fbr-qrow .fbr-bar { flex: 0 0 170px; } .fbr-qrow .fbr-bar .progress { height: 9px; margin: 0; background: #eef1f4; } .fbr-qrow .fbr-val { flex: 0 0 74px; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; } .fbr-cmt-toggle { cursor: pointer; } .fbr-legend { display: inline-flex; flex-wrap: wrap; gap: .8rem; font-size: .75rem; color: var(--muted); } .fbr-legend .dot { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: .3rem; vertical-align: middle; } @media (max-width: 576px) { .fbr-qrow .fbr-bar { flex-basis: 90px; } } @media print { .feedback-report .collapse { display: block !important; height: auto !important; } .feedback-report .fbr-cmt-toggle .fbr-caret { display: none; } } /* ---- Dashboard (role-aware landing page) ---- */ .dash-hello { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; } .dash-hello h1 { font-size: 1.5rem; } .dash-counts { display: flex; gap: 1rem; flex-wrap: wrap; } .dash-counts strong { font-variant-numeric: tabular-nums; } .dash-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.1rem; } .dash-action { display: inline-flex; align-items: center; gap: .45rem; background: #fff; border: 1px solid rgba(var(--primary-rgb), 0.22); border-radius: 999px; padding: .38rem .95rem; font-size: .82rem; font-weight: 600; color: var(--primary-dark, var(--primary)); text-decoration: none; box-shadow: 0 1px 2px rgba(0,0,0,.04); transition: background .12s ease, transform .12s ease, box-shadow .12s ease; } .dash-action:hover { background: rgba(var(--primary-rgb), 0.08); color: var(--primary-dark, var(--primary)); text-decoration: none; transform: translateY(-1px); box-shadow: 0 3px 8px rgba(var(--primary-rgb), .18); } .dash-kpi { text-decoration: none; color: inherit; transition: transform .12s ease, box-shadow .12s ease; } .dash-kpi:hover { text-decoration: none; color: inherit; transform: translateY(-2px); box-shadow: 0 6px 14px rgba(var(--primary-rgb), .15); } .dash-chart { position: relative; height: 200px; } .dash-linkcard { border-style: dashed; } /* Widget cards are grouped into named sections (Today / Finance / Academic Watch / Notices & Calendar / System) so related cards (all fee/finance content, all notices, etc.) sit together instead of scattering through one undifferentiated grid — and because each section's cards now tend to carry a similar amount of content, letting the grid's default (stretch) alignment even out each ROW's height reads as tidy, not wasteful: every card in a row settles to the tallest sibling for free (Bootstrap 4's own .card{display:flex;flex-direction:column} + .card-body{flex:1 1 auto} push any extra height into the body / footer placement, no h-100 needed). */ .dash-section { margin-bottom: 1.6rem; } .dash-section:last-child { margin-bottom: 0; } .dash-section-title { display: flex; align-items: center; gap: .5rem; font-size: .95rem; font-weight: 700; margin-bottom: .7rem; } .dash-section-count { font-weight: 600; font-size: .72rem; color: var(--muted, #64748b); background: rgba(0, 0, 0, .045); border-radius: 999px; padding: .08rem .55rem; } .dash-widgets { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 1rem; } .dash-widget { margin-bottom: 0; height: 100%; } .dash-widget .card-header { font-weight: 600; font-size: .85rem; } .dash-notice { padding: .35rem 0; border-bottom: 1px dashed #e9ecef; } .dash-notice:last-child { border-bottom: 0; } @media print { .dash-widgets { display: block; } .dash-widget { page-break-inside: avoid; margin-bottom: 1rem; } } /* ══════════════════ Student portal dashboard (skv-style, 2026-07-14) ══════════════════ .sp-* components are emitted only by views/portal/dashboard/index.php; they run on the theme vars so the student azure palette colours them automatically. */ /* hero */ .sp-hero { position: relative; overflow: hidden; border-radius: 14px; margin-bottom: 1rem; background: linear-gradient(120deg, var(--primary-dark), var(--primary) 55%, var(--primary-light)); color: #fff; box-shadow: 0 8px 24px rgba(var(--primary-rgb), .25); } .sp-hero::after { content: ''; position: absolute; right: -70px; top: -90px; width: 260px; height: 260px; border-radius: 50%; background: rgba(255,255,255,.12); pointer-events: none; } .sp-hero::before { content: ''; position: absolute; right: 90px; bottom: -120px; width: 200px; height: 200px; border-radius: 50%; background: rgba(255,255,255,.08); pointer-events: none; } .sp-hero-body { position: relative; padding: 1.35rem 1.5rem 1.25rem; } .sp-hero-sub { font-size: .78rem; opacity: .85; letter-spacing: .04em; text-transform: uppercase; } .sp-hero-title { font-size: 1.55rem; font-weight: 700; margin: .15rem 0 .65rem; color: #fff; } .sp-chips { display: flex; flex-wrap: wrap; gap: .45rem; } .sp-chip { display: inline-flex; align-items: center; gap: .3rem; padding: .28rem .7rem; border-radius: 999px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.25); font-size: .78rem; color: #fff; } .sp-chip--ok { background: rgba(32,178,108,.35); border-color: rgba(150,255,205,.45); } .sp-chip--warn { background: rgba(255,170,40,.35); border-color: rgba(255,215,150,.5); } .sp-chip--bad { background: rgba(230,70,70,.4); border-color: rgba(255,170,170,.5); } /* exam alert banner */ .sp-alert { display: flex; align-items: center; gap: .9rem; padding: .85rem 1.1rem; margin-bottom: 1rem; border-radius: 12px; color: #fff; text-decoration: none; background: linear-gradient(110deg, #e2711d, #f0932b 60%, #f6b93b); box-shadow: 0 6px 18px rgba(240,147,43,.35); transition: transform .15s ease, box-shadow .15s ease; } .sp-alert:hover { color: #fff; text-decoration: none; transform: translateY(-2px); box-shadow: 0 9px 22px rgba(240,147,43,.45); } .sp-alert-ico { font-size: 1.6rem; } .sp-alert-body { display: flex; flex-direction: column; gap: .1rem; flex: 1; min-width: 0; } .sp-alert-body strong { font-size: .95rem; } .sp-alert-body span { font-size: .8rem; opacity: .92; } .sp-alert-count { text-align: center; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.3); border-radius: 10px; padding: .3rem .8rem; line-height: 1.1; } .sp-alert-count b { display: block; font-size: 1.25rem; } .sp-alert-count small { font-size: .65rem; text-transform: uppercase; letter-spacing: .04em; } .sp-alert-go { font-weight: 600; font-size: .9rem; white-space: nowrap; } /* KPI strip */ .sp-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .7rem; margin-bottom: 1rem; } .sp-kpi { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; padding: .8rem .95rem; background: #fff; border: 1px solid #e7ecf1; border-radius: 12px; text-decoration: none; color: #2d3436; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; } .sp-kpi:hover { text-decoration: none; color: #2d3436; transform: translateY(-2px); border-color: rgba(var(--primary-rgb), .45); box-shadow: 0 6px 16px rgba(var(--primary-rgb), .14); } .sp-kpi-ico { font-size: 1.15rem; } .sp-kpi-val { font-size: 1.25rem; font-weight: 700; color: var(--primary-dark); } .sp-kpi-lbl { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; } .sp-kpi--bad { border-color: #f3c1c1; background: #fff6f6; } .sp-kpi--bad .sp-kpi-val { color: #c0392b; } .sp-kpi--bad .sp-kpi-lbl { color: #8a5a5a; } .sp-kpi--bad:hover { border-color: #e57373; box-shadow: 0 6px 16px rgba(192,57,43,.16); } /* module tiles */ .sp-mods { display: grid; grid-template-columns: repeat(auto-fill, minmax(105px, 1fr)); gap: .7rem; margin-bottom: 1.25rem; } .sp-mod { display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: .85rem .4rem; border-radius: 12px; text-decoration: none; border: 1px solid transparent; transition: transform .15s ease, box-shadow .15s ease; } .sp-mod:hover { text-decoration: none; transform: translateY(-3px); box-shadow: 0 8px 18px rgba(0,0,0,.09); } .sp-mod-ico { font-size: 1.5rem; } .sp-mod-lbl { font-size: .74rem; font-weight: 600; } .sp-mod--c1 { background: #eaf3ff; color: #2c5f9e; } .sp-mod--c1:hover { color: #2c5f9e; } .sp-mod--c2 { background: #eafaf1; color: #1e7a4f; } .sp-mod--c2:hover { color: #1e7a4f; } .sp-mod--c3 { background: #fff4e8; color: #a05a1c; } .sp-mod--c3:hover { color: #a05a1c; } .sp-mod--c4 { background: #f6efff; color: #6a3fa0; } .sp-mod--c4:hover { color: #6a3fa0; } .sp-mod--c5 { background: #fdeef2; color: #a83a5b; } .sp-mod--c5:hover { color: #a83a5b; } /* cards / lists */ .sp-card { border-radius: 12px; border: 1px solid #e7ecf1; margin-bottom: 1rem; } .sp-card > .card-header { background: #fff; font-weight: 600; font-size: .88rem; border-bottom: 1px solid #eef2f6; } .sp-empty { display: flex; align-items: center; gap: .6rem; color: var(--muted); font-size: .85rem; padding: 1.1rem 1.25rem; } .sp-empty span { font-size: 1.4rem; } .sp-list { list-style: none; margin: 0; padding: 0; } .sp-list-item { display: flex; align-items: center; gap: .7rem; padding: .6rem 1.15rem; border-bottom: 1px dashed #edf1f5; } .sp-list-item:last-child { border-bottom: 0; } .sp-list-body { display: flex; flex-direction: column; min-width: 0; flex: 1; } .sp-list-title { font-size: .85rem; font-weight: 600; color: #2d3436; } .sp-list-sub { font-size: .74rem; color: var(--muted); } .sp-pill { padding: .2rem .6rem; border-radius: 999px; font-size: .7rem; font-weight: 700; white-space: nowrap; } .sp-pill--ok { background: #d9f4e5; color: #1e7a4f; } .sp-pill--warn { background: #ffefd6; color: #a05a1c; } .sp-pill--bad { background: #fde3e3; color: #b03030; } .sp-pill--info { background: #e3eefc; color: #2c5f9e; } .sp-pill--muted { background: #eef1f4; color: #55606b; } .sp-pill--violet { background: #f0edff; color: #6a3fa0; } .sp-libline { font-size: .85rem; } /* today's classes */ .sp-classlist { list-style: none; margin: 0; padding: .4rem 0; } .sp-class { display: flex; align-items: center; gap: .9rem; padding: .55rem 1.15rem; } .sp-class--past { opacity: .5; } .sp-class--now { background: linear-gradient(90deg, rgba(var(--primary-rgb), .12), rgba(var(--primary-rgb), .03)); border-left: 3px solid var(--primary); } .sp-class--break { justify-content: center; padding: .3rem 1.15rem; } .sp-class--break span { font-size: .72rem; color: var(--muted); border: 1px dashed #d4dde5; border-radius: 999px; padding: .15rem .8rem; } .sp-class-time { min-width: 74px; text-align: right; font-size: .8rem; font-weight: 700; color: var(--primary-dark); line-height: 1.15; } .sp-class-time small { font-weight: 400; color: var(--muted); } .sp-class-body { display: flex; flex-direction: column; min-width: 0; flex: 1; } .sp-class-title { font-size: .87rem; font-weight: 600; color: #2d3436; } .sp-class-sub { font-size: .74rem; color: var(--muted); } .sp-now { background: var(--primary); color: #fff; font-size: .66rem; font-weight: 800; letter-spacing: .06em; padding: .22rem .55rem; border-radius: 999px; animation: sp-pulse 1.6s ease-in-out infinite; } .sp-done { color: #1e7a4f; font-weight: 700; } @keyframes sp-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(var(--primary-rgb), .5); } 55% { box-shadow: 0 0 0 7px rgba(var(--primary-rgb), 0); } } @media (prefers-reduced-motion: reduce) { .sp-now { animation: none; } } /* progress bars */ .sp-barrow { margin-bottom: .8rem; } .sp-barrow:last-child { margin-bottom: 0; } .sp-barrow-head { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; margin-bottom: .25rem; } .sp-barrow-lbl { font-size: .82rem; font-weight: 600; color: #2d3436; min-width: 0; } .sp-barrow-val { font-size: .8rem; font-weight: 700; color: var(--primary-dark); white-space: nowrap; } .sp-barrow-val small { font-weight: 400; color: var(--muted); } .sp-tone--ok { color: #1e7a4f; } .sp-tone--warn { color: #a05a1c; } .sp-tone--bad { color: #b03030; } .sp-bar { height: 8px; border-radius: 999px; background: #edf1f5; overflow: hidden; } .sp-bar i { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--primary), var(--primary-light)); transition: width .9s cubic-bezier(.25,.7,.3,1); } .sp-bar--warn i { background: linear-gradient(90deg, #e2711d, #f6b93b); } .sp-bar--bad i { background: linear-gradient(90deg, #c0392b, #e57373); } /* attendance ring */ .sp-ringwrap { display: flex; align-items: center; gap: 1.1rem; } .sp-ring { --p: 0; width: 110px; height: 110px; border-radius: 50%; flex: 0 0 auto; position: relative; background: conic-gradient(var(--primary) calc(var(--p) * 1%), #edf1f5 0); } .sp-ring--bad { background: conic-gradient(#c0392b calc(var(--p) * 1%), #edf1f5 0); } .sp-ring::before { content: ''; position: absolute; top: 11px; right: 11px; bottom: 11px; left: 11px; border-radius: 50%; background: #fff; } .sp-ring-val { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; font-weight: 800; color: var(--primary-dark); } .sp-ring--bad .sp-ring-val { color: #b03030; } .sp-ring-side { min-width: 0; } .sp-ring-title { font-weight: 700; font-size: .95rem; } .sp-ring-sub { font-size: .78rem; color: var(--muted); } .sp-ring-note { font-size: .78rem; color: #b03030; font-weight: 600; margin-top: .25rem; } @media (max-width: 576px) { .sp-hero-title { font-size: 1.25rem; } .sp-class-time { min-width: 62px; } } /* ── sp: attendance calendar / summary segments (skv-style pages, 2026-07-14) ── */ .sp-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: .35rem; } .sp-cal-h { text-align: center; font-size: .68rem; font-weight: 700; color: var(--muted); letter-spacing: .05em; padding-bottom: .2rem; } .sp-cal-d { width: 100%; max-width: 42px; margin: 0 auto; aspect-ratio: 1; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: .82rem; font-weight: 600; color: #5b6773; } .sp-cal-d--present { background: #d9f4e5; color: #1e7a4f; font-weight: 800; } .sp-cal-d--absent { background: #fde3e3; color: #b03030; font-weight: 800; } .sp-cal-d--partial { background: #ffefd6; color: #a05a1c; font-weight: 800; } .sp-cal-d--sun { background: #eef1f4; color: #55606b; } .sp-cal-d--today { box-shadow: 0 0 0 2px var(--primary); } .sp-cal-d--holiday { background: #f0edff; color: #6a3fa0; font-weight: 800; } .sp-cal-d--exam { background: #fde3e3; color: #b03030; font-weight: 800; } .sp-cal-d--event { background: #e3eefc; color: #2c5f9e; font-weight: 800; } .sp-cal-nav { display: inline-flex; gap: .35rem; } .sp-cal-btn { width: 28px; height: 28px; border-radius: 8px; border: 1px solid #e0e6ec; background: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; line-height: 1; color: #5b6773; text-decoration: none; } .sp-cal-btn:hover { text-decoration: none; color: var(--primary-dark); border-color: rgba(var(--primary-rgb), .45); } .sp-cal-daybox { min-width: 40px; height: 40px; border-radius: 10px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: .85rem; } .sp-cal-daybox--present { background: #d9f4e5; color: #1e7a4f; } .sp-cal-daybox--absent { background: #fde3e3; color: #b03030; } .sp-cal-daybox--partial { background: #ffefd6; color: #a05a1c; } .sp-cal-daybox--holiday { background: #f0edff; color: #6a3fa0; } .sp-cal-daybox--exam { background: #fde3e3; color: #b03030; } .sp-trio { display: flex; gap: 1rem; margin-top: .4rem; } .sp-trio-item { display: flex; flex-direction: column; align-items: flex-start; } .sp-trio-item b { font-size: 1.15rem; } .sp-trio-item small { font-size: .62rem; color: var(--muted); letter-spacing: .05em; } .sp-seg { display: inline-flex; background: #eef2f6; border-radius: 999px; padding: .18rem; gap: .15rem; flex-wrap: wrap; } .sp-seg-btn { padding: .3rem .85rem; border-radius: 999px; font-size: .78rem; font-weight: 600; color: #5b6773; text-decoration: none; white-space: nowrap; } .sp-seg-btn:hover { text-decoration: none; color: var(--primary-dark); } .sp-seg-btn.on { background: var(--primary); color: #fff; box-shadow: 0 2px 6px rgba(var(--primary-rgb), .35); } /* ── sp: timetable day-pill card view ── */ .sp-days { display: flex; gap: .45rem; flex-wrap: wrap; margin-bottom: 1rem; } .sp-day-btn { position: relative; padding: .42rem 1.05rem; border-radius: 999px; border: 1px solid #e0e6ec; background: #fff; font-size: .82rem; font-weight: 700; color: #5b6773; cursor: pointer; } .sp-day-btn:hover { border-color: rgba(var(--primary-rgb), .45); color: var(--primary-dark); } .sp-day-btn.on { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: 0 3px 8px rgba(var(--primary-rgb), .35); } .sp-day-btn .dot { position: absolute; top: 6px; right: 8px; width: 6px; height: 6px; border-radius: 50%; background: #f0932b; } .sp-tt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .7rem; } .sp-tt-cell { border: 1px solid #e7ecf1; border-radius: 12px; padding: .7rem .85rem; background: #fbfcfe; min-height: 86px; display: flex; flex-direction: column; gap: .15rem; } .sp-tt-per { font-size: .66rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; } .sp-tt-sub { font-size: .88rem; font-weight: 700; color: #2d3436; } .sp-tt-meta { font-size: .74rem; color: var(--muted); } .sp-tt-cell--break { background: #fff8e6; border-color: #f3e3b3; align-items: center; justify-content: center; text-align: center; } .sp-tt-cell--break .sp-tt-sub { color: #a05a1c; font-size: .8rem; } .sp-tt-cell--break .sp-tt-meta { color: #a05a1c; } .sp-tt-cell--now { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(var(--primary-rgb), .25); background: linear-gradient(135deg, rgba(var(--primary-rgb), .08), #fff); } /* ── sp: syllabus subject list avatars ── */ .sp-subj-ava { width: 42px; height: 42px; border-radius: 12px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1rem; color: #fff; } .sp-ava--1 { background: #7c5cd6; } .sp-ava--2 { background: #4a7de0; } .sp-ava--3 { background: #e05c8a; } .sp-ava--4 { background: #e8842c; } .sp-ava--5 { background: #26a06a; } .sp-ava--6 { background: #e04f4f; } .sp-ava--7 { background: #14919b; } .sp-ava--8 { background: #9059c8; } /* ── sp: digital ID card ── */ .sp-id { max-width: 340px; margin: 0 auto; border: 1px solid #e0e6ec; border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 10px 26px rgba(30,40,60,.12); } .sp-id-head { background: linear-gradient(120deg, var(--primary-dark), var(--primary)); color: #fff; padding: .8rem 1rem; display: flex; align-items: center; gap: .7rem; } .sp-id-head img.logo { width: 40px; height: 40px; border-radius: 9px; background: #fff; object-fit: contain; padding: 3px; } .sp-id-college { font-weight: 800; font-size: .92rem; line-height: 1.2; text-transform: uppercase; } .sp-id-tag { font-size: .62rem; letter-spacing: .12em; opacity: .85; text-transform: uppercase; } .sp-id-body { padding: 1rem; } .sp-id-top { display: flex; gap: .9rem; align-items: flex-start; } .sp-id-photo { width: 84px; height: 100px; border-radius: 10px; object-fit: cover; border: 1px solid #e0e6ec; background: #f4f6f9; } .sp-id-photo--empty { display: flex; align-items: center; justify-content: center; font-size: 1.8rem; color: #b9c3cc; } .sp-id-name { font-weight: 800; font-size: 1.02rem; color: #2d3436; } .sp-id-sess { display: inline-block; background: #e3eefc; color: #2c5f9e; font-size: .68rem; font-weight: 700; border-radius: 999px; padding: .15rem .6rem; margin-top: .2rem; } .sp-id-rows { margin-top: .8rem; } .sp-id-row { display: flex; font-size: .8rem; padding: .22rem 0; border-bottom: 1px dashed #edf1f5; } .sp-id-row:last-child { border-bottom: 0; } .sp-id-row .k { width: 42%; color: var(--muted); } .sp-id-row .v { flex: 1; font-weight: 700; color: #2d3436; } .sp-id-row .v a { color: inherit; font-weight: inherit; text-decoration: none; } .sp-id-row .v a:hover { color: var(--primary-dark); text-decoration: underline; } .sp-id-qr { display: flex; justify-content: center; padding: .8rem 0 .2rem; } .sp-id-qr img, .sp-id-qr canvas { border: 6px solid #fff; } @media print { body.sp-print-id * { visibility: hidden !important; } body.sp-print-id .sp-id, body.sp-print-id .sp-id * { visibility: visible !important; } body.sp-print-id .sp-id { position: absolute; left: 50%; top: 20px; transform: translateX(-50%); box-shadow: none; } } /* ── sp: info pages hero ── */ .sp-info-hero { border-radius: 14px; padding: 1.6rem 1.5rem; color: #fff; margin-bottom: 1rem; position: relative; overflow: hidden; background: linear-gradient(120deg, var(--primary-dark), var(--primary) 60%, var(--primary-light)); text-align: center; } .sp-info-hero::after { content: ''; position: absolute; right: -60px; top: -80px; width: 220px; height: 220px; border-radius: 50%; background: rgba(255,255,255,.12); pointer-events: none; } .sp-info-hero h2 { font-weight: 800; color: #fff; margin: .4rem 0 .2rem; } .sp-info-hero p { margin: 0; opacity: .9; font-size: .9rem; } .sp-why { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .7rem; } .sp-why-card { border: 1px solid #e7ecf1; border-radius: 12px; padding: .9rem; background: #fff; } .sp-why-ico { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.15rem; margin-bottom: .5rem; color: #fff; } .sp-why-t { font-weight: 700; font-size: .88rem; } .sp-why-s { font-size: .76rem; color: var(--muted); } /* ── sp: documents grid ── */ .sp-docs { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .8rem; } .sp-doc { border: 1px solid #e7ecf1; border-radius: 12px; background: #fff; padding: .8rem; text-align: center; } .sp-doc-t { font-weight: 700; font-size: .8rem; margin-bottom: .5rem; } .sp-doc-thumb { width: 100%; height: 130px; object-fit: contain; background: #f4f6f9; border-radius: 8px; } .sp-doc-file { height: 130px; display: flex; align-items: center; justify-content: center; font-size: 2rem; background: #f4f6f9; border-radius: 8px; color: var(--muted); } .sp-doc-meta { font-size: .68rem; color: var(--muted); margin: .4rem 0; } .sp-doc-actions { display: flex; gap: .4rem; justify-content: center; } /* ── af: admission-form detail (portal/application + applicant apply/view) ── */ .af-card { border: 1px solid #e7ecf1; border-radius: 14px; background: #fff; margin-bottom: 1.1rem; box-shadow: 0 1px 2px rgba(20,30,40,.03); overflow: hidden; } .af-card-h { display: flex; align-items: center; gap: .7rem; padding: .95rem 1.25rem; border-bottom: 1px solid #eef2f6; background: linear-gradient(180deg, #fbfcfe, #ffffff); } .af-card-b { padding: 1.1rem 1.25rem 1.25rem; } .af-ic { width: 36px; height: 36px; border-radius: 10px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; font-size: 1.05rem; color: #fff; } .af-ic--blue { background: linear-gradient(135deg,#3b82f6,#2563eb); } .af-ic--green { background: linear-gradient(135deg,#22c55e,#16a34a); } .af-ic--amber { background: linear-gradient(135deg,#f59e0b,#d97706); } .af-ic--purple { background: linear-gradient(135deg,#a855f7,#7e22ce); } .af-ic--teal { background: linear-gradient(135deg,#14b8a6,#0f766e); } .af-ic--rose { background: linear-gradient(135deg,#fb7185,#e11d48); } .af-ic--indigo { background: linear-gradient(135deg,#6366f1,#4338ca); } .af-ic--slate { background: linear-gradient(135deg,#64748b,#475569); } .af-card-title { font-weight: 700; font-size: .95rem; color: #1f2937; margin: 0; } .af-card-sub { font-size: .74rem; color: var(--muted); margin: 0; } .af-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1rem 1.5rem; } .af-field { min-width: 0; } .af-field--wide { grid-column: 1 / -1; } .af-label { font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin-bottom: .2rem; } .af-value { font-size: .92rem; font-weight: 600; color: #1f2937; word-break: break-word; } .af-value .badge { font-weight: 700; } .af-table thead th { font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); background: #f8fafc; border-bottom-width: 1px; } .af-table td { font-size: .86rem; vertical-align: middle; } .af-docs .sp-doc { border-radius: 12px; } .af-noapp { text-align: center; padding: 2.4rem 1.5rem; } .af-noapp .af-ic { width: 60px; height: 60px; border-radius: 16px; font-size: 1.7rem; margin: 0 auto 1rem; } .af-noapp h3 { font-weight: 700; font-size: 1.05rem; margin-bottom: .35rem; } .af-noapp p { color: var(--muted); font-size: .86rem; max-width: 420px; margin: 0 auto; } @media print { .af-card { border: 1px solid #ccc; box-shadow: none; break-inside: avoid; } .af-card-h { background: #fff; } } /* ── sp: portal sidebar section labels ── */ .erp-side-sect { padding: .8rem 1rem .25rem; font-size: .62rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.45); } body.side-compact .erp-side-sect { display: none; } /* Pending-count badge on a sidebar nav item (portal Activities) + a compact-rail dot shown when the label is hidden. */ .erp-nav-badge { display: inline-block; min-width: 18px; padding: 0 5px; height: 18px; line-height: 18px; font-size: .66rem; font-weight: 700; text-align: center; color: #fff; background: #e11d48; border-radius: 9px; vertical-align: middle; } html[data-role-theme="student"] .erp-side-ico { position: relative; } .erp-side-dot { position: absolute; top: -2px; right: -3px; width: 9px; height: 9px; background: #e11d48; border-radius: 50%; box-shadow: 0 0 0 2px rgba(0,0,0,.25); display: none; } body.side-compact .erp-side-dot { display: block; } /* ---------- Portal Activities page (filter pills + done checklist) ---------- */ .act-pills { display: flex; flex-wrap: wrap; gap: .4rem; } .act-pill { border: 1px solid var(--border, #e2e8f0); background: #fff; color: var(--ink, #1e293b); border-radius: 999px; padding: .3rem .85rem; font-size: .82rem; font-weight: 600; cursor: pointer; transition: background .15s, border-color .15s, color .15s; } .act-pill:hover { border-color: var(--primary); } .act-pill.active { background: var(--primary); border-color: var(--primary); color: #fff; } .act-pill--warn.active { background: #f59e0b; border-color: #f59e0b; } .act-pill--ok.active { background: #16a34a; border-color: #16a34a; } .act-pill-n { display: inline-block; min-width: 18px; padding: 0 5px; font-size: .68rem; font-weight: 700; line-height: 16px; border-radius: 9px; background: rgba(0,0,0,.08); margin-left: .2rem; } .act-pill.active .act-pill-n { background: rgba(255,255,255,.28); } .act-item { border-left: 4px solid var(--border, #e2e8f0); transition: opacity .15s, background .15s; } .act-accent-primary { border-left-color: #2563eb; } .act-accent-info { border-left-color: #0ea5e9; } .act-accent-danger { border-left-color: #dc3545; } .act-accent-success { border-left-color: #16a34a; } .act-accent-warning { border-left-color: #f59e0b; } .act-accent-secondary { border-left-color: #64748b; } .act-accent-dark { border-left-color: #334155; } .act-item.is-done { opacity: .72; background: rgba(22,163,74,.05); border-left-color: #16a34a !important; } .act-instr { background: rgba(var(--primary-rgb, 37,99,235), .05); border-radius: .4rem; } /* Full-width search matching the card look (12px radius, #e7ecf1 border). */ .act-search { margin: .85rem 0 .35rem; } .act-search input { width: 100%; padding: .62rem .95rem .62rem 2.55rem; font-size: .9rem; color: var(--ink, #1e293b); border: 1px solid #e7ecf1; border-radius: 12px; transition: border-color .15s, box-shadow .15s; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat 0.95rem center; background-size: 16px 16px; } .act-search input::placeholder { color: var(--muted, #94a3b8); } .act-search input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 37,99,235), .12); } /* Unread notice cards get an amber accent + faint tint. */ .notice-card { border-left: 4px solid transparent; transition: background .15s; } .notice-card.is-unread { border-left-color: #f59e0b; background: rgba(245,158,11,.05); } /* ---------- Notification bell (staff + student portal topbar) ---------- Markup lives in the staff (includes/header.php) and student-portal — the staff and applicant topbars don't render it, so these shared rules can't leak. The bell sits BEFORE .erp-user in the DOM: its margin-left:auto pulls the whole right cluster over (the avatar's own auto margin then computes to 0), and on mobile the hamburger's order:3 keeps it rightmost after both. */ .erp-bell { margin-left: auto; position: relative; white-space: nowrap; } .erp-bell ~ .erp-user { margin-left: 0; } /* Staff topbar: the Spotlight search button already pulls the right cluster over (its own margin-left:auto), so the bell must NOT add a second auto margin (two would split the free space and gap the bell off from search). Portal/applicant topbars have no search button, so they keep the rule above. */ .erp-navbar .erp-search-btn ~ .erp-bell { margin-left: 0.5rem; } .erp-bell-btn { position: relative; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.16); color: #fff; font-size: 1.02rem; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 0.15s, box-shadow 0.15s; } .erp-bell-btn:hover { background: rgba(255, 255, 255, 0.30); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.15); } .erp-bell-badge { position: absolute; top: -4px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #e74c3c; color: #fff; font-size: 0.66rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; } .erp-bell-menu { display: none; position: absolute; right: 0; top: calc(100% + 8px); width: 330px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-lg); border-radius: var(--radius-md); padding: 0.35rem 0; z-index: 1050; } .erp-bell.open .erp-bell-menu { display: block; } .erp-bell-head { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 1rem 0.4rem; font-weight: 700; color: var(--ink); font-size: 0.9rem; } .erp-bell-list { max-height: 330px; overflow-y: auto; } .erp-bell-item { display: block; padding: 0.5rem 1rem; text-decoration: none; border-left: 3px solid transparent; white-space: normal; } .erp-bell-item:hover { background: rgba(var(--primary-light-rgb), 0.1); text-decoration: none; } .erp-bell-item.is-unread { border-left-color: var(--primary); background: rgba(var(--primary-light-rgb), 0.06); } .erp-bell-item-title { display: block; font-weight: 600; font-size: 0.85rem; color: var(--ink); } .erp-bell-item-body { display: block; font-size: 0.76rem; color: var(--muted); margin-top: 1px; } .erp-bell-item-time { display: block; font-size: 0.7rem; color: var(--muted); margin-top: 2px; } .erp-bell-empty { padding: 0.9rem 1rem; font-size: 0.85rem; color: var(--muted); } .erp-bell-all { display: block; box-sizing: border-box; width: 100%; text-align: center; padding: 0.45rem 1rem; font-size: 0.85rem; font-weight: 600; line-height: 1.3; color: var(--primary-dark); text-decoration: none; white-space: normal; word-break: break-word; } .erp-bell-all:hover { background: rgba(var(--primary-light-rgb), 0.1); text-decoration: none; } /* the "Enable push" variant is a