/* ============================================================================
iRPS — Modern theme overlay
----------------------------------------------------------------------------
Loaded AFTER style.css. Presentation only: no markup, class names, ids or
scripts change, so every form, modal, menu trigger and pcoded layout hook
keeps working exactly as before.
Everything visual lives inside @media screen so that report cards, result
sheets and finance printing continue to be driven solely by
finance-print.css. Remove the two tags to revert.
========================================================================== */
:root {
/* Brand */
--irps-primary: #4f46e5;
--irps-primary-600: #4338ca;
--irps-primary-700: #3730a3;
--irps-primary-soft: #eef2ff;
--irps-primary-ring: rgba(79, 70, 229, .18);
/* Sidebar */
--irps-nav-from: #1e1b4b;
--irps-nav-to: #312e81;
--irps-nav-text: rgba(255, 255, 255, .74);
--irps-nav-text-active: #ffffff;
--irps-nav-hover: rgba(255, 255, 255, .08);
--irps-nav-active: rgba(255, 255, 255, .14);
/* Surfaces */
--irps-bg: #f5f6fa;
--irps-surface: #ffffff;
--irps-surface-alt: #f9fafb;
--irps-border: #e4e7ec;
--irps-border-soft: #f2f4f7;
/* Text */
--irps-text: #101828;
--irps-text-muted: #667085;
--irps-text-faint: #98a2b3;
/* Status */
--irps-success: #12b76a;
--irps-warning: #f79009;
--irps-danger: #f04438;
--irps-info: #0ba5ec;
/* Shape */
--irps-radius-sm: 8px;
--irps-radius: 12px;
--irps-radius-lg: 16px;
--irps-shadow-xs: 0 1px 2px rgba(16, 24, 40, .05);
--irps-shadow-sm: 0 2px 12px rgba(16, 24, 40, .06);
--irps-shadow-md: 0 8px 24px rgba(16, 24, 40, .08);
--irps-shadow-lg: 0 20px 48px rgba(16, 24, 40, .14);
--irps-font: "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
}
@media screen {
/* ======================================================================
1. Base & typography
====================================================================== */
body {
font-family: var(--irps-font);
font-size: 14px;
line-height: 1.55;
color: var(--irps-text);
letter-spacing: -0.005em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--irps-font);
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
color: var(--irps-text);
font-weight: 600;
letter-spacing: -0.02em;
}
/* .h1-.h6 are used as pure sizing utilities on non-heading elements in this
app — including on icon tags, e.g. .
Setting font-family on those classes replaces the icon font and renders
tofu boxes, so it is applied to real heading elements only (above), and
icon fonts are pinned defensively below. */
.fa, .fas, .far, .fal, .fab,
[class^="fa-"], [class*=" fa-"] { font-family: 'FontAwesome' !important; }
[class^="ti-"], [class*=" ti-"] { font-family: 'themify' !important; }
.icofont, [class^="icofont-"], [class*=" icofont-"] { font-family: 'IcoFont' !important; }
.fa, .fas, .far, .fal, .fab, .icofont,
[class^="fa-"], [class*=" fa-"],
[class^="ti-"], [class*=" ti-"],
[class^="icofont-"], [class*=" icofont-"] { letter-spacing: normal; }
h1, .h1 { font-size: 28px; }
h2, .h2 { font-size: 22px; }
h3, .h3 { font-size: 19px; }
h4, .h4 { font-size: 17px; }
h5, .h5 { font-size: 15px; }
h6, .h6 { font-size: 13px; }
a { color: var(--irps-primary); transition: color .15s ease; }
a:hover, a:focus { color: var(--irps-primary-600); text-decoration: none; }
.text-muted { color: var(--irps-text-muted) !important; }
::selection { background: var(--irps-primary-ring); }
/* App background */
.pcoded-main-container { background: var(--irps-bg); }
.pcoded-inner-content { padding: 0 20px 24px; }
/* Slimmer, quieter scrollbars (WebKit/Chromium/Edge) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
background: #d0d5dd;
border: 3px solid transparent;
background-clip: content-box;
border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover { background: #b8bfcc; background-clip: content-box; }
/* ======================================================================
2. Sidebar
====================================================================== */
/* vertical-layout.min.js:13 sets NavbarBackground:'themelight1', overriding
pcoded.min.js's 'theme1'. Rather than chase whichever skin wins, the
palette below is forced for ANY navbar-theme value. !important is
deliberate here: we are intentionally replacing a themed skin whose own
rules are more specific, and the theme value is decided at runtime. */
.pcoded .pcoded-navbar {
box-shadow: none;
border-right: none;
background-color: var(--irps-nav-from) !important;
background-image: linear-gradient(180deg, var(--irps-nav-from) 0%, var(--irps-nav-to) 100%) !important;
}
.pcoded .pcoded-navbar[navbar-theme] .main-menu,
.pcoded .pcoded-navbar .main-menu,
.pcoded .pcoded-navbar .pcoded-inner-navbar {
background-color: transparent !important;
background-image: none !important;
}
/* School logo block at the top of the sidebar */
.main-menu .main-menu-header,
.pcoded .pcoded-navbar[navbar-theme] .main-menu .main-menu-header {
background-image: none !important;
background-color: transparent !important;
padding: 22px 0 18px;
border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.main-menu .main-menu-header img {
width: 84px;
height: 84px;
object-fit: cover;
border-radius: 50%;
padding: 4px;
background: rgba(255, 255, 255, .1);
box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 6px 18px rgba(0, 0, 0, .25);
}
/* Section divider between menu groups */
.pcoded .pcoded-navbar .pcoded-item { padding-bottom: 8px; }
.pcoded .pcoded-navbar .pcoded-item:after { display: none; }
/* Top-level items */
.pcoded[theme-layout="vertical"] .pcoded-navbar .pcoded-item > li > a {
margin: 2px 12px;
padding: 9px 12px;
border-radius: 10px;
font-size: 13.5px;
font-weight: 500;
border-bottom: none !important;
transition: background-color .18s ease, color .18s ease;
}
.pcoded .pcoded-navbar[navbar-theme] .pcoded-item > li > a { color: var(--irps-nav-text) !important; }
.pcoded .pcoded-navbar[navbar-theme] .pcoded-item > li:hover > a,
.pcoded .pcoded-navbar[navbar-theme] .pcoded-item > li.active:hover > a {
color: var(--irps-nav-text-active) !important;
background-color: var(--irps-nav-hover) !important;
}
.pcoded .pcoded-navbar[navbar-theme] .pcoded-item > li.active > a,
.pcoded .pcoded-navbar[navbar-theme] .pcoded-item > li.pcoded-trigger > a {
color: var(--irps-nav-text-active) !important;
background-color: var(--irps-nav-active) !important;
font-weight: 600;
border-bottom-color: transparent;
}
/* Icon chips */
.pcoded .pcoded-navbar .pcoded-item > li > a > .pcoded-micon {
width: 28px;
height: 28px;
line-height: 28px;
padding: 0;
margin-right: 10px;
font-size: 14px;
border-radius: 8px;
background: rgba(255, 255, 255, .10) !important;
color: rgba(255, 255, 255, .88) !important;
box-shadow: none !important;
transition: background-color .18s ease, color .18s ease;
}
.pcoded .pcoded-navbar .pcoded-item > li > a > .pcoded-micon i,
.pcoded .pcoded-navbar .pcoded-item > li > a > .pcoded-micon b {
color: inherit !important;
}
.pcoded .pcoded-navbar .pcoded-item > li:hover > a > .pcoded-micon,
.pcoded .pcoded-navbar .pcoded-item > li.active > a > .pcoded-micon,
.pcoded .pcoded-navbar .pcoded-item > li.pcoded-trigger > a > .pcoded-micon {
background: rgba(255, 255, 255, .20) !important;
color: #fff !important;
}
/* Expand/collapse chevrons — the light skin colours these dark */
.pcoded .pcoded-navbar[navbar-theme] .pcoded-item > li.pcoded-hasmenu > a:after,
.pcoded .pcoded-navbar[navbar-theme] .pcoded-item > li.pcoded-hasmenu .pcoded-submenu li.pcoded-hasmenu > a:after,
.pcoded .pcoded-navbar[navbar-theme] .pcoded-item > li.pcoded-hasmenu.pcoded-trigger > a:after,
.pcoded .pcoded-navbar[navbar-theme] .pcoded-item > li.pcoded-hasmenu.pcoded-trigger .pcoded-submenu li.pcoded-hasmenu.pcoded-trigger > a:after {
color: rgba(255, 255, 255, .55) !important;
}
/* Submenus */
.pcoded .pcoded-navbar[navbar-theme] .pcoded-item li.pcoded-hasmenu .pcoded-submenu {
background: rgba(0, 0, 0, .20) !important;
margin: 2px 12px 6px;
border-radius: 10px;
padding: 4px 0;
}
.pcoded[theme-layout="vertical"] .pcoded-navbar .pcoded-item .pcoded-hasmenu .pcoded-submenu li > a {
padding: 7px 12px 7px 14px;
margin: 1px 6px;
border-radius: 8px;
font-size: 13px;
border-bottom: none !important;
}
.pcoded .pcoded-navbar[navbar-theme] .pcoded-item li .pcoded-submenu li > a,
.pcoded .pcoded-navbar[navbar-theme] .pcoded-item li.pcoded-hasmenu .pcoded-submenu li > a {
color: rgba(255, 255, 255, .68) !important;
border-bottom-color: transparent;
}
.pcoded .pcoded-navbar[navbar-theme] .pcoded-item .pcoded-hasmenu .pcoded-submenu li:hover > a {
background-color: rgba(255, 255, 255, .10) !important;
color: #fff !important;
}
.pcoded .pcoded-navbar[navbar-theme] .pcoded-item li .pcoded-submenu li.active > a,
.pcoded .pcoded-navbar[navbar-theme] .pcoded-item .pcoded-hasmenu .pcoded-submenu li.active > a {
background-color: var(--irps-primary) !important;
color: #fff !important;
font-weight: 600;
box-shadow: 0 4px 12px rgba(79, 70, 229, .4);
}
.pcoded .pcoded-navbar .pcoded-item .pcoded-hasmenu .pcoded-submenu li > a .pcoded-micon {
font-size: 9px;
opacity: .5;
}
/* "Powered by" footer inside the sidebar */
.pcoded-inner-navbar > .mt-3 > p:last-child {
color: rgba(255, 255, 255, .35);
font-size: 11px;
letter-spacing: .02em;
}
#global-session-indicator {
color: rgba(255, 255, 255, .7) !important;
font-size: 11.5px;
letter-spacing: .01em;
margin: 0 12px 10px;
padding: 7px 10px;
background: rgba(255, 255, 255, .07);
border: 1px solid rgba(255, 255, 255, .09);
border-radius: 8px;
}
/* ======================================================================
3. Top bar
====================================================================== */
/* pcoded pins the sidebar at top:56px and sizes it calc(100% - 56px), so
the header must stay exactly 56px tall or the layout math drifts. */
.navbar.header-navbar.pcoded-header {
min-height: 56px;
height: 56px;
-webkit-backdrop-filter: saturate(180%) blur(12px);
backdrop-filter: saturate(180%) blur(12px);
border-bottom: 1px solid var(--irps-border);
box-shadow: 0 1px 3px rgba(16, 24, 40, .04);
/* Brand accent strip along the top edge. Painted as a background
layer rather than a border-top, because a border would add to the
element's height and push the header past the 56px the sidebar
positioning depends on. */
background-color: rgba(255, 255, 255, .92);
background-image: linear-gradient(90deg,
var(--irps-primary) 0%,
#6366f1 45%,
#8b5cf6 100%);
background-repeat: no-repeat;
background-size: 100% 3px;
background-position: left top;
}
/* Desktop only. Below 993px pcoded re-lays the header out completely:
.navbar-logo goes full width with .mobile-menu / .mobile-options
absolutely positioned at each edge, and .nav-right is hidden until the
"more" toggle expands it as a dropdown. Forcing a 56px height and
flex row onto those elements clipped the toggles and would have
flattened the expanded menu, so these stay scoped to the wide layout. */
@media only screen and (min-width: 993px) {
.header-navbar .navbar-container,
.header-navbar .navbar-wrapper { height: 56px; }
.header-navbar .nav-right {
display: flex;
align-items: center;
height: 56px;
margin-bottom: 0;
}
}
.header-navbar .navbar-wrapper .navbar-logo {
background: transparent;
border-bottom: none;
}
.header-navbar .navbar-logo a,
.header-navbar .navbar-logo .mobile-menu,
.header-navbar .navbar-logo .mobile-options {
color: var(--irps-text-muted);
border-radius: var(--irps-radius-sm);
transition: background-color .15s ease, color .15s ease;
}
.header-navbar .navbar-logo a:hover,
.header-navbar .navbar-logo .mobile-menu:hover,
.header-navbar .navbar-logo .mobile-options:hover {
background: var(--irps-surface-alt);
color: var(--irps-primary);
}
.school-name { top: 0; height: 56px; display: flex; align-items: center; justify-content: center; }
.school-name h5 {
color: var(--irps-text);
font-size: 15px;
font-weight: 650;
letter-spacing: -0.015em;
margin: 0;
}
/* User chip */
.header-navbar .nav-right > .user-profile > a {
display: flex;
align-items: center;
gap: 8px;
color: var(--irps-text);
font-size: 13.5px;
font-weight: 550;
padding: 4px 12px 4px 4px;
margin: 0 6px;
line-height: 1;
border-radius: 999px;
border: 1px solid var(--irps-border);
background: var(--irps-surface);
transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.header-navbar .nav-right > .user-profile > a:hover {
background: var(--irps-surface-alt);
border-color: #d0d5dd;
box-shadow: var(--irps-shadow-xs);
}
.header-navbar .nav-right .user-profile img.img-radius {
width: 30px;
height: 30px;
border-radius: 50%;
object-fit: cover;
flex: 0 0 auto;
/* Tinted circle so the slot still reads as an avatar while the image
loads, or if it resolves to something transparent. */
background: var(--irps-primary-soft);
box-shadow: 0 0 0 2px var(--irps-primary-soft);
}
.header-navbar .nav-right .user-profile .ti-angle-down {
font-size: 10px;
color: var(--irps-text-faint);
}
/* Profile dropdown */
.header-navbar .nav-right .profile-notification,
.header-navbar .nav-right .show-notification {
border: 1px solid var(--irps-border);
border-radius: var(--irps-radius);
box-shadow: var(--irps-shadow-md);
overflow: hidden;
padding: 6px !important;
background: var(--irps-surface);
}
.header-navbar .nav-right .profile-notification li > a {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 12px;
border-radius: var(--irps-radius-sm);
color: var(--irps-text);
font-size: 13.5px;
font-weight: 500;
}
.header-navbar .nav-right .profile-notification li > a:hover {
background: var(--irps-primary-soft);
color: var(--irps-primary-700);
}
.header-navbar .nav-right .profile-notification li > a > i { color: var(--irps-text-faint); }
.header-navbar .nav-right .profile-notification li > a:hover > i { color: var(--irps-primary); }
/* ======================================================================
4. Page header
====================================================================== */
.page-header {
background-image: none;
background: transparent;
color: var(--irps-text);
box-shadow: none;
}
.page-header:before { display: none; }
.page-header { margin-bottom: 0; }
.page-header .page-block { padding: 14px 20px 6px; }
.page-header .page-block .row { margin-bottom: 0; }
.page-header .page-header-title { margin-bottom: 0; }
.page-header .page-header-title h2 {
color: var(--irps-text);
font-size: 21px;
font-weight: 650;
line-height: 1.25;
letter-spacing: -0.025em;
margin: 0;
}
#active-session {
display: inline-block;
text-align: left !important;
margin: 0 0 4px;
padding: 3px 10px;
font-size: 11.5px;
font-weight: 600;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--irps-primary-700);
background: var(--irps-primary-soft);
border-radius: 999px;
}
#active-session:empty { display: none; }
.page-header .page-block .breadcrumb-title a,
.page-header .page-block .breadcrumb-title .breadcrumb-item + .breadcrumb-item::before {
color: var(--irps-text-muted);
}
/* ======================================================================
5. Cards
====================================================================== */
.card {
background: var(--irps-surface);
border: 1px solid var(--irps-border);
border-radius: var(--irps-radius-lg);
box-shadow: var(--irps-shadow-sm);
margin-bottom: 22px;
/* No overflow:hidden here — dropdowns and popovers are opened from
inside card bodies and would be clipped. Corners are rounded on the
header/footer directly instead. */
}
.card:hover { box-shadow: var(--irps-shadow-md); }
.card .card-header {
background-color: transparent;
border-bottom: 1px solid var(--irps-border-soft);
box-shadow: none;
padding: 16px 20px;
border-radius: var(--irps-radius-lg) var(--irps-radius-lg) 0 0;
}
.card .card-header h5,
.card .card-header h4,
.card .card-header h6 {
margin-bottom: 0;
font-size: 15px;
font-weight: 620;
letter-spacing: -0.01em;
}
.card .card-header.pb-0 { padding-bottom: 16px; }
.card .card-block { padding: 20px; }
/* Corner rounding + shadow reset apply to every footer, including the
coloured dashboard stat footers. */
.card .card-footer {
box-shadow: none;
border-top: none;
border-radius: 0 0 var(--irps-radius-lg) var(--irps-radius-lg);
}
/* The neutral grey treatment is only for plain footers. Dashboard stat
cards use .bg-c-* footers with white text — never repaint those. */
.card .card-footer:not([class*="bg-c-"]) {
background: var(--irps-surface-alt);
border-top: 1px solid var(--irps-border-soft);
padding: 14px 20px;
}
.card .card-footer:not([class*="bg-c-"]).pt-0 { padding-top: 14px; }
.card .card-footer[class*="bg-c-"] .text-white,
.card .card-footer[class*="bg-c-"] p { color: #fff !important; }
.card .card-header .card-header-right { top: 10px; right: 14px; }
.sub-title, .card .card-block .sub-title {
color: var(--irps-text-muted);
font-size: 12px;
font-weight: 600;
letter-spacing: .04em;
text-transform: uppercase;
border-bottom: none;
}
/* ======================================================================
6. Buttons
====================================================================== */
.btn {
font-family: var(--irps-font);
font-size: 13.5px;
font-weight: 550;
letter-spacing: -0.005em;
padding: 9px 16px;
border-radius: 10px;
border-width: 1px;
box-shadow: var(--irps-shadow-xs);
transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .06s ease;
}
.btn:hover { box-shadow: var(--irps-shadow-sm); }
.btn:active { transform: translateY(1px); }
.btn:focus, .btn.focus, .btn:focus-visible {
outline: none;
box-shadow: 0 0 0 3px var(--irps-primary-ring);
}
.btn-sm { padding: 6px 12px; font-size: 12.5px; border-radius: 8px; }
.btn-lg { padding: 12px 22px; font-size: 15px; border-radius: 12px; }
.btn-round { border-radius: 999px; }
.btn-primary,
.sweet-alert button.confirm,
.wizard > .actions a {
background-color: var(--irps-primary);
border-color: var(--irps-primary);
color: #fff;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active {
background-color: var(--irps-primary-600);
border-color: var(--irps-primary-600);
color: #fff;
}
.btn-secondary {
background-color: var(--irps-surface);
border-color: var(--irps-border);
color: var(--irps-text);
}
.btn-secondary:hover, .btn-secondary:focus,
.btn-secondary:not(:disabled):not(.disabled):active {
background-color: var(--irps-surface-alt);
border-color: #d0d5dd;
color: var(--irps-text);
}
.btn-success { background-color: var(--irps-success); border-color: var(--irps-success); color: #fff; }
.btn-success:hover, .btn-success:focus,
.btn-success:not(:disabled):not(.disabled):active { background-color: #039855; border-color: #039855; color: #fff; }
.btn-danger { background-color: var(--irps-danger); border-color: var(--irps-danger); color: #fff; }
.btn-danger:hover, .btn-danger:focus,
.btn-danger:not(:disabled):not(.disabled):active { background-color: #d92d20; border-color: #d92d20; color: #fff; }
.btn-warning { background-color: var(--irps-warning); border-color: var(--irps-warning); color: #fff; }
.btn-warning:hover, .btn-warning:focus,
.btn-warning:not(:disabled):not(.disabled):active { background-color: #dc6803; border-color: #dc6803; color: #fff; }
.btn-info { background-color: var(--irps-info); border-color: var(--irps-info); color: #fff; }
.btn-info:hover, .btn-info:focus,
.btn-info:not(:disabled):not(.disabled):active { background-color: #0086c9; border-color: #0086c9; color: #fff; }
.btn-outline-primary { color: var(--irps-primary); border-color: var(--irps-primary); background: transparent; }
.btn-outline-primary:hover { background: var(--irps-primary); border-color: var(--irps-primary); color: #fff; }
.btn-link { box-shadow: none; color: var(--irps-primary); }
.btn-link:hover { box-shadow: none; color: var(--irps-primary-600); }
.btn.disabled, .btn:disabled { opacity: .55; box-shadow: none; }
.btn i, .btn .fa, .btn .ti, .btn .icofont { margin-right: 6px; }
.btn i:only-child, .btn .fa:only-child,
.btn .ti:only-child, .btn .icofont:only-child { margin-right: 0; }
.btn-group > .btn { box-shadow: none; }
/* ======================================================================
7. Forms
----------------------------------------------------------------------
Scoped away from .form-material so the login page's floating-label
inputs keep their original material behaviour.
====================================================================== */
.form-control {
height: auto;
min-height: 40px;
padding: 9px 12px;
font-family: var(--irps-font);
font-size: 13.5px;
color: var(--irps-text);
background-color: var(--irps-surface);
border: 1px solid #d0d5dd;
border-radius: 10px;
box-shadow: var(--irps-shadow-xs);
transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus {
border-color: var(--irps-primary);
box-shadow: 0 0 0 3px var(--irps-primary-ring);
outline: none;
}
.form-control::placeholder { color: var(--irps-text-faint); }
/* The login/Identity pages use pcoded's material inputs (floating label +
animated underline). Hand those back to style.css untouched. */
.form-material .form-control,
.form-material .form-control:focus {
min-height: 0;
height: auto;
padding: 10px 0;
background-color: transparent;
border: none;
border-radius: 0;
box-shadow: none;
}
.form-control:disabled,
.form-control[readonly] { background-color: var(--irps-surface-alt); color: var(--irps-text-muted); }
select.form-control:not([multiple]):not([size]) {
min-height: 40px;
padding-right: 32px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23667085' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
textarea.form-control { min-height: 88px; }
/* Colour pickers need a definite height: the native swatch resolves
height:100% against the input, which collapses to a thin line when the
input is only given min-height with height:auto. */
input[type="color"],
input[type="color"].form-control {
height: 40px;
min-height: 40px;
padding: 4px;
cursor: pointer;
overflow: hidden;
}
input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; height: 100%; }
input[type="color"]::-webkit-color-swatch { border: none; border-radius: 6px; }
input[type="color"]::-moz-color-swatch { border: none; border-radius: 6px; }
label {
font-size: 13px;
font-weight: 550;
color: var(--irps-text);
margin-bottom: 6px;
}
.form-group { margin-bottom: 18px; }
.form-control-file {
font-size: 13px;
padding: 8px 0;
color: var(--irps-text-muted);
}
.input-group-text {
background: var(--irps-surface-alt);
border: 1px solid #d0d5dd;
border-radius: 10px;
color: var(--irps-text-muted);
font-size: 13px;
}
.input-group > .form-control:not(:last-child),
.input-group > .input-group-prepend > .input-group-text { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group > .form-control:not(:first-child),
.input-group > .input-group-append > .input-group-text { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.custom-control-input:checked ~ .custom-control-label::before {
background-color: var(--irps-primary);
border-color: var(--irps-primary);
}
.text-danger, .field-validation-error { color: var(--irps-danger) !important; font-size: 12.5px; }
.validation-summary-errors ul { padding-left: 18px; margin-bottom: 0; }
/* ======================================================================
8. Tables
====================================================================== */
.table {
color: var(--irps-text);
font-size: 13.5px;
margin-bottom: 0;
}
.table thead th {
background: var(--irps-surface-alt);
color: var(--irps-text-muted);
font-size: 11.5px;
font-weight: 650;
letter-spacing: .045em;
text-transform: uppercase;
padding: 11px 14px;
border-top: none;
border-bottom: 1px solid var(--irps-border);
vertical-align: middle;
white-space: nowrap;
}
.table tbody td {
padding: 11px 14px;
border-top: 1px solid var(--irps-border-soft);
vertical-align: middle;
}
.table tbody tr { transition: background-color .12s ease; }
.table tbody tr:hover,
.table-hover tbody tr:hover { background-color: var(--irps-surface-alt); }
.table-striped tbody tr:nth-of-type(odd) { background-color: rgba(249, 250, 251, .7); }
.table-striped tbody tr:nth-of-type(odd):hover { background-color: var(--irps-surface-alt); }
.table-bordered,
.table-bordered td,
.table-bordered th { border-color: var(--irps-border-soft); }
.table-sm td, .table-sm th { padding: 7px 10px; }
/* Tables sitting flush inside a card get no double border */
.card > .table-responsive > .table,
.card > .table { border-radius: 0; }
.table-responsive { border-radius: var(--irps-radius); }
/* Dense inline editing (marks entry) stays compact */
.table td .form-control,
.table th .form-control {
min-height: 34px;
height: 34px;
padding: 4px 8px;
font-size: 13px;
border-radius: 8px;
}
.table td select.form-control:not([multiple]):not([size]),
.table th select.form-control:not([multiple]):not([size]) {
min-height: 34px;
padding-right: 26px;
background-position: right 8px center;
}
.table td .btn, .table th .btn { padding: 5px 10px; font-size: 12.5px; border-radius: 8px; }
/* ======================================================================
9. Modals
====================================================================== */
.modal-content {
border: none;
border-radius: var(--irps-radius-lg);
box-shadow: var(--irps-shadow-lg);
overflow: hidden;
}
.modal-header {
background: var(--irps-surface);
border-bottom: 1px solid var(--irps-border-soft);
padding: 18px 22px;
align-items: center;
}
.modal-header .modal-title { font-size: 16px; font-weight: 620; letter-spacing: -0.015em; }
.modal-header .close {
font-size: 22px;
font-weight: 400;
color: var(--irps-text-faint);
opacity: 1;
text-shadow: none;
line-height: 1;
padding: 6px 10px;
margin: -6px -10px -6px auto;
border-radius: var(--irps-radius-sm);
transition: background-color .15s ease, color .15s ease;
}
.modal-header .close:hover { background: var(--irps-surface-alt); color: var(--irps-text); }
.modal-body { padding: 22px; }
/* #modalbox is the app's shared popup (showInPopup / temPopup). Some
panels inject multi-column editing grids into it — the Template
Editor's Section 3 and 5 "Customize" tables render five visible
columns of text inputs — and Bootstrap's default 500px dialog clips
the values ("ATTENDANCE" showed as "ATTENDA"). Widened from the
tablet breakpoint up; phones keep the full-bleed sizing in §14. */
@media only screen and (min-width: 768px) {
#modalbox .modal-dialog { max-width: 860px; }
}
/* Denser cells inside popups so the grid uses the width for data */
.modal-body .table th,
.modal-body .table td { padding: 8px 10px; }
/* Header values run long ("COMPETENCES DEVELOPED", "FORMATIVE
ASSESSMENT"), so text inputs get a floor wide enough to read them.
Below 768px the dialog is narrower than the resulting grid, so the
table scrolls horizontally (§14) instead of squeezing the columns —
which is what clipped the values to "ATTENDANC" / "HOME WORI". */
.modal-body .table td input[type="text"].form-control { min-width: 170px; }
.modal-body .table td input[type="number"].form-control { min-width: 72px; }
.modal-footer {
background: var(--irps-surface-alt);
border-top: 1px solid var(--irps-border-soft);
padding: 14px 22px;
}
.modal-footer:empty { display: none; }
.modal-backdrop.show { opacity: .45; }
#overlayLoader .modal-content { border-radius: var(--irps-radius); }
#overlayLoader .modal-body { padding: 30px 40px; }
#overlayLoader .modal-dialog { max-width: 260px; }
.spinner-border.text-primary { color: var(--irps-primary) !important; }
/* ======================================================================
10. Alerts, badges, tabs, pagination
====================================================================== */
.alert {
border: 1px solid transparent;
border-radius: var(--irps-radius);
padding: 13px 16px;
font-size: 13.5px;
box-shadow: var(--irps-shadow-xs);
}
.alert .close { padding: 12px 16px; text-shadow: none; opacity: .5; }
.alert-success { background: #ecfdf3; border-color: #abefc6; color: #067647; }
.alert-danger { background: #fef3f2; border-color: #fecdca; color: #b42318; }
.alert-warning { background: #fffaeb; border-color: #fedf89; color: #b54708; }
.alert-info { background: #f0f9ff; border-color: #b9e6fe; color: #026aa2; }
.alert-primary { background: var(--irps-primary-soft); border-color: #c7d7fe; color: var(--irps-primary-700); }
.badge {
font-size: 11.5px;
font-weight: 600;
letter-spacing: .01em;
padding: 4px 9px;
border-radius: 999px;
}
.badge-primary { background: var(--irps-primary); }
.badge-success { background: var(--irps-success); }
.badge-danger { background: var(--irps-danger); }
.badge-warning { background: var(--irps-warning); color: #fff; }
.badge-info { background: var(--irps-info); }
.nav-tabs { border-bottom: 1px solid var(--irps-border); }
.nav-tabs .nav-link {
border: none;
border-bottom: 2px solid transparent;
border-radius: 0;
padding: 10px 14px;
font-size: 13.5px;
font-weight: 550;
color: var(--irps-text-muted);
transition: color .15s ease, border-color .15s ease;
}
.nav-tabs .nav-link:hover { color: var(--irps-text); border-bottom-color: var(--irps-border); }
.nav-tabs .nav-link.active {
color: var(--irps-primary);
background: transparent;
border-bottom-color: var(--irps-primary);
}
.nav-pills .nav-link { border-radius: 999px; font-size: 13.5px; font-weight: 550; }
.nav-pills .nav-link.active { background: var(--irps-primary); }
.pagination { gap: 4px; }
.page-link {
border: 1px solid var(--irps-border);
border-radius: var(--irps-radius-sm) !important;
color: var(--irps-text);
font-size: 13.5px;
padding: 7px 12px;
}
.page-link:hover { background: var(--irps-surface-alt); color: var(--irps-primary); }
.page-item.active .page-link {
background: var(--irps-primary);
border-color: var(--irps-primary);
color: #fff;
}
.dropdown-menu {
border: 1px solid var(--irps-border);
border-radius: var(--irps-radius);
box-shadow: var(--irps-shadow-md);
padding: 6px;
font-size: 13.5px;
}
.dropdown-item { border-radius: var(--irps-radius-sm); padding: 8px 12px; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--irps-primary-soft); color: var(--irps-primary-700); }
.progress { height: 8px; border-radius: 999px; background: var(--irps-border-soft); }
.progress-bar { background: var(--irps-primary); border-radius: 999px; }
hr { border-top-color: var(--irps-border-soft); }
.bootstrap-growl { border-radius: var(--irps-radius) !important; box-shadow: var(--irps-shadow-md) !important; }
/* ======================================================================
11. Login & Identity pages
====================================================================== */
body[themebg-pattern] {
background-color: var(--irps-nav-from);
background-image:
radial-gradient(900px circle at 12% 18%, rgba(99, 102, 241, .40), transparent 55%),
radial-gradient(800px circle at 85% 12%, rgba(168, 85, 247, .28), transparent 55%),
radial-gradient(900px circle at 70% 90%, rgba(56, 189, 248, .20), transparent 55%),
linear-gradient(160deg, var(--irps-nav-from) 0%, var(--irps-nav-to) 100%);
background-attachment: fixed;
}
.login-block { margin: 48px auto; }
.login-block .md-float-material > .text-center h3 {
color: #fff;
font-size: 24px;
font-weight: 650;
letter-spacing: -0.02em;
margin-bottom: 4px;
text-shadow: 0 2px 16px rgba(0, 0, 0, .28);
}
.login-block .auth-box.card {
max-width: 430px;
border: 1px solid rgba(255, 255, 255, .16);
border-radius: 18px;
background: rgba(255, 255, 255, .97);
box-shadow: 0 24px 64px rgba(12, 10, 40, .40);
margin-top: 22px;
overflow: visible;
}
.login-block .auth-box.card:hover { box-shadow: 0 24px 64px rgba(12, 10, 40, .40); }
.login-block .auth-box .card-block { padding: 32px 30px; }
.login-block .auth-box h3 { font-size: 19px; font-weight: 620; letter-spacing: -0.02em; }
.login-block footer a { color: rgba(255, 255, 255, .82); font-size: 13px; }
.login-block footer a:hover { color: #fff; }
.login-block footer p { color: rgba(255, 255, 255, .55); font-size: 12px; }
/* Material inputs keep their own layout; only colour is refreshed */
.form-material .form-primary .form-control:focus ~ .form-bar:after,
.form-material .form-primary .form-control:focus ~ .form-bar:before { background: var(--irps-primary); }
.form-material .form-control:focus ~ .float-label,
.form-material .form-control:valid ~ .float-label { color: var(--irps-primary); }
.login-block .btn-block { border-radius: 10px; padding: 11px 16px; font-size: 14.5px; font-weight: 600; }
.login-block .toggle-password { color: var(--irps-text-faint); }
.login-block .toggle-password:hover { color: var(--irps-primary); }
.txt-primary, .text-inverse { color: var(--irps-primary) !important; }
.text-inverse { color: var(--irps-text) !important; }
/* ======================================================================
12. Loader
====================================================================== */
.theme-loader { background: var(--irps-bg); }
.theme-loader .spinner-blue .circle-clipper .circle { border-color: var(--irps-primary); }
.theme-loader .spinner-red .circle-clipper .circle { border-color: #a855f7; }
.theme-loader .spinner-yellow .circle-clipper .circle { border-color: #6366f1; }
.theme-loader .spinner-green .circle-clipper .circle { border-color: #38bdf8; }
/* ======================================================================
13. Responsive
====================================================================== */
@media (max-width: 991px) {
.pcoded-inner-content { padding: 0 12px 20px; }
.page-header .page-block { padding: 12px 12px 6px; }
.card { border-radius: var(--irps-radius); margin-bottom: 16px; }
.card .card-block { padding: 16px; }
}
/* Mobile header: hamburger (left) and the profile "more" toggle (right).
Both are absolutely positioned by pcoded inside a full-width
.navbar-logo. Given explicit 56px tap targets and stacked above the
centred school name, which is inset so it cannot cover either one. */
@media only screen and (max-width: 992px) {
.header-navbar .navbar-wrapper .navbar-logo .mobile-menu,
.header-navbar .navbar-wrapper .navbar-logo .mobile-options {
display: -webkit-box !important;
display: -ms-flexbox !important;
display: flex !important;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
top: 0;
width: 56px;
height: 56px;
line-height: 1;
font-size: 20px;
z-index: 1031;
color: var(--irps-text) !important;
background: transparent;
}
.header-navbar .navbar-wrapper .navbar-logo .mobile-menu { left: 0; right: auto; }
.header-navbar .navbar-wrapper .navbar-logo .mobile-options { right: 0; left: auto; }
.header-navbar .navbar-wrapper .navbar-logo .mobile-menu:hover,
.header-navbar .navbar-wrapper .navbar-logo .mobile-options:hover {
color: var(--irps-primary) !important;
}
.school-name {
left: 60px;
right: 60px;
z-index: 1;
pointer-events: none;
}
.school-name h5 {
font-size: 13px;
line-height: 1.25;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
}
@media (max-width: 575px) {
.header-navbar .nav-right > .user-profile > a { padding: 4px 8px 4px 4px; margin: 0 2px; }
.modal-body { padding: 18px; }
.table thead th, .table tbody td { padding: 9px 10px; }
}
/* ======================================================================
14. Small-screen usability
====================================================================== */
@media only screen and (max-width: 767px) {
/* --- Data tables ---------------------------------------------------
4 of the 22 table views have no .table-responsive wrapper
(Home/Index, Publish/_ViewAllRPin, Publish/_ViewAllTheme,
Students/_ViewAll2), and one applies .table-responsive to the
itself rather than a parent, which Bootstrap 4 ignores.
Making .table its own scroll strip covers every case without
touching markup. Scoped to .table — no report-card markup uses it,
so result sheets are unaffected. */
.table {
display: block;
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* Keep action clusters on one line so they stay tappable */
.table td .btn,
.table th .btn { white-space: nowrap; }
.table td .btn + .btn { margin-left: 2px; }
/* --- Card header toolbars ------------------------------------------
Headers like Sessions' "title + Create New Session" use
d-flex justify-content-between, which squeezes both items on a
phone. Let them stack instead. */
.card .card-header.d-flex {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.card .card-header.d-flex > * { margin-bottom: 4px; }
.card .card-header .btn { white-space: nowrap; }
/* --- Inline filter/search forms ------------------------------------
.form-inline keeps controls on one row at every width, which is
unusable below ~600px. Stack them full width. */
.form-inline {
display: block;
width: 100%;
}
.form-inline > label {
display: block;
width: 100%;
margin: 0 0 6px;
}
.form-inline > .form-control,
.form-inline > select,
.form-inline > .btn,
.form-inline > .input-group {
width: 100%;
margin: 0 0 10px;
}
/* .form-inline paired with a desktop column width (Students/Index
uses "form-inline col-6 mx-auto") — col-* has no breakpoint so it
stays at half width on a phone. */
.form-inline[class*="col-"] {
-webkit-box-flex: 0;
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%;
}
/* --- Hard-coded desktop widths -------------------------------------
e.g. Publish/Theme.cshtml uses style="width:1200px". */
[style*="width:1200px"],
[style*="width: 1200px"] {
width: 100% !important;
max-width: 100% !important;
}
/* --- Dialogs -------------------------------------------------------- */
.modal-dialog {
margin: 10px;
max-width: calc(100% - 20px);
}
.modal-header, .modal-footer { padding: 14px 16px; }
/* --- Buttons --------------------------------------------------------
Stacked action buttons need breathing room when they wrap. */
.card-footer .btn,
.card-block > .btn { margin-bottom: 6px; }
/* Page title should not crowd the content below it */
.page-header .page-header-title h2 { font-size: 20px; }
/* --- Template Editor "Customize" grid -------------------------------
Five visible columns cannot fit a phone, and scrolling sideways
hides the score / column-count / sort fields with no cue they are
there. Each row becomes a stacked card instead, so every field is
visible without scrolling.
Column captions are positional because /static/acad.html builds
cells in a fixed order and ships no data-labels:
1 Key (hidden by temp.js) 2 Order (hidden by temp.js)
3 Visibility 4 Header 5 Score Obtainable
6 No. of Columns 7 Sort
Layout only — rowIndex and cells[] stay intact, so moveUp/moveDown
and saveItems() are unaffected. */
#tacad,
#tacad tbody,
#tacad tr,
#tacad td {
display: block;
width: auto;
overflow: visible;
}
#tacad thead { display: none; }
#tacad tr {
border: 1px solid var(--irps-border);
border-radius: var(--irps-radius);
background: var(--irps-surface);
padding: 6px 12px;
margin-bottom: 10px;
}
#tacad td {
border: none;
padding: 7px 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
/* Cells the generator leaves empty (score / column count only apply
to some headers) would otherwise show a caption with no field. */
#tacad td:empty { display: none; }
#tacad td::before {
-webkit-box-flex: 0;
-ms-flex: 0 0 104px;
flex: 0 0 104px;
font-size: 11px;
font-weight: 650;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--irps-text-muted);
}
#tacad td:nth-child(3)::before { content: "Visible"; }
#tacad td:nth-child(4)::before { content: "Header"; }
#tacad td:nth-child(5)::before { content: "Score"; }
#tacad td:nth-child(6)::before { content: "Columns"; }
#tacad td:nth-child(7)::before { content: "Sort"; }
/* Fields flex to the space left by the caption */
#tacad td .form-control {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
min-width: 0;
width: auto;
}
/* Reorder arrows sit side by side rather than stacked */
#tacad .move-btns {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}
#tacad .move-btns button {
margin: 0 6px 0 0;
padding: 6px 16px;
font-size: 11px;
}
/* --- Floating save button -------------------------------------------
Marks, Attendances, Attributes, CommentClassTeachers and
CommentHeadTeachers each define .sticky-save-btn in an inline