/* ===================================================================== School Management System - application stylesheet ----------------------------------------------------------------- Two rules govern this file. 1. DENSITY. Everything sizeable is a token so the global UI density (Compact / Medium / Comfortable) rescales typography, controls, tables, cards and navigation consistently. Density is applied as data-density="compact|medium|comfortable" on . 2. COLOUR. Every accent shade is a concrete value, never a runtime colour function. BrandingService::cssVariables() computes the soft / tint / dark / ink shades and an "r, g, b" triple for each brand colour in PHP and injects them into :root. The static values below are the fallbacks used when that injection is absent. color-mix() is deliberately NOT used: an unsupported colour function makes the whole declaration invalid, which silently blanks out backgrounds instead of degrading. Alpha tints use rgba(var(--csm-*-rgb), a) instead. ===================================================================== */ /* --------------------------------------------------------------------- 1. Tokens --------------------------------------------------------------------- */ :root { /* Brand colours - overridden per-request from school_branding */ --csm-primary: #1d4ed8; --csm-primary-rgb: 29, 78, 216; --csm-primary-softer: #f4f6fd; --csm-primary-soft: #e4eafa; --csm-primary-tint: #cdd8f6; --csm-primary-dark: #1840b1; --csm-primary-ink: #123086; --csm-secondary: #475569; --csm-secondary-rgb: 71, 85, 105; --csm-secondary-soft: #e9ebed; --csm-secondary-dark: #3a4656; --csm-secondary-ink: #2c3541; --csm-success: #15803d; --csm-success-rgb: 21, 128, 61; --csm-success-softer: #f3f8f5; --csm-success-soft: #e3f0e8; --csm-success-tint: #c8dfd2; --csm-success-dark: #116932; --csm-success-ink: #0d4f26; --csm-warning: #b45309; --csm-warning-rgb: 180, 83, 9; --csm-warning-softer: #fbf5f0; --csm-warning-soft: #f6eae2; --csm-warning-tint: #ecd4c0; --csm-warning-dark: #944407; --csm-warning-ink: #703306; --csm-danger: #b91c1c; --csm-danger-rgb: 185, 28, 28; --csm-danger-softer: #fbf4f4; --csm-danger-soft: #f7e4e4; --csm-danger-tint: #eec7c7; --csm-danger-dark: #981717; --csm-danger-ink: #731111; --csm-info: #0e7490; --csm-info-rgb: 14, 116, 144; --csm-info-softer: #f2f8fa; --csm-info-soft: #e2eef2; --csm-info-tint: #c4dde5; --csm-info-dark: #0b5f76; --csm-info-ink: #094859; --csm-neutral: #64748b; --csm-neutral-rgb: 100, 116, 139; --csm-neutral-soft: #eceef1; --csm-neutral-dark: #525f72; --csm-neutral-ink: #3e4856; /* Canvas */ --csm-bg: #eef1f8; --csm-bg-2: #f7f9fd; --csm-surface: #ffffff; --csm-surface-2: #f8fafc; --csm-surface-3: #f1f5f9; --csm-border: #dde3ee; --csm-border-strong: #c6cfe0; --csm-heading: #0f172a; --csm-text: #1e293b; --csm-text-muted: #64748b; /* Sidebar */ --csm-nav-bg: #131c33; --csm-nav-bg-2: #0a1120; --csm-nav-text: #b9c5d8; --csm-nav-text-strong: #ffffff; --csm-nav-section: #7386a3; --csm-nav-hover: rgba(255, 255, 255, 0.07); --csm-nav-border: rgba(148, 163, 184, 0.16); /* Typography */ --csm-font-sans: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --csm-font-size: 14.5px; --csm-font-size-sm: 12.75px; --csm-font-size-xs: 11px; --csm-font-size-lg: 16px; --csm-line-height: 1.5; --csm-table-font-size: 14px; /* Controls */ --csm-control-height: 36px; --csm-control-padding-y: 0.4rem; --csm-control-padding-x: 0.7rem; --csm-icon-size: 17px; --csm-radius: 12px; --csm-radius-sm: 8px; --csm-radius-pill: 999px; /* Spacing */ --csm-gap: 0.75rem; --csm-card-padding: 0.85rem 1.05rem; --csm-tile-padding: 0.9rem 1rem; --csm-table-cell-y: 0.55rem; --csm-table-cell-x: 0.7rem; --csm-section-gap: 1.1rem; /* Chrome */ --csm-sidebar-width: 254px; --csm-sidebar-collapsed-width: 66px; --csm-topbar-height: 58px; --csm-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05); --csm-shadow: 0 1px 3px rgba(15, 23, 42, 0.07), 0 6px 16px -6px rgba(15, 23, 42, 0.12); --csm-shadow-md: 0 2px 6px rgba(15, 23, 42, 0.07), 0 12px 28px -12px rgba(15, 23, 42, 0.18); --csm-shadow-lg: 0 18px 48px -12px rgba(15, 23, 42, 0.28); --csm-glow: 0 6px 18px -8px rgba(var(--csm-primary-rgb), 0.55); } /* Compact: maximum information density */ html[data-density="compact"] { --csm-font-size: 13.25px; --csm-font-size-sm: 11.75px; --csm-font-size-xs: 10.25px; --csm-font-size-lg: 14.75px; --csm-line-height: 1.4; --csm-table-font-size: 12.75px; --csm-control-height: 31px; --csm-control-padding-y: 0.26rem; --csm-control-padding-x: 0.55rem; --csm-icon-size: 15px; --csm-radius: 9px; --csm-radius-sm: 6px; --csm-gap: 0.55rem; --csm-card-padding: 0.6rem 0.8rem; --csm-tile-padding: 0.6rem 0.75rem; --csm-table-cell-y: 0.34rem; --csm-table-cell-x: 0.5rem; --csm-section-gap: 0.8rem; --csm-sidebar-width: 232px; --csm-topbar-height: 50px; } /* Comfortable: accessibility / touch friendly */ html[data-density="comfortable"] { --csm-font-size: 16px; --csm-font-size-sm: 14px; --csm-font-size-xs: 12px; --csm-font-size-lg: 17.5px; --csm-line-height: 1.65; --csm-table-font-size: 15.5px; --csm-control-height: 44px; --csm-control-padding-y: 0.6rem; --csm-control-padding-x: 0.95rem; --csm-icon-size: 19px; --csm-radius: 14px; --csm-radius-sm: 10px; --csm-gap: 1rem; --csm-card-padding: 1.15rem 1.4rem; --csm-tile-padding: 1.25rem 1.4rem; --csm-table-cell-y: 0.8rem; --csm-table-cell-x: 0.95rem; --csm-section-gap: 1.6rem; --csm-sidebar-width: 276px; --csm-topbar-height: 66px; } /* --------------------------------------------------------------------- 2. Base --------------------------------------------------------------------- */ body { font-family: var(--csm-font-sans); font-size: var(--csm-font-size); line-height: var(--csm-line-height); color: var(--csm-text); background-color: var(--csm-bg); background-image: linear-gradient(180deg, var(--csm-bg-2) 0, var(--csm-bg) 320px); background-repeat: no-repeat; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: var(--csm-primary); text-decoration: none; transition: color 0.12s ease; } a:hover { color: var(--csm-primary-dark); text-decoration: underline; } .text-muted-2 { color: var(--csm-text-muted) !important; } small, .small { font-size: var(--csm-font-size-sm); } h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { color: var(--csm-heading); font-weight: 600; letter-spacing: -0.011em; } h1, .h1 { font-size: calc(var(--csm-font-size) * 1.7); } h2, .h2 { font-size: calc(var(--csm-font-size) * 1.45); } h3, .h3 { font-size: calc(var(--csm-font-size) * 1.28); } h4, .h4 { font-size: calc(var(--csm-font-size) * 1.15); } h5, .h5 { font-size: calc(var(--csm-font-size) * 1.06); } h6, .h6 { font-size: var(--csm-font-size); } .bi { font-size: var(--csm-icon-size); line-height: 1; vertical-align: -0.125em; } /* Tabular figures everywhere money and counts appear */ .num, .stat-card__value, .table td.num, .table th.num { font-variant-numeric: tabular-nums; } /* Utilities Bootstrap does not ship but the views rely on. Without min-width:0 a flex child refuses to shrink and .text-truncate never truncates, which pushed the dashboard tile text out of its card. */ .min-w-0 { min-width: 0; } /* Slim, unobtrusive scrollbars inside scrolling panes */ * { scrollbar-width: thin; scrollbar-color: var(--csm-border-strong) transparent; } ::-webkit-scrollbar { width: 9px; height: 9px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--csm-border-strong); border-radius: var(--csm-radius-pill); border: 2px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background: var(--csm-neutral); background-clip: content-box; } /* Visible focus for keyboard users on every interactive element */ a:focus-visible, button:focus-visible, .btn:focus-visible, .form-control:focus-visible, .form-select:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--csm-primary); outline-offset: 2px; box-shadow: none; } .visually-hidden-focusable:focus { position: static !important; width: auto !important; height: auto !important; } /* --------------------------------------------------------------------- 3. Sidebar --------------------------------------------------------------------- */ .app-shell { min-height: 100vh; } .app-sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: var(--csm-sidebar-width); background: radial-gradient(420px 220px at 0% 0%, rgba(var(--csm-primary-rgb), 0.38) 0%, transparent 70%), linear-gradient(180deg, var(--csm-nav-bg) 0%, var(--csm-nav-bg-2) 100%); color: var(--csm-nav-text); display: flex; flex-direction: column; z-index: 1040; transition: width 0.18s ease, transform 0.18s ease; } .app-sidebar__brand { display: flex; align-items: center; gap: 0.6rem; height: var(--csm-topbar-height); padding: 0 0.9rem; border-bottom: 1px solid var(--csm-nav-border); color: var(--csm-nav-text-strong); flex: 0 0 auto; } .app-sidebar__brand:hover { color: var(--csm-nav-text-strong); text-decoration: none; } .app-sidebar__brand img { width: 32px; height: 32px; object-fit: contain; background: #fff; border-radius: var(--csm-radius-sm); padding: 2px; flex: 0 0 auto; } .app-sidebar__brand .avatar-initials { background-image: linear-gradient(135deg, var(--csm-primary), var(--csm-info)); box-shadow: var(--csm-glow); } .app-sidebar__brand-text { font-weight: 600; font-size: var(--csm-font-size); line-height: 1.2; letter-spacing: -0.01em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .app-sidebar__brand-text small { display: block; font-weight: 400; font-size: var(--csm-font-size-xs); letter-spacing: 0.02em; color: var(--csm-nav-section); } .app-sidebar__nav { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: 0.55rem 0.5rem 1.75rem; } .app-sidebar__nav::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.32); background-clip: content-box; } .app-sidebar__section { padding: 0.9rem 0.55rem 0.35rem; font-size: var(--csm-font-size-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--csm-nav-section); white-space: nowrap; } .app-nav-link { position: relative; display: flex; align-items: center; gap: 0.65rem; padding: calc(var(--csm-table-cell-y) + 0.12rem) 0.6rem; margin-bottom: 2px; border-radius: var(--csm-radius-sm); color: var(--csm-nav-text); font-size: var(--csm-font-size); white-space: nowrap; transition: background-color 0.12s ease, color 0.12s ease, box-shadow 0.12s ease; } .app-nav-link:hover { background: var(--csm-nav-hover); color: var(--csm-nav-text-strong); text-decoration: none; } .app-nav-link.active { background-image: linear-gradient(135deg, var(--csm-primary) 0%, var(--csm-primary-dark) 100%); color: #fff; font-weight: 600; box-shadow: var(--csm-glow); } .app-nav-link .bi:first-child { flex: 0 0 var(--csm-icon-size); text-align: center; opacity: 0.8; } .app-nav-link:hover .bi:first-child, .app-nav-link.active .bi:first-child { opacity: 1; } .app-nav-link__label { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; } .app-nav-link__caret { font-size: 11px; opacity: 0.55; transition: transform 0.15s ease; } .app-nav-link[aria-expanded="true"] .app-nav-link__caret { transform: rotate(90deg); } .app-nav-sub { position: relative; list-style: none; margin: 2px 0 0.4rem; padding: 0; } .app-nav-sub::before { content: ""; position: absolute; left: 1.2rem; top: 0.1rem; bottom: 0.1rem; width: 2px; border-radius: 2px; background: var(--csm-nav-border); } .app-nav-sub .app-nav-link { padding-left: 2rem; font-size: var(--csm-font-size-sm); color: #9dabc1; margin-bottom: 1px; } .app-nav-sub .app-nav-link:hover { color: var(--csm-nav-text-strong); } .app-nav-sub .app-nav-link.active { background-image: none; background-color: rgba(var(--csm-primary-rgb), 0.28); color: #fff; box-shadow: none; } .app-nav-sub .app-nav-link.active::before { content: ""; position: absolute; left: 1.2rem; top: 0.3rem; bottom: 0.3rem; width: 2px; border-radius: 2px; background: var(--csm-primary-tint); } .app-nav-badge { font-size: var(--csm-font-size-xs); font-weight: 700; padding: 0.1rem 0.4rem; border-radius: var(--csm-radius-pill); background: var(--csm-danger); color: #fff; } /* Collapsed sidebar: icons only */ .app--sidebar-collapsed .app-sidebar { width: var(--csm-sidebar-collapsed-width); } .app--sidebar-collapsed .app-sidebar__brand-text, .app--sidebar-collapsed .app-nav-link__label, .app--sidebar-collapsed .app-nav-link__caret, .app--sidebar-collapsed .app-sidebar__section, .app--sidebar-collapsed .app-nav-badge { display: none; } .app--sidebar-collapsed .app-sidebar__brand { justify-content: center; padding: 0; } .app--sidebar-collapsed .app-nav-link { justify-content: center; padding-left: 0; padding-right: 0; gap: 0; } .app--sidebar-collapsed .app-nav-sub { display: none !important; } .app--sidebar-collapsed .app-main { margin-left: var(--csm-sidebar-collapsed-width); } /* --------------------------------------------------------------------- 4. Top bar --------------------------------------------------------------------- */ .app-main { margin-left: var(--csm-sidebar-width); min-height: 100vh; display: flex; flex-direction: column; transition: margin-left 0.18s ease; } .app-topbar { position: sticky; top: 0; z-index: 1030; height: var(--csm-topbar-height); background: var(--csm-surface); border-bottom: 1px solid var(--csm-border); display: flex; align-items: center; gap: 0.5rem; padding: 0 clamp(0.75rem, 1.4vw, 1.25rem); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); } /* Brand accent so the chrome is never a plain white bar */ .app-topbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background-image: linear-gradient(90deg, var(--csm-primary) 0%, var(--csm-info) 55%, var(--csm-success) 100%); opacity: 0.85; } .app-topbar__title { font-weight: 600; font-size: var(--csm-font-size-lg); color: var(--csm-heading); letter-spacing: -0.012em; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Location trail: the top bar says where you are, the page header says what this screen is. */ .app-topbar__trail { min-width: 0; overflow: hidden; } .app-topbar__trail .breadcrumb { --bs-breadcrumb-margin-bottom: 0; flex-wrap: nowrap; white-space: nowrap; overflow: hidden; } .app-topbar__trail .breadcrumb-item { overflow: hidden; text-overflow: ellipsis; } .app-topbar__trail .breadcrumb-item.active { color: var(--csm-primary-ink); font-weight: 600; } .app-topbar__spacer { flex: 1 1 auto; } /* The topbar controls read as quiet chrome, not as page actions */ .app-topbar .btn-light { background: var(--csm-surface-2); border-color: var(--csm-border); color: var(--csm-text); } .app-topbar .btn-light:hover, .app-topbar .btn-light:focus, .app-topbar .show > .btn-light { background: var(--csm-primary-softer); border-color: var(--csm-primary-tint); color: var(--csm-primary-ink); } .app-topbar .btn-icon { --csm-btn-size: var(--csm-control-height); width: var(--csm-btn-size); height: var(--csm-btn-size); display: inline-flex; align-items: center; justify-content: center; padding: 0; flex: 0 0 auto; } .session-pill { display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--csm-font-size-sm); font-weight: 600; background: var(--csm-primary-softer); border: 1px solid var(--csm-primary-tint); border-radius: var(--csm-radius-pill); padding: 0.22rem 0.7rem; color: var(--csm-primary-ink); white-space: nowrap; } .session-pill .bi { font-size: var(--csm-font-size-sm); color: var(--csm-primary); } button.session-pill:hover, .show > button.session-pill { background: var(--csm-primary-soft); border-color: var(--csm-primary); color: var(--csm-primary-ink); } .app-content { flex: 1 1 auto; width: 100%; min-width: 0; padding: var(--csm-section-gap) clamp(0.75rem, 1.4vw, 1.25rem) 2.5rem; } .app-footer { border-top: 1px solid var(--csm-border); padding: 0.7rem clamp(0.75rem, 1.4vw, 1.25rem); font-size: var(--csm-font-size-sm); color: var(--csm-text-muted); background: var(--csm-surface); margin-top: auto; } /* --------------------------------------------------------------------- 5. Page header --------------------------------------------------------------------- */ .page-header { position: relative; display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--csm-gap); margin-bottom: var(--csm-section-gap); padding-bottom: calc(var(--csm-section-gap) * 0.65); border-bottom: 1px solid var(--csm-border); } /* Short brand rule riding the header divider */ .page-header::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 68px; height: 2px; border-radius: 2px; background-image: linear-gradient(90deg, var(--csm-primary), var(--csm-info)); } .page-header__titles { flex: 1 1 260px; min-width: 0; } /* Narrow screens hide the top-bar trail, so keep one way back up */ .page-header__back { display: inline-flex; align-items: center; gap: 0.2rem; font-size: var(--csm-font-size-sm); font-weight: 600; color: var(--csm-primary); margin-bottom: 0.15rem; } .page-header__back:hover { color: var(--csm-primary-dark); text-decoration: none; } .page-header__back .bi { font-size: var(--csm-font-size-sm); } .page-header h1 { margin: 0; font-size: calc(var(--csm-font-size) * 1.5); font-weight: 650; line-height: 1.2; letter-spacing: -0.018em; color: var(--csm-heading); } .page-header__subtitle { color: var(--csm-text-muted); font-size: var(--csm-font-size-sm); margin: 0.25rem 0 0; max-width: 74ch; } .page-header__actions { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; } .breadcrumb { --bs-breadcrumb-font-size: var(--csm-font-size-sm); --bs-breadcrumb-margin-bottom: 0.3rem; --bs-breadcrumb-divider-color: var(--csm-border-strong); --bs-breadcrumb-item-active-color: var(--csm-text-muted); --bs-breadcrumb-item-padding-x: 0.45rem; } .breadcrumb a { color: var(--csm-text-muted); } .breadcrumb a:hover { color: var(--csm-primary); text-decoration: none; } .breadcrumb .bi { font-size: var(--csm-font-size-sm); } /* --------------------------------------------------------------------- 6. Cards --------------------------------------------------------------------- */ .card { border: 1px solid var(--csm-border); border-radius: var(--csm-radius); box-shadow: var(--csm-shadow-sm); background: var(--csm-surface); margin-bottom: var(--csm-section-gap); } .card-header { background-image: linear-gradient(180deg, var(--csm-primary-softer) 0%, var(--csm-surface) 100%); border-bottom: 1px solid var(--csm-border); padding: var(--csm-card-padding); font-weight: 600; color: var(--csm-heading); display: flex; align-items: center; gap: var(--csm-gap); flex-wrap: wrap; border-top-left-radius: calc(var(--csm-radius) - 1px); border-top-right-radius: calc(var(--csm-radius) - 1px); } .card-header .card-title { margin: 0; font-size: var(--csm-font-size-lg); font-weight: 600; color: var(--csm-primary-ink); display: inline-flex; align-items: center; gap: 0.45rem; min-width: 0; } .card-header .card-title > .bi { color: var(--csm-primary); } .card-header .badge { flex: 0 0 auto; } .card-body { padding: var(--csm-card-padding); } .card-footer { background: var(--csm-surface-2); border-top: 1px solid var(--csm-border); padding: var(--csm-card-padding); border-bottom-left-radius: calc(var(--csm-radius) - 1px); border-bottom-right-radius: calc(var(--csm-radius) - 1px); } /* A flush table inside a card keeps the card's rounded corners */ .card > .card-body.p-0 > .table-responsive, .card > .card-body.p-0 > .table { border-bottom-left-radius: calc(var(--csm-radius) - 1px); border-bottom-right-radius: calc(var(--csm-radius) - 1px); overflow: hidden; } .card > .card-body.p-0 > .table-responsive > .table > tbody > tr:last-child > td, .card > .card-body.p-0 > .table > tbody > tr:last-child > td { border-bottom: 0; } /* The flat background is only for rows that are NOT the selected one. Without the :not(), this rule wiped Bootstrap's active background while its white active text colour survived, leaving the selected row's label white on white - present in the DOM but invisible. */ .card .list-group-item:not(.active) { padding: calc(var(--csm-table-cell-y) + 0.15rem) var(--csm-table-cell-x); font-size: var(--csm-font-size); border-color: var(--csm-border); background: transparent; } .card .list-group-item.active { padding: calc(var(--csm-table-cell-y) + 0.15rem) var(--csm-table-cell-x); font-size: var(--csm-font-size); } .card .list-group-item:not(.active):hover { background: var(--csm-primary-softer); } /* Selected row: colour and background are declared together so neither can be changed without the other. */ .list-group-item.active, .list-group-item-action.active, .card .list-group-item.active { color: #fff; background-color: var(--csm-primary); background-image: linear-gradient(135deg, var(--csm-primary) 0%, var(--csm-primary-dark) 100%); border-color: var(--csm-primary-dark); font-weight: 600; } /* Hover and focus must never repaint the selected row back to a light background, because its text stays white. */ .list-group-item.active:hover, .list-group-item.active:focus, .list-group-item-action.active:hover, .list-group-item-action.active:focus, .card .list-group-item.active:hover, .card .list-group-item.active:focus { color: #fff; background-color: var(--csm-primary-dark); background-image: linear-gradient(135deg, var(--csm-primary-dark) 0%, var(--csm-primary-ink) 100%); } /* Anything nested in the selected row inherits the light text too, so a muted caption or an icon does not disappear against the fill. */ .list-group-item.active .text-muted-2, .list-group-item.active small, .list-group-item.active .bi { color: rgba(255, 255, 255, 0.82) !important; } /* A badge inside the selected row needs its own readable treatment. */ .list-group-item.active .badge { background-color: rgba(255, 255, 255, 0.22) !important; color: #fff !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35); } .list-group-item-action:focus-visible { z-index: 2; } .card .list-group-flush > .list-group-item:last-child { border-bottom: 0; } /* --------------------------------------------------------------------- 7. Stat / KPI tiles ----------------------------------------------------------------- Two families are in use and both must look like real tiles: .stat-card (icon + value, dashboard) and .balance-card (label + value + meta, used across every module detail screen). --------------------------------------------------------------------- */ .stat-card { position: relative; display: flex; align-items: center; gap: var(--csm-gap); padding: var(--csm-tile-padding); padding-left: calc(var(--csm-gap) + 1rem); border-radius: var(--csm-radius); border: 1px solid var(--csm-border); background-image: linear-gradient(135deg, var(--csm-primary-softer) 0%, var(--csm-surface) 62%); background-color: var(--csm-surface); box-shadow: var(--csm-shadow-sm); height: 100%; overflow: hidden; transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease; } .stat-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background-image: linear-gradient(180deg, var(--csm-primary), var(--csm-primary-dark)); } a:hover > .stat-card, a:focus-visible > .stat-card { box-shadow: var(--csm-shadow); border-color: var(--csm-primary-tint); transform: translateY(-2px); text-decoration: none; } .stat-card__icon { width: calc(var(--csm-control-height) + 12px); height: calc(var(--csm-control-height) + 12px); border-radius: var(--csm-radius-sm); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; background-image: linear-gradient(135deg, var(--csm-primary) 0%, var(--csm-primary-dark) 100%); color: #fff; box-shadow: var(--csm-glow); } .stat-card__icon .bi { font-size: calc(var(--csm-icon-size) + 5px); } .stat-card__label { font-size: var(--csm-font-size-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--csm-text-muted); margin: 0; line-height: 1.3; } .stat-card__value { font-size: calc(var(--csm-font-size) * 1.55); font-weight: 700; color: var(--csm-heading); margin: 0.1rem 0 0; line-height: 1.15; letter-spacing: -0.022em; overflow-wrap: anywhere; } .stat-card__meta { font-size: var(--csm-font-size-sm); color: var(--csm-text-muted); margin: 0.1rem 0 0; line-height: 1.3; } .stat-card--success { background-image: linear-gradient(135deg, var(--csm-success-softer) 0%, var(--csm-surface) 62%); } .stat-card--success::before { background-image: linear-gradient(180deg, var(--csm-success), var(--csm-success-dark)); } .stat-card--success .stat-card__icon { background-image: linear-gradient(135deg, var(--csm-success), var(--csm-success-dark)); box-shadow: 0 6px 18px -8px rgba(var(--csm-success-rgb), 0.55); } .stat-card--success .stat-card__value { color: var(--csm-success-ink); } .stat-card--warning { background-image: linear-gradient(135deg, var(--csm-warning-softer) 0%, var(--csm-surface) 62%); } .stat-card--warning::before { background-image: linear-gradient(180deg, var(--csm-warning), var(--csm-warning-dark)); } .stat-card--warning .stat-card__icon { background-image: linear-gradient(135deg, var(--csm-warning), var(--csm-warning-dark)); box-shadow: 0 6px 18px -8px rgba(var(--csm-warning-rgb), 0.55); } .stat-card--warning .stat-card__value { color: var(--csm-warning-ink); } .stat-card--danger { background-image: linear-gradient(135deg, var(--csm-danger-softer) 0%, var(--csm-surface) 62%); } .stat-card--danger::before { background-image: linear-gradient(180deg, var(--csm-danger), var(--csm-danger-dark)); } .stat-card--danger .stat-card__icon { background-image: linear-gradient(135deg, var(--csm-danger), var(--csm-danger-dark)); box-shadow: 0 6px 18px -8px rgba(var(--csm-danger-rgb), 0.55); } .stat-card--danger .stat-card__value { color: var(--csm-danger-ink); } .stat-card--info { background-image: linear-gradient(135deg, var(--csm-info-softer) 0%, var(--csm-surface) 62%); } .stat-card--info::before { background-image: linear-gradient(180deg, var(--csm-info), var(--csm-info-dark)); } .stat-card--info .stat-card__icon { background-image: linear-gradient(135deg, var(--csm-info), var(--csm-info-dark)); box-shadow: 0 6px 18px -8px rgba(var(--csm-info-rgb), 0.55); } .stat-card--info .stat-card__value { color: var(--csm-info-ink); } .stat-card--neutral { background-image: linear-gradient(135deg, var(--csm-neutral-soft) 0%, var(--csm-surface) 62%); } .stat-card--neutral::before { background-image: linear-gradient(180deg, var(--csm-neutral), var(--csm-neutral-dark)); } .stat-card--neutral .stat-card__icon { background-image: linear-gradient(135deg, var(--csm-neutral), var(--csm-neutral-dark)); box-shadow: 0 6px 18px -8px rgba(var(--csm-neutral-rgb), 0.5); } .stat-card--neutral .stat-card__value { color: var(--csm-neutral-ink); } /* Balance tiles: school fee / transport / old due / combined stay visually distinct through the top accent bar. */ .balance-card { position: relative; display: flex; flex-direction: column; gap: 0.1rem; height: 100%; padding: var(--csm-tile-padding); background-color: var(--csm-surface); background-image: linear-gradient(160deg, var(--csm-primary-softer) 0%, var(--csm-surface) 58%); border: 1px solid var(--csm-border); border-radius: var(--csm-radius); box-shadow: var(--csm-shadow-sm); overflow: hidden; } .balance-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background-image: linear-gradient(90deg, var(--csm-primary), var(--csm-primary-dark)); } .balance-card--transport { background-image: linear-gradient(160deg, var(--csm-info-softer) 0%, var(--csm-surface) 58%); } .balance-card--transport::before { background-image: linear-gradient(90deg, var(--csm-info), var(--csm-info-dark)); } .balance-card--old-due { background-image: linear-gradient(160deg, var(--csm-warning-softer) 0%, var(--csm-surface) 58%); } .balance-card--old-due::before { background-image: linear-gradient(90deg, var(--csm-warning), var(--csm-warning-dark)); } .balance-card--total { background-image: linear-gradient(160deg, var(--csm-danger-softer) 0%, var(--csm-surface) 58%); } .balance-card--total::before { background-image: linear-gradient(90deg, var(--csm-danger), var(--csm-danger-dark)); } /* The label is the tile caption */ .balance-card > .detail-grid__label { font-size: var(--csm-font-size-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--csm-text-muted); margin-bottom: 0.2rem; } /* The value line is authored as .h5 in the views; a KPI needs weight */ .balance-card > .h5, .balance-card > h5 { font-size: calc(var(--csm-font-size) * 1.45); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; color: var(--csm-primary-ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } /* When the value is a status badge, keep the badge at badge size */ .balance-card > .h5 .badge { font-size: var(--csm-font-size-sm); vertical-align: middle; } .balance-card > .small, .balance-card > p.small { color: var(--csm-text-muted); line-height: 1.35; } .balance-card--transport > .h5 { color: var(--csm-info-ink); } .balance-card--old-due > .h5 { color: var(--csm-warning-ink); } .balance-card--total > .h5 { color: var(--csm-danger-ink); } /* --------------------------------------------------------------------- 8. Detail grids (label / value pairs on every detail screen) --------------------------------------------------------------------- */ .detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 0.5rem; } .detail-grid > div { min-width: 0; padding: 0.45rem 0.7rem; background: var(--csm-surface-2); border: 1px solid var(--csm-border); border-left: 3px solid var(--csm-primary-tint); border-radius: var(--csm-radius-sm); } .detail-grid__label { display: block; font-size: var(--csm-font-size-xs); font-weight: 700; color: var(--csm-text-muted); text-transform: uppercase; letter-spacing: 0.055em; line-height: 1.35; margin-bottom: 0.1rem; } .detail-grid__value { display: block; font-size: var(--csm-font-size); font-weight: 600; color: var(--csm-heading); line-height: 1.35; word-break: break-word; } .detail-grid__value .badge { vertical-align: middle; } /* --------------------------------------------------------------------- 9. Tables --------------------------------------------------------------------- */ .table { font-size: var(--csm-table-font-size); margin-bottom: 0; --bs-table-bg: var(--csm-surface); --bs-table-border-color: var(--csm-border); border-color: var(--csm-border); } .table > :not(caption) > * > * { padding: var(--csm-table-cell-y) var(--csm-table-cell-x); vertical-align: middle; } .table > thead { background-color: var(--csm-primary-softer); } .table > thead th { font-weight: 700; font-size: var(--csm-font-size-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--csm-primary-ink); white-space: nowrap; border-bottom: 2px solid var(--csm-primary-tint); } .table-sticky-head > thead th { position: sticky; top: 0; z-index: 2; background-color: var(--csm-primary-softer); } /* Gentle zebra so wide rows stay scannable */ .table > tbody > tr:nth-of-type(even) > td, .table > tbody > tr:nth-of-type(even) > th { background-color: var(--csm-surface-2); } .table-hover > tbody > tr:hover > * { background-color: var(--csm-primary-softer); } .table > tbody > tr > td { border-color: var(--csm-border); } .table td.num, .table th.num { text-align: right; white-space: nowrap; } .table td.actions, .table th.actions { white-space: nowrap; width: 1%; text-align: right; } .table td.actions .btn + .btn { margin-left: 0.2rem; } /* Totals must beat the zebra rule */ .table > tbody > tr.table-total-row > td, .table > tbody > tr.table-total-row > th, .table > tfoot > tr > td, .table > tfoot > tr > th { font-weight: 700; color: var(--csm-primary-ink); background-color: var(--csm-primary-soft); border-top: 2px solid var(--csm-primary-tint); } /* --------------------------------------------------------------------- 10. Forms --------------------------------------------------------------------- */ .form-control, .form-select { font-size: var(--csm-font-size); min-height: var(--csm-control-height); padding: var(--csm-control-padding-y) var(--csm-control-padding-x); color: var(--csm-text); border-color: var(--csm-border-strong); border-radius: var(--csm-radius-sm); background-color: var(--csm-surface); transition: border-color 0.12s ease, box-shadow 0.12s ease; } .form-control::placeholder { color: #9aa5b8; } .form-control:hover:not(:disabled):not([readonly]), .form-select:hover:not(:disabled) { border-color: var(--csm-primary-tint); } .form-control:focus, .form-select:focus { border-color: var(--csm-primary); box-shadow: 0 0 0 3px rgba(var(--csm-primary-rgb), 0.18); } .form-control:disabled, .form-control[readonly], .form-select:disabled { background-color: var(--csm-surface-3); color: var(--csm-text-muted); } .form-control.is-invalid, .form-select.is-invalid { border-color: var(--csm-danger); } .form-control.is-invalid:focus, .form-select.is-invalid:focus { box-shadow: 0 0 0 3px rgba(var(--csm-danger-rgb), 0.2); } .invalid-feedback { font-size: var(--csm-font-size-sm); } textarea.form-control { min-height: calc(var(--csm-control-height) * 2); } .form-label { font-size: var(--csm-font-size-sm); font-weight: 600; margin-bottom: 0.3rem; color: #3d4757; } .form-label .required-marker { color: var(--csm-danger); margin-left: 0.15rem; } .form-text { font-size: var(--csm-font-size-sm); color: var(--csm-text-muted); } .form-check-label { font-size: var(--csm-font-size); } .form-check-input:checked { background-color: var(--csm-primary); border-color: var(--csm-primary); } .form-check-input:focus { border-color: var(--csm-primary); box-shadow: 0 0 0 3px rgba(var(--csm-primary-rgb), 0.18); } .input-group-text { font-size: var(--csm-font-size-sm); background: var(--csm-primary-softer); border-color: var(--csm-border-strong); color: var(--csm-primary-ink); } fieldset.form-section { border: 1px solid var(--csm-border); border-radius: var(--csm-radius); padding: var(--csm-card-padding); margin-bottom: var(--csm-section-gap); background: var(--csm-surface); } fieldset.form-section > legend { float: none; width: auto; padding: 0.1rem 0.6rem; margin: 0 0 0.5rem; font-size: var(--csm-font-size-sm); font-weight: 700; letter-spacing: 0.045em; text-transform: uppercase; color: var(--csm-primary-ink); background: var(--csm-primary-soft); border-radius: var(--csm-radius-pill); } /* Filter panel above every DataTable */ .filter-panel { position: relative; border: 1px solid var(--csm-border); border-left: 3px solid var(--csm-primary); border-radius: var(--csm-radius); background: var(--csm-surface); box-shadow: var(--csm-shadow-sm); padding: var(--csm-card-padding); margin-bottom: var(--csm-section-gap); } .filter-panel__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); gap: var(--csm-gap); align-items: end; } .filter-panel__actions { display: flex; gap: 0.4rem; align-items: end; flex-wrap: wrap; } /* --------------------------------------------------------------------- 11. Buttons --------------------------------------------------------------------- */ .btn { font-size: var(--csm-font-size); min-height: var(--csm-control-height); padding: var(--csm-control-padding-y) calc(var(--csm-control-padding-x) + 0.25rem); border-radius: var(--csm-radius-sm); display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; font-weight: 600; line-height: 1.25; transition: background-color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease, color 0.12s ease, transform 0.12s ease; } .btn-sm { font-size: var(--csm-font-size-sm); min-height: calc(var(--csm-control-height) - 6px); padding: 0.2rem 0.6rem; border-radius: calc(var(--csm-radius-sm) - 2px); gap: 0.3rem; } .btn-sm .bi { font-size: var(--csm-font-size-sm); } .btn-lg { font-size: var(--csm-font-size-lg); min-height: calc(var(--csm-control-height) + 8px); } /* Solid buttons are declared explicitly so they never depend on a Bootstrap custom property that a brand override might blank out. */ .btn-primary { color: #fff; background-color: var(--csm-primary); background-image: linear-gradient(180deg, var(--csm-primary) 0%, var(--csm-primary-dark) 100%); border-color: var(--csm-primary-dark); box-shadow: 0 1px 2px rgba(var(--csm-primary-rgb), 0.35); } .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active { color: #fff; background-color: var(--csm-primary-dark); background-image: linear-gradient(180deg, var(--csm-primary-dark) 0%, var(--csm-primary-ink) 100%); border-color: var(--csm-primary-ink); box-shadow: 0 3px 10px -2px rgba(var(--csm-primary-rgb), 0.45); } .btn-success { color: #fff; background-color: var(--csm-success); background-image: linear-gradient(180deg, var(--csm-success) 0%, var(--csm-success-dark) 100%); border-color: var(--csm-success-dark); box-shadow: 0 1px 2px rgba(var(--csm-success-rgb), 0.35); } .btn-success:hover, .btn-success:focus, .btn-success:active { color: #fff; background-color: var(--csm-success-dark); background-image: linear-gradient(180deg, var(--csm-success-dark) 0%, var(--csm-success-ink) 100%); border-color: var(--csm-success-ink); } .btn-danger { color: #fff; background-color: var(--csm-danger); background-image: linear-gradient(180deg, var(--csm-danger) 0%, var(--csm-danger-dark) 100%); border-color: var(--csm-danger-dark); box-shadow: 0 1px 2px rgba(var(--csm-danger-rgb), 0.35); } .btn-danger:hover, .btn-danger:focus, .btn-danger:active { color: #fff; background-color: var(--csm-danger-dark); background-image: linear-gradient(180deg, var(--csm-danger-dark) 0%, var(--csm-danger-ink) 100%); border-color: var(--csm-danger-ink); } .btn-warning { color: #fff; background-color: var(--csm-warning); background-image: linear-gradient(180deg, var(--csm-warning) 0%, var(--csm-warning-dark) 100%); border-color: var(--csm-warning-dark); box-shadow: 0 1px 2px rgba(var(--csm-warning-rgb), 0.35); } .btn-warning:hover, .btn-warning:focus, .btn-warning:active { color: #fff; background-color: var(--csm-warning-dark); background-image: linear-gradient(180deg, var(--csm-warning-dark) 0%, var(--csm-warning-ink) 100%); border-color: var(--csm-warning-ink); } .btn-info { color: #fff; background-color: var(--csm-info); background-image: linear-gradient(180deg, var(--csm-info) 0%, var(--csm-info-dark) 100%); border-color: var(--csm-info-dark); box-shadow: 0 1px 2px rgba(var(--csm-info-rgb), 0.35); } .btn-info:hover, .btn-info:focus, .btn-info:active { color: #fff; background-color: var(--csm-info-dark); background-image: linear-gradient(180deg, var(--csm-info-dark) 0%, var(--csm-info-ink) 100%); border-color: var(--csm-info-ink); } .btn-secondary { color: #fff; background-color: var(--csm-secondary); background-image: linear-gradient(180deg, var(--csm-secondary) 0%, var(--csm-secondary-dark) 100%); border-color: var(--csm-secondary-dark); } .btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active { color: #fff; background-color: var(--csm-secondary-dark); border-color: var(--csm-secondary-ink); } .btn-outline-primary { color: var(--csm-primary-ink); border-color: var(--csm-primary-tint); background-color: var(--csm-primary-softer); } .btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active { background-color: var(--csm-primary); background-image: linear-gradient(180deg, var(--csm-primary), var(--csm-primary-dark)); border-color: var(--csm-primary-dark); color: #fff; } .btn-outline-secondary { color: var(--csm-secondary-ink); border-color: var(--csm-border-strong); background-color: var(--csm-surface); } .btn-outline-secondary:hover, .btn-outline-secondary:focus, .btn-outline-secondary:active { background-color: var(--csm-secondary); border-color: var(--csm-secondary-dark); color: #fff; } .btn-outline-danger { color: var(--csm-danger-ink); border-color: var(--csm-danger-tint); background-color: var(--csm-danger-softer); } .btn-outline-danger:hover, .btn-outline-danger:focus, .btn-outline-danger:active { background-color: var(--csm-danger); border-color: var(--csm-danger-dark); color: #fff; } .btn-outline-success { color: var(--csm-success-ink); border-color: var(--csm-success-tint); background-color: var(--csm-success-softer); } .btn-outline-success:hover, .btn-outline-success:focus, .btn-outline-success:active { background-color: var(--csm-success); border-color: var(--csm-success-dark); color: #fff; } /* Bootstrap's own outline-warning is light amber text on white, which is almost unreadable. Use the ink shade instead. */ .btn-outline-warning { color: var(--csm-warning-ink); border-color: var(--csm-warning-tint); background-color: var(--csm-warning-softer); } .btn-outline-warning:hover, .btn-outline-warning:focus, .btn-outline-warning:active { background-color: var(--csm-warning); border-color: var(--csm-warning-dark); color: #fff; } .btn-outline-info { color: var(--csm-info-ink); border-color: var(--csm-info-tint); background-color: var(--csm-info-softer); } .btn-outline-info:hover, .btn-outline-info:focus, .btn-outline-info:active { background-color: var(--csm-info); border-color: var(--csm-info-dark); color: #fff; } .btn-dark { color: #fff; background-color: #33405a; background-image: linear-gradient(180deg, #3b4965 0%, #26314a 100%); border-color: #26314a; } .btn-dark:hover, .btn-dark:focus, .btn-dark:active { color: #fff; background-color: #26314a; background-image: linear-gradient(180deg, #2f3b54 0%, #1c2437 100%); border-color: #1c2437; } .btn-outline-dark { color: #2c3541; border-color: var(--csm-border-strong); background-color: var(--csm-surface); } .btn-outline-dark:hover, .btn-outline-dark:focus, .btn-outline-dark:active { background-color: #33405a; border-color: #26314a; color: #fff; } .btn-light { background-color: var(--csm-surface-2); border-color: var(--csm-border); color: var(--csm-text); } .btn-light:hover, .btn-light:focus { background-color: var(--csm-surface-3); border-color: var(--csm-border-strong); } .btn-link { color: var(--csm-primary); font-weight: 600; box-shadow: none; } .btn:disabled, .btn.disabled { opacity: 0.55; box-shadow: none; background-image: none; } .btn .spinner-border-sm { width: 0.85rem; height: 0.85rem; } .btn-group > .btn { border-radius: var(--csm-radius-sm); } /* --------------------------------------------------------------------- 12. DataTables integration --------------------------------------------------------------------- */ div.dt-container { font-size: var(--csm-table-font-size); } div.dt-container .dt-layout-row { align-items: center; } div.dt-container .dt-length, div.dt-container .dt-search, div.dt-container .dt-info, div.dt-container .dt-paging { font-size: var(--csm-font-size-sm); color: var(--csm-text-muted); } div.dt-container .dt-length select, div.dt-container .dt-search input { min-height: calc(var(--csm-control-height) - 4px); font-size: var(--csm-font-size-sm); display: inline-block; width: auto; border-radius: var(--csm-radius-sm); border-color: var(--csm-border-strong); } div.dt-container .dt-buttons .btn { font-size: var(--csm-font-size-sm); min-height: calc(var(--csm-control-height) - 4px); padding: 0.2rem 0.65rem; } div.dt-container .dt-paging .page-link { font-size: var(--csm-font-size-sm); padding: 0.25rem 0.6rem; color: var(--csm-primary-ink); border-color: var(--csm-border); } div.dt-container .dt-paging .page-item.active .page-link { background-color: var(--csm-primary); background-image: linear-gradient(180deg, var(--csm-primary), var(--csm-primary-dark)); border-color: var(--csm-primary-dark); color: #fff; } div.dt-container .dt-paging .page-link:hover { background-color: var(--csm-primary-soft); border-color: var(--csm-primary-tint); } table.dataTable > tbody > tr.selected > * { box-shadow: inset 0 0 0 9999px var(--csm-primary-soft); color: var(--csm-text); } table.dataTable thead > tr > th.dt-orderable-asc, table.dataTable thead > tr > th.dt-orderable-desc { cursor: pointer; } table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before { background-color: var(--csm-primary); } /* Empty / loading states */ .empty-state { text-align: center; padding: 2.25rem 1rem; color: var(--csm-text-muted); font-size: var(--csm-font-size-sm); } .empty-state .bi { font-size: 1.6rem; display: inline-flex; align-items: center; justify-content: center; width: 3.1rem; height: 3.1rem; margin: 0 auto 0.65rem; border-radius: 50%; background-image: linear-gradient(135deg, var(--csm-primary-soft), var(--csm-primary-softer)); color: var(--csm-primary); opacity: 1; } .skeleton { background: linear-gradient(90deg, var(--csm-surface-3) 25%, #e4eaf2 37%, var(--csm-surface-3) 63%); background-size: 400% 100%; animation: csm-skeleton 1.2s ease infinite; border-radius: var(--csm-radius-sm); min-height: 0.9rem; } @keyframes csm-skeleton { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } .loading-overlay { position: absolute; inset: 0; background: rgba(255, 255, 255, 0.72); display: flex; align-items: center; justify-content: center; z-index: 5; border-radius: var(--csm-radius); } /* --------------------------------------------------------------------- 13. Badges, tabs, alerts, dropdowns ----------------------------------------------------------------- status_badge() emits .badge.text-bg-{variant}. Solid saturated blocks are heavy in dense tables, so each variant is a soft tint with a strong ink colour - still readable, never colour-only because the label text is always rendered. --------------------------------------------------------------------- */ .badge { font-size: var(--csm-font-size-xs); font-weight: 700; letter-spacing: 0.03em; padding: 0.32em 0.62em; border-radius: var(--csm-radius-pill); vertical-align: baseline; } .badge.text-bg-success { background-color: var(--csm-success-soft) !important; color: var(--csm-success-ink) !important; box-shadow: inset 0 0 0 1px var(--csm-success-tint); } .badge.text-bg-warning { background-color: var(--csm-warning-soft) !important; color: var(--csm-warning-ink) !important; box-shadow: inset 0 0 0 1px var(--csm-warning-tint); } .badge.text-bg-danger { background-color: var(--csm-danger-soft) !important; color: var(--csm-danger-ink) !important; box-shadow: inset 0 0 0 1px var(--csm-danger-tint); } .badge.text-bg-info { background-color: var(--csm-info-soft) !important; color: var(--csm-info-ink) !important; box-shadow: inset 0 0 0 1px var(--csm-info-tint); } .badge.text-bg-primary { background-color: var(--csm-primary-soft) !important; color: var(--csm-primary-ink) !important; box-shadow: inset 0 0 0 1px var(--csm-primary-tint); } .badge.text-bg-secondary { background-color: var(--csm-surface-3) !important; color: var(--csm-secondary-ink) !important; box-shadow: inset 0 0 0 1px var(--csm-border-strong); } .badge.text-bg-light { background-color: var(--csm-surface-2) !important; color: var(--csm-text) !important; box-shadow: inset 0 0 0 1px var(--csm-border); } .badge.text-bg-dark { background-color: #33405a !important; color: #fff !important; } .nav-tabs { --bs-nav-tabs-border-color: var(--csm-border); font-size: var(--csm-font-size); flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; margin-bottom: var(--csm-gap); } .nav-tabs .nav-link { padding: calc(var(--csm-control-padding-y) + 0.15rem) 0.9rem; white-space: nowrap; color: var(--csm-text-muted); font-weight: 600; border: 0; border-bottom: 2px solid transparent; border-radius: var(--csm-radius-sm) var(--csm-radius-sm) 0 0; background: transparent; /* Sit the 2px indicator on top of the container's 1px rule so the active tab reads as one line, not two. */ margin-bottom: -1px; } .nav-tabs .nav-link:hover { color: var(--csm-primary); background: var(--csm-primary-softer); border-bottom-color: var(--csm-primary-tint); isolation: unset; } .nav-tabs .nav-link.active { color: var(--csm-primary-ink); background: var(--csm-primary-softer); border-bottom-color: var(--csm-primary); } .nav-pills .nav-link { border-radius: var(--csm-radius-sm); color: var(--csm-text); font-weight: 600; } /* Colour and background declared together, so neither can be changed later without the other and leave the label invisible. */ .nav-pills .nav-link.active { color: #fff; background-color: var(--csm-primary); background-image: linear-gradient(180deg, var(--csm-primary), var(--csm-primary-dark)); } .modal-content { border: 0; border-radius: var(--csm-radius); box-shadow: var(--csm-shadow-lg); } .modal-header { padding: var(--csm-card-padding); border-color: var(--csm-border); background-image: linear-gradient(180deg, var(--csm-primary-softer) 0%, var(--csm-surface) 100%); border-top-left-radius: var(--csm-radius); border-top-right-radius: var(--csm-radius); } .modal-footer { padding: var(--csm-card-padding); border-color: var(--csm-border); background: var(--csm-surface-2); border-bottom-left-radius: var(--csm-radius); border-bottom-right-radius: var(--csm-radius); } .modal-body { padding: var(--csm-card-padding); } .modal-title { font-size: var(--csm-font-size-lg); font-weight: 600; color: var(--csm-primary-ink); } .alert { font-size: var(--csm-font-size); padding: calc(var(--csm-control-padding-y) + 0.25rem) var(--csm-control-padding-x); border-radius: var(--csm-radius-sm); border-width: 1px; border-left-width: 4px; margin-bottom: var(--csm-gap); box-shadow: var(--csm-shadow-sm); } .alert-success { color: var(--csm-success-ink); background-color: var(--csm-success-soft); border-color: var(--csm-success-tint); border-left-color: var(--csm-success); } .alert-danger { color: var(--csm-danger-ink); background-color: var(--csm-danger-soft); border-color: var(--csm-danger-tint); border-left-color: var(--csm-danger); } .alert-warning { color: var(--csm-warning-ink); background-color: var(--csm-warning-soft); border-color: var(--csm-warning-tint); border-left-color: var(--csm-warning); } .alert-info { color: var(--csm-info-ink); background-color: var(--csm-info-soft); border-color: var(--csm-info-tint); border-left-color: var(--csm-info); } .dropdown-menu { font-size: var(--csm-font-size); border-color: var(--csm-border); box-shadow: var(--csm-shadow-md); border-radius: var(--csm-radius); padding: 0.35rem; } .dropdown-item { padding: 0.4rem 0.7rem; border-radius: var(--csm-radius-sm); display: flex; align-items: center; gap: 0.5rem; } .dropdown-item:hover, .dropdown-item:focus { background-color: var(--csm-primary-softer); color: var(--csm-primary-ink); } .dropdown-item:active, .dropdown-item.active { background-color: var(--csm-primary); color: #fff; } .dropdown-item .bi { color: var(--csm-primary); } .dropdown-item.active .bi, .dropdown-item:active .bi { color: #fff; } .dropdown-item.text-danger .bi { color: var(--csm-danger); } .dropdown-header { font-size: var(--csm-font-size-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--csm-text-muted); padding: 0.35rem 0.7rem; } .dropdown-divider { border-color: var(--csm-border); margin: 0.3rem 0; } .progress { background-color: var(--csm-surface-3); border-radius: var(--csm-radius-pill); } .progress-bar { background-color: var(--csm-primary); background-image: linear-gradient(90deg, var(--csm-primary), var(--csm-info)); } .avatar { width: var(--csm-control-height); height: var(--csm-control-height); border-radius: 50%; object-fit: cover; background: var(--csm-surface-3); flex: 0 0 auto; } .avatar-initials { display: inline-flex; align-items: center; justify-content: center; font-size: var(--csm-font-size-sm); font-weight: 700; color: #fff; background-color: var(--csm-primary); background-image: linear-gradient(135deg, var(--csm-primary), var(--csm-primary-dark)); letter-spacing: 0.01em; } .avatar-lg { width: 84px; height: 84px; font-size: calc(var(--csm-font-size) * 1.6); } /* Profile summary strip */ .profile-strip { display: flex; gap: var(--csm-gap); flex-wrap: wrap; align-items: center; } .profile-strip__meta dt { font-size: var(--csm-font-size-xs); color: var(--csm-text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; } .profile-strip__meta dd { font-size: var(--csm-font-size); margin-bottom: 0.35rem; font-weight: 600; color: var(--csm-heading); } /* --------------------------------------------------------------------- 14. Login --------------------------------------------------------------------- */ .auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem; background-color: #0d1526; background-image: radial-gradient(1100px 520px at 12% -10%, rgba(var(--csm-primary-rgb), 0.55) 0%, transparent 62%), radial-gradient(900px 480px at 100% 110%, rgba(var(--csm-info-rgb), 0.45) 0%, transparent 60%), linear-gradient(150deg, #0d1526 0%, #16233d 55%, #0b1220 100%); } .auth-card { width: 100%; max-width: 420px; background: var(--csm-surface); border-radius: 16px; box-shadow: var(--csm-shadow-lg); padding: 1.85rem; border-top: 3px solid var(--csm-primary); } .auth-card__brand { text-align: center; margin-bottom: 1.35rem; } .auth-card__brand img { max-height: 62px; margin-bottom: 0.6rem; } .auth-card__brand h1 { font-size: calc(var(--csm-font-size) * 1.35); font-weight: 650; margin: 0; } .auth-card__brand p { font-size: var(--csm-font-size-sm); color: var(--csm-text-muted); margin: 0.2rem 0 0; } /* --------------------------------------------------------------------- 15. Student / staff profile blocks --------------------------------------------------------------------- */ /* Initial-letter stand-in when a student has no photo on record. */ .avatar-fallback { display: inline-flex; align-items: center; justify-content: center; width: var(--icon-lg, 34px); height: var(--icon-lg, 34px); border-radius: var(--csm-radius-sm); background: var(--csm-primary-soft); color: var(--csm-primary-ink); font-weight: 700; font-size: var(--csm-font-size-sm); line-height: 1; flex: 0 0 auto; } .profile-header { display: flex; flex-wrap: wrap; gap: var(--csm-gap); align-items: flex-start; } /* The person's name is the identity of the whole screen, so it gets more presence than the .h5 the views author it as. */ .profile-header > div > h2, .profile-header > div > h2.h5 { font-size: calc(var(--csm-font-size) * 1.28); font-weight: 650; letter-spacing: -0.018em; display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; } .profile-header__photo { width: 96px; height: 112px; object-fit: cover; border-radius: var(--csm-radius-sm); border: 1px solid var(--csm-border); background: var(--csm-surface-2); box-shadow: var(--csm-shadow-sm); flex: 0 0 auto; } .profile-header__photo--empty { display: flex; align-items: center; justify-content: center; font-size: 2rem; font-weight: 700; color: var(--csm-primary-ink); background-image: linear-gradient(135deg, var(--csm-primary-soft), var(--csm-primary-softer)); } /* Attendance marking register: keep the status buttons compact. */ .attendance-status { display: flex; flex-wrap: wrap; gap: 0.25rem; } .attendance-status .btn-check + .btn { padding: 0.14rem 0.5rem; font-size: var(--csm-font-size-xs); } /* --------------------------------------------------------------------- 16. Responsive ----------------------------------------------------------------- The sidebar is the app's main colour anchor and its only navigation, so it stays on screen down to 768px and only becomes a drawer below that. App.sidebar in app.js uses the same 768px threshold. --------------------------------------------------------------------- */ @media (min-width: 768px) and (max-width: 1199.98px) { :root { --csm-sidebar-width: 214px; } html[data-density="comfortable"] { --csm-sidebar-width: 232px; } } @media (max-width: 767.98px) { .app-sidebar { transform: translateX(-100%); box-shadow: var(--csm-shadow-lg); } .app--sidebar-open .app-sidebar { transform: translateX(0); } .app-main, .app--sidebar-collapsed .app-main { margin-left: 0; } /* A collapsed rail makes no sense once the sidebar is a drawer */ .app--sidebar-collapsed .app-sidebar { width: var(--csm-sidebar-width); } .app--sidebar-collapsed .app-sidebar__brand-text, .app--sidebar-collapsed .app-nav-link__label, .app--sidebar-collapsed .app-nav-link__caret, .app--sidebar-collapsed .app-sidebar__section, .app--sidebar-collapsed .app-nav-badge { display: revert; } .app--sidebar-collapsed .app-nav-link { justify-content: flex-start; padding-left: 0.6rem; padding-right: 0.6rem; gap: 0.65rem; } .app--sidebar-collapsed .app-sidebar__brand { justify-content: flex-start; padding: 0 0.9rem; } .app-sidebar-backdrop { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.5); z-index: 1035; } .app-content { padding: var(--csm-gap) 0.75rem 2rem; } .page-header__actions { width: 100%; } .page-header__actions .btn { flex: 1 1 auto; } } @media (max-width: 575.98px) { .app-topbar__title { font-size: var(--csm-font-size); } .session-pill { display: none; } .filter-panel__grid { grid-template-columns: 1fr; } .detail-grid { grid-template-columns: 1fr; } /* Stacked card view for wide tables on phones */ .table-stack thead { display: none; } .table-stack tbody tr, .table-stack > tbody > tr:nth-of-type(even) > td { background: var(--csm-surface); } .table-stack tbody tr { display: block; border: 1px solid var(--csm-border); border-left: 3px solid var(--csm-primary-tint); border-radius: var(--csm-radius-sm); margin-bottom: 0.6rem; padding: 0.4rem 0.6rem; } .table-stack tbody td { display: flex; justify-content: space-between; gap: 0.75rem; border: 0; padding: 0.25rem 0; } .table-stack tbody td::before { content: attr(data-label); font-weight: 700; font-size: var(--csm-font-size-sm); color: var(--csm-text-muted); } } /* Respect reduced-motion, but leave .collapsing alone so Bootstrap's collapse callbacks still fire on the sidebar submenus. */ @media (prefers-reduced-motion: reduce) { *:not(.collapsing) { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } /* --------------------------------------------------------------------- 17. Print / PDF Print output stays sized for paper regardless of screen density and drops the decorative gradients so nothing wastes toner. --------------------------------------------------------------------- */ @media print { :root { --csm-font-size: 12px; --csm-font-size-sm: 10.5px; --csm-font-size-xs: 9.5px; --csm-table-font-size: 11px; --csm-table-cell-y: 0.2rem; --csm-table-cell-x: 0.35rem; --csm-tile-padding: 0.35rem 0.5rem; --csm-card-padding: 0.35rem 0.5rem; --csm-section-gap: 0.5rem; } .app-sidebar, .app-topbar, .app-footer, .page-header__actions, .filter-panel, .profile-tabs, #section-nav, .no-print, div.dt-container .dt-length, div.dt-container .dt-search, div.dt-container .dt-buttons, div.dt-container .dt-paging { display: none !important; } body { background: #fff; background-image: none; } .app-main { margin-left: 0 !important; } .app-content { padding: 0 !important; } .page-header::after { display: none; } .card, .balance-card, .stat-card, .filter-panel { border: 1px solid #cbd5e1; box-shadow: none; background-image: none; margin-bottom: 0.5rem; break-inside: avoid; } .card { border: 0; } .card-header, .modal-header { background-image: none; } .balance-card::before, .stat-card::before { display: none; } .stat-card__icon { background-image: none; background-color: #f1f5f9; color: #334155; box-shadow: none; } .detail-grid > div { background: #fff; border-color: #cbd5e1; break-inside: avoid; } .table > tbody > tr:nth-of-type(even) > td, .table > tbody > tr:nth-of-type(even) > th { background-color: #fff; } .table > thead { background-color: #f1f5f9 !important; } .badge { box-shadow: none !important; border: 1px solid #94a3b8; } .btn { background-image: none !important; box-shadow: none !important; } a[href]::after { content: ""; } }