/*
* TIPA staff admin: shared look for the redesigned screens (student 360, students list,
* dashboard, exam readiness, missing invoices). Loaded after the Skote theme by
* layouts/admin.blade.php. Components are scoped to .tp-* / .s360-* classes, so older
* screens keep their markup.
*
* Design system v2 (2026-10, the approved mockup public/mockups/admin-theme.html) is at the
* end of this file. It is mobile first: base rules are the phone, @media (min-width: 768px)
* adds tablet and desktop. The layout puts body.tp-admin on every page; the only global
* change that reaches legacy Skote markup is the brand colour bridge (indigo #556ee6 ->
* #2563C9 on primary buttons, links, checks, pills, pagination). .badge is left alone.
*
* Tokens echo the student app: brand #4286EF, ink #1D2733, muted #5E6B7A, line #E3E8EF,
* canvas #F5F7FB. #4286EF is 3.6:1 on white, so it is used for accents, borders and the
* focus ring; text and filled buttons use --tp-brand-strong (5.7:1).
*
* This file (assets/, in git) is what production serves: it serves the project root. Herd
* serves public/, which is gitignored; for local dev copy this file to public/assets/css/
* (tests/Feature/AdminUiAssetsTest.php checks the copy is current).
*/
:root {
--tp-brand: #4286EF;
--tp-brand-strong: #2563C9;
--tp-brand-soft: #EAF2FE;
--tp-ink: #1D2733;
--tp-muted: #5E6B7A;
--tp-line: #E3E8EF;
--tp-canvas: #F5F7FB;
--tp-surface: #FFFFFF;
--tp-success: #1E7B4F;
--tp-success-soft: #E6F4EC;
--tp-danger: #B42318;
--tp-danger-soft: #FDECEA;
--tp-warning: #8A5A00;
--tp-warning-soft: #FFF4DB;
--tp-neutral: #3A4654;
--tp-neutral-soft: #EEF1F5;
/* 8px scale (s0 is the half step) */
--tp-s0: 4px;
--tp-s1: 8px;
--tp-s2: 16px;
--tp-s3: 24px;
--tp-s4: 32px;
--tp-s5: 48px;
--tp-r-sm: 8px;
--tp-r-lg: 12px;
--tp-shadow: 0 1px 2px rgba(29, 39, 51, .06), 0 1px 3px rgba(29, 39, 51, .08);
--tp-target: 44px;
/* Height of the sticky top bar (+ the horizontal menu from 768px up): what sticky page
headers sit under. */
--tp-sticky-top: 56px;
}
@media (min-width: 768px) {
:root { --tp-sticky-top: 107px; }
}
/* ---------- page ---------- */
.tp-page {
color: var(--tp-ink);
font-size: 14px;
line-height: 1.5;
}
.page-content:has(.tp-page) { background: var(--tp-canvas); }
.tp-page a:not(.btn):not(.tp-btn):not(.tp-chip):not(.dropdown-item):not(.nav-link):not(.page-link) { color: var(--tp-brand-strong); }
.tp-page .btn-primary { background: var(--tp-brand-strong); border-color: var(--tp-brand-strong); color: #fff; }
.tp-page .btn-primary:hover { background: #1F57B3; border-color: #1F57B3; color: #fff; }
.tp-page .page-item.active .page-link { background: var(--tp-brand-strong); border-color: var(--tp-brand-strong); }
.tp-page a.tp-btn, .tp-page a.tp-chip { color: var(--tp-ink); }
.tp-page .tp-table .tp-cell-name > div > div > a { color: var(--tp-ink); }
.tp-page a.tp-btn--primary, .tp-page a.tp-btn--primary:hover { color: #fff; }
.tp-page a.tp-chip.is-active { color: var(--tp-brand-strong); }
.tp-page .text-muted, .tp-muted { color: var(--tp-muted) !important; }
.tp-page h1, .tp-page h2, .tp-page h3, .tp-page h4, .tp-page h5 { color: var(--tp-ink); }
.tp-page :focus-visible,
.tp-offcanvas :focus-visible {
outline: 3px solid var(--tp-brand);
outline-offset: 2px;
border-radius: 4px;
}
.tp-page-title {
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
gap: var(--tp-s2); margin-bottom: var(--tp-s3);
}
.tp-page-title h1 { font-size: 20px; font-weight: 600; margin: 0; }
.tp-page-title p { margin: var(--tp-s0) 0 0; color: var(--tp-muted); }
/* ---------- cards ---------- */
.tp-card {
background: var(--tp-surface);
border: 1px solid var(--tp-line);
border-radius: var(--tp-r-lg);
box-shadow: var(--tp-shadow);
padding: var(--tp-s3);
margin-bottom: var(--tp-s3);
}
.tp-card--flush { padding: 0; }
.tp-card__head {
min-height: var(--tp-target);
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
gap: var(--tp-s1); margin-bottom: var(--tp-s2);
}
.tp-card__title { font-size: 16px; font-weight: 600; margin: 0; color: var(--tp-ink); }
.tp-card__sub { color: var(--tp-muted); font-size: 13px; margin: 0; }
.tp-empty { color: var(--tp-muted); margin: 0; }
.tp-grid {
display: grid; gap: var(--tp-s3);
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
align-items: start;
}
.tp-grid > .tp-card { margin-bottom: 0; }
.tp-grid > div > .tp-card:last-child { margin-bottom: 0; }
.tp-grid--wide > .tp-card--span { grid-column: 1 / -1; }
/* key figures */
.tp-stats { display: grid; gap: var(--tp-s2); grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.tp-stat__label { font-size: 12px; color: var(--tp-muted); margin-bottom: 2px; }
.tp-stat__value { font-size: 18px; font-weight: 600; color: var(--tp-ink); font-variant-numeric: tabular-nums; }
.tp-stat__value--danger { color: var(--tp-danger); }
.tp-stat__value--success { color: var(--tp-success); }
.tp-stat__note { font-size: 12px; color: var(--tp-muted); }
/* read-only field list */
.tp-dl { display: grid; grid-template-columns: minmax(120px, 38%) 1fr; gap: var(--tp-s1) var(--tp-s2); margin: 0; }
.tp-dl dt { font-weight: 400; color: var(--tp-muted); }
.tp-dl dd { margin: 0; color: var(--tp-ink); overflow-wrap: anywhere; }
@media (max-width: 575.98px) {
.tp-dl { grid-template-columns: 1fr; gap: 0; }
.tp-dl dd { margin-bottom: var(--tp-s1); }
}
/* progress bar */
.tp-meter { height: 8px; background: var(--tp-neutral-soft); border-radius: 999px; overflow: hidden; }
.tp-meter > span { display: block; height: 100%; background: var(--tp-brand); border-radius: 999px; }
/* Legacy Skote cards inside a restyled page take the same surface. */
.tp-page .card { border: 1px solid var(--tp-line); border-radius: var(--tp-r-lg); box-shadow: var(--tp-shadow); }
.tp-page .card .card-title, .tp-page .card h5 { color: var(--tp-ink); font-weight: 600; }
.tp-page .card .text-muted { color: var(--tp-muted) !important; }
.tp-page .page-title-box h4 { font-size: 20px; font-weight: 600; color: var(--tp-ink); text-transform: none; }
/* ---------- badges ---------- */
.tp-badge {
display: inline-flex; align-items: center; gap: var(--tp-s0);
padding: 2px 10px; border-radius: 999px;
font-size: 12px; font-weight: 600; line-height: 20px; white-space: nowrap;
background: var(--tp-neutral-soft); color: var(--tp-neutral);
}
.tp-badge--success { background: var(--tp-success-soft); color: var(--tp-success); }
.tp-badge--danger { background: var(--tp-danger-soft); color: var(--tp-danger); }
.tp-badge--warning { background: var(--tp-warning-soft); color: var(--tp-warning); }
.tp-badge--info { background: var(--tp-brand-soft); color: var(--tp-brand-strong); }
/* ---------- buttons ---------- */
.tp-btn {
display: inline-flex; align-items: center; justify-content: center; gap: var(--tp-s1); white-space: nowrap;
min-height: var(--tp-target); padding: 0 var(--tp-s2);
border-radius: var(--tp-r-sm); border: 1px solid var(--tp-line);
background: var(--tp-surface); color: var(--tp-ink);
font-weight: 600; font-size: 14px; line-height: 1; text-decoration: none; cursor: pointer;
}
.tp-btn:hover { background: var(--tp-canvas); color: var(--tp-ink); }
.tp-btn--primary { background: var(--tp-brand-strong); border-color: var(--tp-brand-strong); color: #fff; }
.tp-btn--primary:hover { background: #1F57B3; border-color: #1F57B3; color: #fff; }
.tp-btn--sm { min-height: 36px; padding: 0 12px; font-size: 13px; }
.tp-btn[disabled], .tp-btn.is-disabled { opacity: .55; cursor: not-allowed; }
.tp-link-btn { display: inline-flex; align-items: center; background: none; border: 0; padding: 0; color: var(--tp-brand-strong); font-weight: 600; cursor: pointer; min-height: var(--tp-target); text-decoration: none; }
.tp-link-btn:hover { text-decoration: underline; }
/* The legacy forms inside our cards: give them the same rhythm and target size. */
.tp-page .form-control, .tp-page .form-select { min-height: 40px; border-color: var(--tp-line); border-radius: var(--tp-r-sm); }
.tp-page .form-control:focus, .tp-page .form-select:focus { border-color: var(--tp-brand); box-shadow: 0 0 0 3px rgba(66, 134, 239, .25); }
.tp-page .table { color: var(--tp-ink); }
.tp-page .table > thead.table-dark > tr > th,
.tp-page .table > thead > tr > th { background: var(--tp-canvas); color: var(--tp-muted); font-weight: 600; font-size: 12px; border-color: var(--tp-line); }
/* ---------- tables (lists) ---------- */
.tp-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.tp-table th {
font-size: 12px; font-weight: 600; color: var(--tp-muted); text-align: left;
padding: 10px; background: var(--tp-canvas); border-bottom: 1px solid var(--tp-line); white-space: nowrap;
}
.tp-table td { padding: 10px; border-bottom: 1px solid var(--tp-line); vertical-align: top; }
.tp-table tr:last-child td { border-bottom: 0; }
.tp-table tbody tr:hover td { background: #FAFBFD; }
.tp-table .tp-cell-name a { font-weight: 600; color: var(--tp-ink); white-space: nowrap; }
.tp-table .tp-cell-name .tp-cell-sub a { font-weight: 400; color: var(--tp-muted); }
.tp-table .tp-cell-sub { color: var(--tp-muted); font-size: 12px; }
.tp-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* ---------- chips (quick filters) ---------- */
.tp-chips { display: flex; flex-wrap: wrap; gap: var(--tp-s1); }
.tp-chip {
display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px;
border: 1px solid var(--tp-line); border-radius: 999px; background: var(--tp-surface);
color: var(--tp-ink); font-weight: 600; font-size: 13px; text-decoration: none;
}
.tp-chip:hover { border-color: var(--tp-brand); color: var(--tp-ink); }
.tp-chip.is-active { background: var(--tp-brand-soft); border-color: var(--tp-brand); color: var(--tp-brand-strong); }
/* ---------- student 360 header ---------- */
/* Skote sets overflow:hidden on .main-content, which disables position:sticky; clip keeps the
clipping without making it a scroll container. */
.main-content:has(.s360-header) { overflow: clip; }
/* The fixed menu has top:auto; pin it so the page below cannot shift its static position. */
body:has(.s360-header) .topnav { top: 0; }
.s360-header {
position: sticky; top: var(--tp-sticky-top); z-index: 20;
background: var(--tp-surface); border: 1px solid var(--tp-line); border-radius: var(--tp-r-lg);
box-shadow: var(--tp-shadow); padding: var(--tp-s2) var(--tp-s3); margin-bottom: var(--tp-s2);
display: flex; flex-wrap: wrap; gap: var(--tp-s2); align-items: center;
}
.s360-id { display: flex; gap: var(--tp-s2); align-items: center; min-width: 0; flex: 1 1 380px; }
.s360-avatar {
width: 56px; height: 56px; border-radius: 50%; flex: none; object-fit: cover;
background: var(--tp-brand-soft); color: var(--tp-brand-strong);
display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 20px;
}
.s360-name { font-size: 20px; font-weight: 600; margin: 0; line-height: 1.25; }
.s360-meta { display: flex; flex-wrap: wrap; gap: 2px var(--tp-s2); color: var(--tp-muted); font-size: 13px; margin-top: 2px; }
.s360-meta a { color: var(--tp-brand-strong); display: inline-flex; align-items: center; gap: 4px; min-height: 28px; }
.s360-badges { display: flex; flex-wrap: wrap; gap: var(--tp-s1); margin-top: var(--tp-s1); }
/* Once stuck under the menu the header drops the contact line and shrinks the photo. */
.s360-header.is-stuck { padding-top: var(--tp-s1); padding-bottom: var(--tp-s1); }
.s360-header.is-stuck .s360-meta { display: none; }
.s360-header.is-stuck .s360-avatar { width: 40px; height: 40px; font-size: 16px; }
.s360-header.is-stuck .s360-name { font-size: 17px; }
.s360-header.is-stuck .s360-badges { margin-top: 2px; }
.s360-actions { display: flex; flex-wrap: wrap; gap: var(--tp-s1); align-items: center; }
.s360-actions .dropdown-menu { border-radius: var(--tp-r-sm); border-color: var(--tp-line); box-shadow: var(--tp-shadow); }
.s360-actions .dropdown-item { min-height: var(--tp-target); display: flex; align-items: center; gap: var(--tp-s1); }
/* ---------- tabs ---------- */
.s360-tabs {
display: flex; flex-wrap: nowrap; gap: var(--tp-s0); overflow-x: auto; overflow-y: hidden; scrollbar-width: thin;
border-bottom: 1px solid var(--tp-line); margin-bottom: var(--tp-s3); padding: 0; list-style: none;
}
.s360-tabs .nav-link {
min-height: var(--tp-target); padding: 0 var(--tp-s2); display: flex; align-items: center; white-space: nowrap;
border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: none;
color: var(--tp-muted); font-weight: 600;
}
.s360-tabs .nav-link:hover { color: var(--tp-ink); }
.s360-tabs .nav-link.active { color: var(--tp-brand-strong); border-bottom-color: var(--tp-brand); background: none; }
/* Deep links (#fee, #address, ...) and scrolled-to cards must clear the sticky header. */
.s360-section, .s360 .tp-card[id] { scroll-margin-top: calc(var(--tp-sticky-top) + 140px); }
.s360-section + .s360-section { margin-top: var(--tp-s3); }
/* ---------- activity timeline ---------- */
.tp-timeline { list-style: none; margin: 0; padding: 0; }
.tp-timeline li { display: grid; grid-template-columns: 32px 1fr auto; gap: var(--tp-s1) 12px; padding: 10px 0; border-bottom: 1px solid var(--tp-line); }
.tp-timeline li:last-child { border-bottom: 0; }
.tp-timeline__icon {
width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
background: var(--tp-neutral-soft); color: var(--tp-neutral); font-size: 16px;
}
.tp-timeline__icon--payment { background: var(--tp-success-soft); color: var(--tp-success); }
.tp-timeline__icon--exam { background: var(--tp-brand-soft); color: var(--tp-brand-strong); }
.tp-timeline__icon--absent { background: var(--tp-danger-soft); color: var(--tp-danger); }
.tp-timeline__when { color: var(--tp-muted); font-size: 12px; white-space: nowrap; }
/* ---------- next steps ---------- */
.tp-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--tp-s1); }
.tp-steps li { display: flex; gap: var(--tp-s1); align-items: flex-start; }
.tp-steps i { color: var(--tp-brand-strong); font-size: 18px; line-height: 20px; }
/* ---------- offcanvas edit panels ---------- */
/* The bundled Bootstrap JS is 5.0.1, which gives the offcanvas a .modal-backdrop; the 5.3 CSS
puts that at z-index 1050, above the offcanvas (1045). Sit between it and modals (1055). */
.tp-offcanvas.offcanvas-end { width: min(560px, 100vw); z-index: 1052; }
.tp-offcanvas .offcanvas-header { border-bottom: 1px solid var(--tp-line); padding: var(--tp-s2) var(--tp-s3); }
.tp-offcanvas .offcanvas-title { font-size: 18px; font-weight: 600; color: var(--tp-ink); }
.tp-offcanvas .offcanvas-body { padding: var(--tp-s3); color: var(--tp-ink); }
.tp-offcanvas .offcanvas-body .row > [class*="col-md-"] { flex: 0 0 100%; max-width: 100%; }
.tp-offcanvas .offcanvas-body .col-form-label { color: var(--tp-muted); padding-bottom: 2px; }
.tp-offcanvas .form-control, .tp-offcanvas .form-select { min-height: 40px; border-radius: var(--tp-r-sm); }
.tp-offcanvas .btn { min-height: var(--tp-target); }
.tp-offcanvas .select2 { width: 100% !important; }
.tp-offcanvas [style*="float:right"] { float: none !important; }
.tp-offcanvas .offcanvas-body .btn-success { width: 100%; margin-top: var(--tp-s1); }
@media (max-width: 767.98px) {
.s360-header { position: static; padding: var(--tp-s2); }
.tp-card { padding: var(--tp-s2); }
}
@media (prefers-reduced-motion: reduce) {
.tp-page *, .tp-offcanvas { transition: none !important; scroll-behavior: auto !important; }
}
/* ---------- employer candidate cards and page ---------- */
.tp-cand-list { display: grid; gap: var(--tp-s2); grid-template-columns: minmax(0, 1fr); }
.tp-cand__badges .tp-badge { white-space: normal; }
.tp-cand__id { overflow-wrap: anywhere; }
.tp-cand { background: var(--tp-surface); border: 1px solid var(--tp-line); border-radius: var(--tp-r-lg); box-shadow: var(--tp-shadow); padding: var(--tp-s3); }
.tp-cand--star { border-color: #E9B949; background: linear-gradient(180deg, var(--tp-warning-soft) 0, var(--tp-surface) 90px); }
.tp-cand__head { display: flex; gap: var(--tp-s2); align-items: flex-start; }
.tp-cand__avatar {
width: 64px; height: 64px; border-radius: 50%; flex: none; object-fit: cover; overflow: hidden;
background: var(--tp-brand-soft); color: var(--tp-brand-strong);
display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 22px;
}
.tp-cand__avatar { position: relative; }
.tp-cand__avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tp-cand__avatar--lg { width: 96px; height: 96px; font-size: 32px; }
.tp-cand__id { min-width: 0; flex: 1 1 auto; }
.tp-cand__name { font-size: 18px; font-weight: 600; margin: 0; line-height: 1.3; overflow-wrap: anywhere; }
.tp-cand__name a { color: var(--tp-ink) !important; text-decoration: none; }
.tp-cand__name a:hover { color: var(--tp-brand-strong) !important; text-decoration: underline; }
.tp-cand__meta { display: flex; flex-wrap: wrap; gap: 2px var(--tp-s2); margin-top: 4px; color: var(--tp-muted); font-size: 13px; }
.tp-cand__meta span { display: inline-flex; align-items: center; gap: 4px; }
.tp-cand__badges { display: flex; flex-wrap: wrap; gap: var(--tp-s1); margin-top: var(--tp-s1); }
.tp-cand__top-action { flex: none; }
.tp-cand__rows { margin: var(--tp-s2) 0 0; border-top: 1px solid var(--tp-line); }
.tp-cand__row { display: grid; grid-template-columns: 150px 1fr; gap: var(--tp-s1) var(--tp-s2); padding: 12px 0; border-bottom: 1px solid var(--tp-line); }
.tp-cand__row:last-child { border-bottom: 0; }
.tp-cand__label { color: var(--tp-muted); font-size: 13px; font-weight: 600; }
.tp-cand__value { min-width: 0; color: var(--tp-ink); overflow-wrap: anywhere; }
.tp-cand__strong { font-weight: 600; }
.tp-cand__sub { color: var(--tp-muted); font-size: 13px; }
.tp-cand__desc { color: var(--tp-neutral); font-size: 13px; margin-top: 2px; }
.tp-cand__desc--clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tp-cand__item + .tp-cand__item { margin-top: var(--tp-s2); }
.tp-cand__skills { display: flex; flex-wrap: wrap; gap: 6px; }
.tp-cand__skill { padding: 2px 10px; border-radius: 999px; border: 1px solid var(--tp-line); background: var(--tp-canvas); color: var(--tp-neutral); font-size: 13px; }
.tp-cand__foot { display: flex; flex-wrap: wrap; gap: var(--tp-s1) var(--tp-s2); align-items: center; justify-content: space-between; padding-top: var(--tp-s2); border-top: 1px solid var(--tp-line); }
.tp-cand__foot a.tp-cand__phone { color: var(--tp-brand-strong); display: inline-flex; align-items: center; gap: 6px; min-height: var(--tp-target); font-weight: 600; text-decoration: none; }
.tp-cand__actions { display: flex; flex-wrap: wrap; gap: var(--tp-s1); }
.tp-cand-filter .form-label { font-size: 12px; font-weight: 600; color: var(--tp-muted); margin-bottom: 4px; }
.tp-cand-count { color: var(--tp-muted); font-size: 14px; margin-bottom: var(--tp-s2); }
.tp-cand-count strong { color: var(--tp-ink); }
.tp-cand-empty { text-align: center; padding: var(--tp-s5) var(--tp-s2); color: var(--tp-muted); }
.tp-cand-empty i { font-size: 40px; display: block; margin-bottom: var(--tp-s1); }
.tp-cand-end, .tp-cand-more { text-align: center; color: var(--tp-muted); padding: var(--tp-s3) 0; }
@media (max-width: 575.98px) {
.tp-cand { padding: var(--tp-s2); }
.tp-cand__row { grid-template-columns: 1fr; gap: 2px; }
.tp-cand__head { flex-wrap: wrap; }
.tp-cand__top-action { width: 100%; }
.tp-cand__top-action .tp-btn { width: 100%; }
.tp-cand__avatar--lg { width: 72px; height: 72px; font-size: 26px; }
.tp-cand__actions, .tp-cand__actions .tp-btn { width: 100%; }
}
/* =====================================================================================
* DESIGN SYSTEM v2 (2026-10) - mobile first
*
* Source of truth: the approved mockup public/mockups/admin-theme.html. Base rules are the
* phone; the @media (min-width: 768px) block at the end adds tablet and desktop.
* chrome .tp-topbar, .tp-menu (desktop bar / phone "More" sheet), .tp-tabbar, .tp-fab
* page .tp-main, .tp-page-title (+ __actions, __primary), .tp-crumb
* badges .tp-badge--dot + .stage-* (App\Support\StudentStage) and .fee-*; .tp-delta
* controls .tp-btn--ghost / --icon, .tp-chips--scroll, .tp-search, .tp-fields
* filters .tp-filter (phone: search + chips + .tp-sheet; desktop: a card)
* data .tp-kpis / .tp-kpi, .tp-tablecard, .tp-table--cards (+ data-label cells),
* .tp-quick (Call / WhatsApp / Collect), .tp-bars, .tp-stagelist, .tp-empty-state
* Blade components for all of these live in resources/views/components/admin/.
* ===================================================================================== */
:root {
--tp-info: #1D5FBF;
--tp-info-soft: #E8F0FD;
--tp-slate: #334155;
--tp-slate-soft: #E2E8F0;
--tp-brand-hover: #1F57B3;
--tp-brand-active: #1A4C9E;
--tp-topbar-h: 56px;
--tp-tabbar-h: 64px;
--tp-r-md: 10px;
}
/* ---------- brand colour bridge for every page (legacy Skote markup included) ---------- */
body.tp-admin {
--bs-blue: #2563C9;
--bs-primary: #2563C9;
--bs-primary-rgb: 37, 99, 201;
--bs-link-color: #2563C9;
--bs-link-hover-color: #1F57B3;
/* room for the phone tab bar; removed from 768px up */
padding-bottom: calc(var(--tp-tabbar-h) + env(safe-area-inset-bottom, 0px));
}
.tp-admin .btn-primary {
--bs-btn-bg: var(--tp-brand-strong); --bs-btn-border-color: var(--tp-brand-strong);
--bs-btn-hover-bg: var(--tp-brand-hover); --bs-btn-hover-border-color: var(--tp-brand-hover);
--bs-btn-focus-shadow-rgb: 66, 134, 239;
--bs-btn-active-bg: var(--tp-brand-active); --bs-btn-active-border-color: var(--tp-brand-active);
--bs-btn-disabled-bg: var(--tp-brand-strong); --bs-btn-disabled-border-color: var(--tp-brand-strong);
}
.tp-admin .btn-outline-primary {
--bs-btn-color: var(--tp-brand-strong); --bs-btn-border-color: var(--tp-brand-strong);
--bs-btn-hover-bg: var(--tp-brand-strong); --bs-btn-hover-border-color: var(--tp-brand-strong);
--bs-btn-focus-shadow-rgb: 37, 99, 201;
--bs-btn-active-bg: var(--tp-brand-strong); --bs-btn-active-border-color: var(--tp-brand-strong);
--bs-btn-disabled-color: var(--tp-brand-strong); --bs-btn-disabled-border-color: var(--tp-brand-strong);
}
.tp-admin .btn-soft-primary { color: var(--tp-brand-strong); background-color: rgba(37, 99, 201, .1); }
.tp-admin .btn-soft-primary:hover, .tp-admin .btn-soft-primary:focus, .tp-admin .btn-soft-primary:active { color: #fff; background-color: var(--tp-brand-strong); }
.tp-admin .link-primary { color: var(--tp-brand-strong) !important; }
.tp-admin .form-check-input:checked,
.tp-admin .form-check-input[type=checkbox]:indeterminate { background-color: var(--tp-brand-strong); border-color: var(--tp-brand-strong); }
.tp-admin .nav-pills { --bs-nav-pills-link-active-bg: var(--tp-brand-strong); }
.tp-admin .nav-tabs-custom .nav-item .nav-link::after { background: var(--tp-brand-strong); }
.tp-admin .nav-tabs-custom .nav-item .nav-link.active { color: var(--tp-brand-strong); }
.tp-admin .pagination {
--bs-pagination-hover-color: var(--tp-brand-hover); --bs-pagination-focus-color: var(--tp-brand-hover);
--bs-pagination-focus-box-shadow: 0 0 0 .15rem rgba(37, 99, 201, .25);
--bs-pagination-active-bg: var(--tp-brand-strong); --bs-pagination-active-border-color: var(--tp-brand-strong);
}
.tp-admin .dropdown-item.active, .tp-admin .dropdown-item:active { background-color: var(--tp-brand-strong); color: #fff; }
/* Legacy pages keep their Skote content; the chrome above them is sticky now, not fixed. */
.tp-admin .main-content > .page-content { margin-top: 0; padding: var(--tp-s2) var(--tp-s2) var(--tp-s3); }
/* Wide screens use the width (owner, 2026-10-07: 1400px left big empty sides and squeezed the tables). */
.tp-admin .main-content > .page-content > .container-fluid { max-width: 1840px; margin: 0 auto; padding: 0; }
body.tp-sheet-open { overflow: hidden; }
/* Keyboard focus is always visible on the chrome and the new components. */
.tp-topbar :focus-visible, .tp-menu :focus-visible, .tp-tabbar :focus-visible, .tp-sheet :focus-visible,
.tp-fab:focus-visible, .tp-filter :focus-visible, .tp-tablecard :focus-visible, .tp-kpi:focus-visible {
outline: 3px solid var(--tp-brand);
outline-offset: 2px;
border-radius: 6px;
}
/* ---------- top bar ---------- */
.tp-topbar {
position: sticky; top: 0; z-index: 1002;
background: var(--tp-surface); border-bottom: 1px solid var(--tp-line);
padding-top: env(safe-area-inset-top, 0px);
}
.tp-topbar__row { display: flex; align-items: center; gap: 12px; height: var(--tp-topbar-h); padding: 0 var(--tp-s1) 0 var(--tp-s2); }
.tp-topbar__logo { display: inline-flex; align-items: center; min-height: var(--tp-target); flex: none; }
.tp-topbar__logo img { height: 28px; width: auto; }
.tp-topbar__search { display: none; position: relative; }
.tp-topbar__search i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 18px; color: var(--tp-muted); pointer-events: none; }
.tp-topbar__search input {
width: 100%; height: var(--tp-target); border: 1px solid var(--tp-line); border-radius: var(--tp-r-md);
padding: 0 12px 0 38px; background: var(--tp-canvas); color: var(--tp-ink); font-size: 14px;
}
.tp-topbar__search input:focus { outline: 3px solid var(--tp-brand); outline-offset: 0; background: var(--tp-surface); }
/* Phone: the search opens as a second row under the bar. */
.tp-topbar.is-searching .tp-topbar__search { display: block; padding: 0 var(--tp-s2) var(--tp-s1); }
.tp-topbar__me { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.tp-iconbtn {
position: relative; width: var(--tp-target); height: var(--tp-target); flex: none;
display: inline-flex; align-items: center; justify-content: center;
border: 0; border-radius: var(--tp-r-md); background: transparent; color: var(--tp-ink) !important;
font-size: 22px; line-height: 1; text-decoration: none; cursor: pointer; padding: 0;
}
.tp-iconbtn:hover, .tp-iconbtn[aria-expanded="true"] { background: var(--tp-neutral-soft); }
.tp-iconbtn .badge { position: absolute; top: 6px; right: 4px; font-size: 10px; }
.tp-iconbtn--desk { display: none; }
.tp-avatar {
width: 32px; height: 32px; border-radius: 50%; flex: none; overflow: hidden;
display: inline-flex; align-items: center; justify-content: center;
background: var(--tp-brand-soft); color: var(--tp-brand-strong); font-weight: 600; font-size: 12px; line-height: 1;
}
.tp-avatar img { width: 100%; height: 100%; object-fit: cover; }
.tp-avatar--lg { width: 48px; height: 48px; font-size: 16px; }
.tp-usermenu { min-width: 240px; padding: var(--tp-s1) 0; border-color: var(--tp-line); border-radius: var(--tp-r-md); box-shadow: var(--tp-shadow); }
.tp-usermenu__who { padding: var(--tp-s1) var(--tp-s2) 12px; border-bottom: 1px solid var(--tp-line); margin-bottom: var(--tp-s0); }
.tp-usermenu__who b { display: block; color: var(--tp-ink); font-weight: 600; }
.tp-usermenu__who span { color: var(--tp-muted); font-size: 12px; }
.tp-usermenu .dropdown-item { min-height: var(--tp-target); display: flex; align-items: center; gap: var(--tp-s1); font-size: 14px; color: var(--tp-ink); background: none; border: 0; width: 100%; }
.tp-usermenu .dropdown-item i { font-size: 18px; }
.tp-usermenu .dropdown-item:hover { background: var(--tp-canvas); }
.tp-usermenu .tp-usermenu__out { color: var(--tp-danger); }
.tp-notifications { width: min(360px, calc(100vw - 16px)); padding: 0; border-color: var(--tp-line); border-radius: var(--tp-r-md); box-shadow: var(--tp-shadow); }
.tp-notifications__head { padding: 12px var(--tp-s2); border-bottom: 1px solid var(--tp-line); font-weight: 600; color: var(--tp-ink); }
.tp-notifications__body { max-height: 320px; overflow-y: auto; }
/* ---------- main menu: the phone "More" sheet; a horizontal bar from 768px ---------- */
.tp-menu { display: none; position: fixed; inset: 0; z-index: 1040; }
.tp-menu.is-open { display: block; }
.tp-menu__scrim, .tp-sheet__scrim { position: absolute; inset: 0; background: rgba(15, 23, 42, .45); }
.tp-menu__panel, .tp-sheet__panel {
position: absolute; left: 0; right: 0; bottom: 0; max-height: 85vh; overflow-y: auto; overscroll-behavior: contain;
background: var(--tp-surface); border-radius: 16px 16px 0 0;
padding: var(--tp-s1) var(--tp-s2) calc(var(--tp-s2) + env(safe-area-inset-bottom, 0px));
color: var(--tp-ink); font-size: 14px;
}
.tp-sheet__grip { width: 40px; height: 4px; border-radius: 2px; background: var(--tp-line); margin: 4px auto 12px; }
.tp-menu__head, .tp-sheet__head { display: flex; justify-content: space-between; align-items: center; gap: var(--tp-s1); margin-bottom: var(--tp-s1); }
.tp-menu__head h2, .tp-sheet__head h2 { font-size: 16px; font-weight: 600; margin: 0; color: var(--tp-ink); }
.tp-menu__list, .tp-menu__sub { list-style: none; margin: 0; padding: 0; }
.tp-menu__item { border-bottom: 1px solid var(--tp-line); }
.tp-menu__item:last-child { border-bottom: 0; }
.tp-menu__link {
display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 0 var(--tp-s0);
border: 0; background: none; text-align: left; text-decoration: none;
color: var(--tp-ink) !important; font-weight: 500; font-size: 14px; cursor: pointer;
}
.tp-menu__link > i:first-child { font-size: 20px; color: var(--tp-muted); width: 22px; text-align: center; }
.tp-menu__link.is-active, .tp-menu__link.is-active > i:first-child { color: var(--tp-brand-strong) !important; }
.tp-menu__caret { display: none; }
/* On the phone every group is open: its toggle reads as a heading. */
.tp-menu__toggle { min-height: 40px; padding-top: var(--tp-s1); color: var(--tp-muted) !important; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; cursor: default; }
.tp-menu__sub { padding: 0 0 var(--tp-s1) 34px; }
.tp-menu__sublink {
display: flex; align-items: center; min-height: var(--tp-target); padding: 0 var(--tp-s0);
color: var(--tp-ink) !important; text-decoration: none; font-size: 14px; border-radius: var(--tp-r-sm);
}
.tp-menu__sublink:hover { background: var(--tp-canvas); }
.tp-menu__sublink.is-active { color: var(--tp-brand-strong) !important; font-weight: 600; background: var(--tp-brand-soft); }
/* ---------- bottom tab bar (phone) ---------- */
.tp-tabbar {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 1001;
display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
background: var(--tp-surface); border-top: 1px solid var(--tp-line);
padding-bottom: env(safe-area-inset-bottom, 0px);
}
.tp-tabbar__item {
height: var(--tp-tabbar-h); min-width: 0;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
border: 0; background: none; padding: 0 2px;
color: var(--tp-muted) !important; font-size: 11px; font-weight: 500; text-decoration: none; cursor: pointer;
}
.tp-tabbar__item i { font-size: 22px; }
.tp-tabbar__item span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-tabbar__item.is-active { color: var(--tp-brand-strong) !important; }
/* ---------- floating primary action (phone) ---------- */
.tp-fab {
position: fixed; right: var(--tp-s2); z-index: 1000;
bottom: calc(var(--tp-tabbar-h) + var(--tp-s2) + env(safe-area-inset-bottom, 0px));
height: 52px; padding: 0 20px; border-radius: 26px; border: 0;
display: inline-flex; align-items: center; gap: var(--tp-s1);
background: var(--tp-brand-strong); color: #fff !important; font-weight: 600; font-size: 14px; text-decoration: none;
box-shadow: 0 6px 16px rgba(37, 99, 201, .35);
}
.tp-fab i { font-size: 20px; }
.tp-fab:hover { background: var(--tp-brand-hover); }
/* Content can scroll clear of the FAB. */
.tp-page:has(.tp-fab) { padding-bottom: 72px; }
/* ---------- page head ---------- */
.tp-crumb { font-size: 12px; color: var(--tp-muted); margin-bottom: 2px; }
.tp-crumb a { color: var(--tp-muted) !important; text-decoration: none; }
.tp-crumb a:hover { text-decoration: underline; }
.tp-page-title { gap: 12px; margin-bottom: var(--tp-s2); }
.tp-page-title > div:first-child { min-width: 0; }
.tp-page-title__actions { display: flex; flex-wrap: wrap; gap: var(--tp-s1); align-items: center; }
.tp-page-title__primary { display: none; }
.tp-sub { font-size: 12px; color: var(--tp-muted); }
.tp-section-title { font-size: 15px; font-weight: 600; color: var(--tp-ink); margin: 0 0 var(--tp-s1); }
.tp-section-title span { color: var(--tp-muted); font-weight: 400; font-size: 13px; }
.tp-note { font-size: 12px; color: var(--tp-muted); margin: 0 0 var(--tp-s2); }
/* ---------- badges: stage, fee, change ---------- */
.tp-badge--dot { gap: 6px; }
.tp-badge--dot::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .8; flex: none; }
.stage-inquired { background: var(--tp-neutral-soft); color: var(--tp-neutral); }
.stage-interested { background: var(--tp-info-soft); color: var(--tp-info); }
.stage-registered { background: var(--tp-warning-soft); color: var(--tp-warning); }
.stage-enrolled { background: var(--tp-success-soft); color: var(--tp-success); }
.stage-completed { background: var(--tp-slate-soft); color: var(--tp-slate); }
.stage-dropped { background: var(--tp-danger-soft); color: var(--tp-danger); }
.fee-paid { background: var(--tp-success-soft); color: var(--tp-success); }
.fee-due { background: var(--tp-info-soft); color: var(--tp-info); }
.fee-part { background: var(--tp-warning-soft); color: var(--tp-warning); }
.fee-overdue { background: var(--tp-danger-soft); color: var(--tp-danger); }
.tp-delta { font-size: 12px; font-weight: 600; color: var(--tp-muted); white-space: nowrap; }
.tp-delta--good { color: var(--tp-success); }
.tp-delta--bad { color: var(--tp-danger); }
/* ---------- buttons ---------- */
.tp-btn { border-radius: var(--tp-r-md); }
.tp-btn--ghost { border-color: transparent; background: transparent; }
.tp-btn--ghost:hover { background: var(--tp-neutral-soft); }
.tp-btn--icon { width: var(--tp-target); padding: 0; }
.tp-btn i { font-size: 18px; }
.tp-btn--block { width: 100%; }
.tp-btn--danger { background: var(--tp-danger); border-color: var(--tp-danger); color: #fff !important; }
.tp-btn--danger:hover { background: #962018; border-color: #962018; color: #fff; }
a.tp-btn--danger { color: #fff; }
.tp-menu-pop { border-color: var(--tp-line); border-radius: var(--tp-r-md); box-shadow: var(--tp-shadow); padding: var(--tp-s0) 0; }
.tp-menu-pop .dropdown-item { min-height: var(--tp-target); display: flex; align-items: center; gap: var(--tp-s1); font-size: 14px; }
.tp-menu-pop .dropdown-item i { font-size: 18px; }
/* a row's menu shown in the phone/tablet action sheet: plain list, full-width rows */
.tp-row-actions__list { border: 0; box-shadow: none; padding: 0; margin: 0 calc(-1 * var(--tp-s1)); }
.tp-row-actions__list .dropdown-item { border-radius: var(--tp-r-sm); padding: 0 var(--tp-s1); }
.tp-row-actions__list .dropdown-header { padding: var(--tp-s1) var(--tp-s1) 0; }
/* ---------- chips: one row that scrolls sideways ---------- */
.tp-chip { min-height: var(--tp-target); gap: 6px; }
.tp-chip__count { color: var(--tp-muted); font-weight: 500; }
.tp-chip.is-active .tp-chip__count { color: inherit; }
.tp-chips--scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; margin: 0 calc(-1 * var(--tp-s2)); padding-left: var(--tp-s2); padding-right: var(--tp-s2); }
.tp-chips--scroll::-webkit-scrollbar { display: none; }
.tp-chips--scroll .tp-chip { flex: none; }
button.tp-chip { cursor: pointer; }
button.tp-chip.is-active { color: var(--tp-brand-strong); }
/* ---------- filters ---------- */
.tp-filter { margin-bottom: 12px; }
.tp-search { position: relative; margin-bottom: 12px; }
.tp-search i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 20px; color: var(--tp-muted); pointer-events: none; }
.tp-search input {
width: 100%; height: var(--tp-target); border: 1px solid var(--tp-line); border-radius: var(--tp-r-md);
padding: 0 12px 0 40px; font-size: 14px; background: var(--tp-surface); color: var(--tp-ink);
}
.tp-search input:focus { outline: 3px solid var(--tp-brand); outline-offset: 0; border-color: var(--tp-brand); }
.tp-filter__bar { display: flex; gap: var(--tp-s1); align-items: center; }
.tp-filter__bar .tp-chips { flex: 1; min-width: 0; margin-right: 0; padding-right: 0; }
.tp-filterbtn { flex: none; }
.tp-filterbtn__count { background: var(--tp-brand-strong); color: #fff; border-radius: 999px; font-size: 11px; line-height: 18px; min-width: 18px; padding: 0 5px; text-align: center; }
.tp-fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.tp-fields label { display: block; font-size: 12px; font-weight: 500; color: var(--tp-muted); margin-bottom: 4px; }
.tp-fields .form-control, .tp-fields .form-select { height: var(--tp-target); font-size: 14px; border-color: var(--tp-line); border-radius: var(--tp-r-md); color: var(--tp-ink); }
.tp-fields .form-control:focus, .tp-fields .form-select:focus { border-color: var(--tp-brand); box-shadow: 0 0 0 3px rgba(66, 134, 239, .25); }
/* ---------- sheets: a bottom sheet on the phone, a centred dialog from 768px ---------- */
.tp-sheet { display: none; position: fixed; inset: 0; z-index: 1040; }
.tp-sheet.is-open { display: block; }
.tp-sheet__foot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--tp-s1); margin-top: var(--tp-s2); }
.tp-sheet__text { color: var(--tp-ink); margin: 0 0 var(--tp-s1); }
/* ---------- KPI cards ---------- */
.tp-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: var(--tp-s2); }
.tp-kpi { background: var(--tp-surface); border: 1px solid var(--tp-line); border-radius: var(--tp-r-lg); padding: 12px; min-width: 0; color: var(--tp-ink); }
.tp-kpi__label { font-size: 12px; font-weight: 500; color: var(--tp-muted); }
.tp-kpi__value { font-size: 18px; font-weight: 600; margin-top: 2px; line-height: 1.3; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.tp-kpi__value--danger { color: var(--tp-danger); }
.tp-kpi__value--success { color: var(--tp-success); }
.tp-kpi__delta { font-size: 12px; margin-top: 2px; color: var(--tp-muted); font-variant-numeric: tabular-nums; }
.tp-kpi__note { font-size: 11px; margin-top: var(--tp-s0); color: var(--tp-muted); }
.tp-kpi--plain { border: 0; padding: 0; background: none; }
/* ---------- section card ---------- */
.tp-tablecard { background: var(--tp-surface); border: 1px solid var(--tp-line); border-radius: var(--tp-r-lg); overflow: hidden; margin-bottom: var(--tp-s2); color: var(--tp-ink); }
.tp-tablecard__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 12px var(--tp-s2); border-bottom: 1px solid var(--tp-line); }
.tp-tablecard__title { font-size: 15px; font-weight: 600; margin: 0; color: var(--tp-ink); }
.tp-tablecard__sub { font-size: 12px; color: var(--tp-muted); margin: 2px 0 0; }
.tp-tablecard__tools { padding: 12px var(--tp-s2) 0; }
.tp-tablecard__body { padding: 12px var(--tp-s2); }
.tp-tablecard__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--tp-s1); padding: 10px var(--tp-s2); border-top: 1px solid var(--tp-line); font-size: 12px; color: var(--tp-muted); }
.tp-tablecard__foot .pagination { margin: 0; flex-wrap: wrap; }
/* ---------- a table that becomes cards on the phone ---------- */
.tp-table--cards { font-size: 13px; color: var(--tp-ink); }
.tp-table--cards thead { display: none; }
.tp-table--cards, .tp-table--cards tbody, .tp-table--cards tr, .tp-table--cards td { display: block; }
.tp-table--cards tr { position: relative; padding: 14px var(--tp-s2); border-bottom: 1px solid var(--tp-line); }
.tp-table--cards tr:last-child { border-bottom: 0; }
.tp-table--cards tr[hidden] { display: none; }
.tp-table--cards td { padding: 0; border: 0; background: none !important; }
.tp-table--cards td[data-label] { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 3px 0; }
.tp-table--cards td[data-label]::before { content: attr(data-label); color: var(--tp-muted); flex: none; }
.tp-table--cards td[data-label] > * { text-align: right; min-width: 0; overflow-wrap: anywhere; }
.tp-table--cards td.tp-cell-main { margin-bottom: var(--tp-s1); padding-right: 48px; }
.tp-table--cards td.tp-cell-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--tp-s1); }
.tp-table--cards td.tp-cell-badges:empty { display: none; }
.tp-table--cards td.tp-cell-menu { position: absolute; top: 8px; right: 8px; }
.tp-table--cards td.tp-cell-check { position: absolute; top: 14px; right: 56px; }
.tp-table--cards td.tp-cell-quick { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: var(--tp-s1); margin-top: 10px; }
.tp-table--cards td.tp-cell-quick:empty { display: none; }
.tp-table--cards td.tp-cell-actions { margin-top: 10px; }
.tp-table--cards td.tp-cell-actions .tp-cell-quick { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: var(--tp-s1); }
.tp-table--cards td.tp-cell-actions .tp-row-menu { position: absolute; top: 8px; right: 8px; }
.tp-table--cards td.tp-hide-sm { display: none; }
.tp-table--cards .tp-row-empty td { padding: 0; }
.tp-cell-check .form-check-input { width: 22px; height: 22px; margin: 0; }
.tp-quick {
min-height: var(--tp-target); padding: 0 10px; border-radius: var(--tp-r-md); border: 1px solid var(--tp-line); background: var(--tp-surface);
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
font-size: 13px; font-weight: 500; color: var(--tp-ink) !important; text-decoration: none; white-space: nowrap;
}
.tp-quick:hover { border-color: var(--tp-brand); }
.tp-quick i { font-size: 18px; }
.tp-quick--wa i { color: var(--tp-success); }
.tp-quick--pay { background: var(--tp-brand-soft); border-color: transparent; color: var(--tp-brand-strong) !important; }
.tp-quicks { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: var(--tp-s1); }
.tp-person { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tp-person > div { min-width: 0; }
a.tp-person__name, .tp-person__name { font-weight: 600; font-size: 15px; color: var(--tp-ink) !important; text-decoration: none; overflow-wrap: anywhere; }
a.tp-person__name:hover { color: var(--tp-brand-strong) !important; text-decoration: underline; }
/* a 44px tap target on the phone without making the card taller */
.tp-table--cards a.tp-person__name { display: inline-block; padding: 11px 0; margin: -11px 0; }
.tp-person__sub { font-size: 12px; color: var(--tp-muted); overflow-wrap: anywhere; }
.tp-person__sub a { color: var(--tp-muted) !important; }
.tp-lines { display: flex; flex-direction: column; gap: 2px; }
.tp-row-past { background: #FFFBF0; box-shadow: inset 3px 0 0 var(--tp-warning); }
.tp-past-badge { background: var(--tp-warning-soft); color: var(--tp-warning); }
/* a stage badge that opens the stage menu; a checkbox with a 44px target; the month picker */
.tp-badge-btn { display: inline-flex; align-items: center; min-height: var(--tp-target); padding: 0; border: 0; background: none; cursor: pointer; }
.tp-badge-btn.dropdown-toggle::after { margin-left: 4px; color: var(--tp-muted); }
.tp-check { display: inline-flex; align-items: center; justify-content: center; gap: var(--tp-s1); min-width: var(--tp-target); min-height: var(--tp-target); margin: 0; cursor: pointer; }
.tp-check .form-check-input { width: 20px; height: 20px; margin: 0; flex: none; }
.tp-check--text { justify-content: flex-start; font-weight: 500; color: var(--tp-ink); }
.tp-monthpick { display: flex; align-items: center; gap: var(--tp-s1); }
.tp-monthpick .form-select { min-height: var(--tp-target); min-width: 10rem; border-color: var(--tp-line); border-radius: var(--tp-r-md); }
.tp-kpis--flat { margin-bottom: 0; }
/* ---------- ageing bars ---------- */
.tp-bars { padding: 12px var(--tp-s2); }
.tp-bar { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; gap: 10px; align-items: center; margin-bottom: 10px; font-size: 13px; }
.tp-bar:last-child { margin-bottom: 0; }
.tp-bar__track {
-webkit-appearance: none; appearance: none; display: block; width: 100%; height: 8px; border: 0; border-radius: 4px; overflow: hidden;
background: var(--tp-neutral-soft); color: var(--tp-info);
}
.tp-bar__track::-webkit-progress-bar { background: var(--tp-neutral-soft); border-radius: 4px; }
.tp-bar__track::-webkit-progress-value { background: currentColor; border-radius: 4px; }
.tp-bar__track::-moz-progress-bar { background: currentColor; border-radius: 4px; }
.tp-bar__track--not_due { color: var(--tp-info); }
.tp-bar__track--d1_30 { color: #B7791F; }
.tp-bar__track--d31_60 { color: #C2410C; }
.tp-bar__track--d61_90 { color: var(--tp-danger); }
.tp-bar__track--d90_plus { color: #7A1D14; }
.tp-bar__value { text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; }
.tp-bar__value small { display: block; color: var(--tp-muted); font-weight: 400; font-size: 11px; }
.tp-two { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.tp-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 12px var(--tp-s2); border-top: 1px solid var(--tp-line); }
.tp-stagelist { list-style: none; margin: 0; padding: var(--tp-s0) 0; }
.tp-stagelist a, .tp-stagelist__row { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: var(--tp-target); padding: var(--tp-s0) var(--tp-s2); color: var(--tp-ink) !important; text-decoration: none; }
.tp-stagelist a:hover { background: var(--tp-canvas); }
.tp-stagelist b { font-variant-numeric: tabular-nums; }
/* ---------- empty state ---------- */
.tp-empty-state { text-align: center; padding: var(--tp-s4) var(--tp-s2); color: var(--tp-muted); }
.tp-empty-state > i { display: block; font-size: 36px; margin-bottom: var(--tp-s1); color: var(--tp-muted); }
.tp-empty-state__title { font-size: 15px; font-weight: 600; color: var(--tp-ink); margin: 0 0 var(--tp-s0); }
.tp-empty-state p { margin: 0 auto; max-width: 420px; }
.tp-empty-state__action { margin-top: var(--tp-s2); }
/* ---------- phone pager (Previous / Next) ---------- */
.tp-pager { display: flex; align-items: center; justify-content: space-between; gap: var(--tp-s1); width: 100%; }
.tp-pager__desk { display: none; }
/* ============================ tablet / desktop ============================ */
@media (min-width: 768px) {
body.tp-admin { padding-bottom: 0; }
.tp-tabbar, .tp-fab, .tp-filterbtn, .tp-search-btn, .tp-sheet__grip { display: none !important; }
.tp-page:has(.tp-fab) { padding-bottom: 0; }
.tp-admin .main-content > .page-content { padding: var(--tp-s3); }
.tp-topbar__row { height: 60px; padding: 0 var(--tp-s3); gap: var(--tp-s3); }
.tp-topbar__search, .tp-topbar.is-searching .tp-topbar__search { display: block; flex: 1; max-width: 420px; padding: 0; }
.tp-topbar__search input { height: 40px; font-size: 13px; }
.tp-iconbtn--desk { display: inline-flex; }
/* the menu becomes the bar under the top bar */
.tp-menu { display: block; position: static; inset: auto; border-top: 1px solid var(--tp-line); }
.tp-menu__scrim, .tp-menu__head { display: none; }
.tp-menu__panel { position: static; max-height: none; overflow: visible; border-radius: 0; padding: 0 var(--tp-s2); background: none; }
.tp-menu__list { display: flex; flex-wrap: wrap; gap: 0 var(--tp-s0); }
.tp-menu__item { position: relative; border-bottom: 0; }
.tp-menu__link {
min-height: 45px; padding: 0 12px; gap: 6px; font-size: 13px; color: var(--tp-muted) !important;
border-bottom: 2px solid transparent; white-space: nowrap;
}
.tp-menu__link:hover { color: var(--tp-ink) !important; }
.tp-menu__link > i:first-child { font-size: 18px; width: auto; color: inherit; }
.tp-menu__link.is-active { border-bottom-color: var(--tp-brand-strong); }
.tp-menu__toggle { text-transform: none; letter-spacing: 0; font-weight: 500; padding-top: 0; cursor: pointer; }
.tp-menu__caret { display: inline-block; font-size: 16px; transition: transform .15s; }
.tp-menu__item.is-open .tp-menu__caret { transform: rotate(180deg); }
.tp-menu__sub {
display: none; position: absolute; top: 100%; left: 0; z-index: 1010; min-width: 220px; max-height: 70vh; overflow-y: auto;
padding: var(--tp-s0); background: var(--tp-surface); border: 1px solid var(--tp-line); border-radius: var(--tp-r-md); box-shadow: 0 8px 24px rgba(29, 39, 51, .12);
}
.tp-menu__item.is-open > .tp-menu__sub { display: block; }
.tp-menu__item:last-child > .tp-menu__sub, .tp-menu__item:nth-last-child(2) > .tp-menu__sub { left: auto; right: 0; }
.tp-menu__sublink { min-height: 40px; padding: 0 12px; font-size: 13px; white-space: nowrap; }
.tp-page-title__primary { display: inline-flex; }
.tp-page-title { margin-bottom: var(--tp-s3); }
/* sheets become a centred dialog... */
.tp-sheet__panel {
left: 50%; right: auto; bottom: auto; top: 50%; transform: translate(-50%, -50%);
width: min(480px, calc(100vw - 48px)); border-radius: var(--tp-r-lg); padding: var(--tp-s3);
}
/* ...except the filter sheet, which is the inline filter card on a desktop */
.tp-filter { background: var(--tp-surface); border: 1px solid var(--tp-line); border-radius: var(--tp-r-lg); padding: var(--tp-s2); margin-bottom: var(--tp-s2); }
.tp-filter .tp-search { margin-bottom: 12px; max-width: 520px; }
.tp-filter__bar .tp-chips--scroll { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; }
.tp-filter .tp-sheet { display: block; position: static; inset: auto; z-index: auto; }
.tp-filter .tp-sheet__scrim, .tp-filter .tp-sheet__head { display: none; }
.tp-filter .tp-sheet__panel { position: static; transform: none; width: auto; max-height: none; overflow: visible; padding: 0; margin-top: 12px; border-radius: 0; background: none; }
.tp-filter .tp-sheet__body { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; align-items: end; }
.tp-filter .tp-fields { display: contents; }
.tp-filter .tp-sheet__foot { display: flex; margin: 0; }
.tp-chips--scroll { margin: 0; padding-left: 0; padding-right: 0; }
.tp-chip { min-height: 36px; }
.tp-kpis { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--tp-s2); }
.tp-kpi { padding: var(--tp-s2); }
.tp-kpi__value { font-size: 24px; }
.tp-two { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--tp-s2); align-items: start; }
.tp-bar { grid-template-columns: 110px minmax(0, 1fr) 110px; }
/* cards back to a real table */
.tp-table--cards { display: table; }
.tp-table--cards thead { display: table-header-group; }
.tp-table--cards tbody { display: table-row-group; }
.tp-table--cards tr { display: table-row; padding: 0; position: static; border: 0; }
.tp-table--cards tr[hidden] { display: none; }
.tp-table--cards td, .tp-table--cards td[data-label], .tp-table--cards td.tp-cell-main, .tp-table--cards td.tp-cell-badges,
.tp-table--cards td.tp-cell-menu, .tp-table--cards td.tp-cell-check, .tp-table--cards td.tp-cell-quick, .tp-table--cards td.tp-hide-sm, .tp-table--cards td.tp-cell-actions {
display: table-cell; position: static; margin: 0; padding: 10px; border-bottom: 1px solid var(--tp-line); vertical-align: middle;
}
.tp-table--cards tr:last-child td { border-bottom: 0; }
.tp-table--cards td[data-label]::before { content: none; }
.tp-table--cards td[data-label] > * { text-align: inherit; }
.tp-table--cards td.tp-cell-main { padding-right: 10px; }
.tp-table--cards a.tp-person__name { padding: 0; margin: 0; }
.tp-table--cards td.tp-cell-wide { min-width: 120px; }
.tp-table--cards td.tp-cell-badges { white-space: nowrap; }
.tp-table--cards td.tp-cell-badges .tp-badge + .tp-badge { margin-left: 4px; }
.tp-table--cards td.tp-cell-quick { white-space: nowrap; }
.tp-table--cards td.tp-cell-quick .tp-quick { min-height: 36px; padding: 0 10px; margin-right: 4px; }
.tp-table--cards td.tp-cell-quick .tp-quick span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tp-table--cards td.tp-cell-actions { white-space: nowrap; text-align: right; }
/* wide tables scroll inside their card, never the page; words never break mid-word */
.tp-tablecard__scroll { overflow-x: auto; position: relative; } /* position: hidden labels stay inside the scroll box */
.tp-table--cards td[data-label] > *, .tp-table--cards .tp-person__name, .tp-table--cards .tp-person__sub { overflow-wrap: normal; }
.tp-table--cards td.tp-num, .tp-table--cards td.tp-cell-badges { white-space: nowrap; }
.tp-table--cards td.tp-tabular { white-space: nowrap; font-variant-numeric: tabular-nums; }
.tp-table--cards td.tp-cell-main:has(.tp-person) { min-width: 160px; }
.tp-table--cards td.tp-cell-main .tp-person__name { white-space: nowrap; }
.tp-table--cards td.tp-cell-actions .tp-cell-quick, .tp-table--cards td.tp-cell-actions .tp-row-menu { display: inline-flex; position: static; vertical-align: middle; gap: 4px; }
.tp-table--cards td.tp-cell-actions .tp-quick { min-height: 36px; padding: 0 10px; }
.tp-table--cards td.tp-cell-actions .tp-quick span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tp-table--cards tbody tr:hover td { background: #FAFBFD !important; }
.tp-table th.tp-num, .tp-table td.tp-num { text-align: right; }
.tp-table--cards tr.tp-row-past { box-shadow: none; }
.tp-table--cards tr.tp-row-past td { background: #FFFBF0 !important; }
.tp-table--cards tr.tp-row-past td:first-child { box-shadow: inset 3px 0 0 var(--tp-warning); }
.tp-pager__phone { display: none; }
.tp-pager__desk { display: block; }
}
/* ===== student 360 tabs (batch 2) ===== */
/* The student page tabs on the design system (fees, learning, exams, batches and attendance,
wallet, referrals, profile panels and the page's modals). Mobile first; scoped to .s360,
#s360-* and the student modals so nothing else changes. */
/* section heads and rows of actions */
.s360-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--tp-s1); margin-bottom: 12px; }
.s360-toolbar .tp-section-title { margin: 0; }
.s360-actions-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tp-s1); }
.s360-switch { margin-bottom: 12px; }
.s360-badges { display: inline-flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.s360-id__text { min-width: 0; }
/* table cards on this page let their menus overflow (a menu must not be clipped) */
.s360 .tp-tablecard { overflow: visible; }
.s360 .tp-tablecard__body + .tp-tablecard__body { border-top: 1px solid var(--tp-line); }
.s360 .tp-menu-pop .dropdown-item.text-danger, .s360 .tp-menu-pop .dropdown-item.text-danger i { color: var(--tp-danger) !important; }
/* a cell that holds a badge or buttons and a ⋮ menu (Invoice, Status, Status / action) */
.s360-acts { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--tp-s1); }
.s360 .tp-table--cards td.s360-cell-actions { margin-top: 10px; }
.s360 .tp-table--cards td.s360-cell-actions .s360-acts { display: flex; justify-content: flex-start; }
.s360 .tp-table--cards td.s360-cell-actions .tp-btn:not(.tp-btn--icon) { flex: 1 1 auto; }
.s360 .tp-table--cards td.s360-cell-actions:not(:has(*)) { display: none; }
/* DataTables on this page (instalments, wallet, referrals): search, length, info and paging on the
design system; the Excel/PDF buttons stay hidden, the Fees Export menu presses them. */
.s360-dt { padding: 0; }
.s360-dt .dataTables_wrapper .row { margin: 0; }
.s360-dt .dataTables_wrapper .row > [class*="col-"] { padding: 0 var(--tp-s2); }
.s360-dt .dataTables_wrapper .row > .col-sm-12:only-child { padding: 0; }
.s360-dt .dataTables_length, .s360-dt .dataTables_filter, .s360-dt .dataTables_info, .s360-dt .dataTables_paginate { padding: 10px 0; font-size: 13px; color: var(--tp-muted); }
.s360-dt .dataTables_filter label, .s360-dt .dataTables_length label { display: flex; align-items: center; gap: var(--tp-s1); width: 100%; margin: 0; }
.s360-dt .dataTables_filter input { flex: 1; margin: 0 !important; min-height: var(--tp-target); border-color: var(--tp-line); border-radius: var(--tp-r-md); }
.s360-dt .dataTables_length select { min-height: var(--tp-target); border-color: var(--tp-line); border-radius: var(--tp-r-md); }
.s360-dt .dataTables_paginate .pagination { flex-wrap: wrap; justify-content: flex-start; margin: 0; }
.s360-dt .dataTables_paginate .page-link { min-width: var(--tp-target); min-height: var(--tp-target); display: flex; align-items: center; justify-content: center; }
.s360-dt .dt-buttons { display: none; }
.s360-dt table.dataTable { margin: 0 !important; width: 100% !important; }
.s360-dt .dataTables_empty { padding: var(--tp-s3) var(--tp-s2) !important; text-align: center; color: var(--tp-muted); }
/* fees */
.s360-feesum .tp-kpi { min-width: 0; }
.s360-emi-input { display: inline-block; width: 100%; max-width: 10rem; min-height: var(--tp-target); text-align: right; font-variant-numeric: tabular-nums; }
.s360 .s360-row-addon, .s360 .s360-row-addon td { background: var(--tp-success-soft) !important; }
.s360-emi-new { background: var(--tp-brand-soft); }
.s360-emis__foot { flex-direction: column; align-items: stretch; }
.s360-emis__foot .s360-actions-row > .tp-btn { flex: 1 1 auto; }
.s360-emis__error { margin: 0; font-size: 13px; }
/* in-page confirmation and status message */
#s360-confirm .tp-sheet__panel { z-index: 1; }
.s360-toast {
position: fixed; left: var(--tp-s2); right: var(--tp-s2); z-index: 1070;
bottom: calc(var(--tp-tabbar-h) + var(--tp-s2) + env(safe-area-inset-bottom, 0px));
padding: 12px var(--tp-s2); border-radius: var(--tp-r-md);
background: var(--tp-ink); color: #fff; font-size: 14px; box-shadow: 0 6px 16px rgba(29, 39, 51, .25);
}
.s360-toast--danger { background: var(--tp-danger); }
/* exams */
.s360-exam-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--tp-s1); padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--tp-line); }
.s360-exam-row .form-select, .s360-exam-row .form-control { min-height: var(--tp-target); }
#moreexam .s360-exam-row { grid-template-columns: minmax(0, 1fr) var(--tp-target); }
#moreexam .s360-exam-row .examdate { grid-column: 1; }
#moreexam .s360-exam-row .tp-btn--icon { grid-column: 2; grid-row: 1; }
/* batch history attendance line (legacy text with
) */
.s360-attline { font-size: 12px; line-height: 1.5; }
/* attendance: the month table; on phones each batch is a card and its days wrap seven a row */
.s360-monthform { display: flex; gap: var(--tp-s1); flex-wrap: wrap; }
.s360-monthform label { display: block; font-size: 12px; font-weight: 500; color: var(--tp-muted); margin-bottom: 2px; }
.s360-monthform .form-select { min-height: var(--tp-target); width: auto; min-width: 6.5rem; border-color: var(--tp-line); border-radius: var(--tp-r-md); }
.s360 .s360-att-table tr { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.s360 .s360-att-table td:not(.s360-att__day) { grid-column: 1 / -1; }
.s360 .s360-att-table td.s360-att__day {
min-height: 40px; border: 1px solid var(--tp-line); border-radius: 6px; padding: 2px;
display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: 700; font-size: 13px;
}
.s360 .s360-att-table td.s360-att__day::before { content: attr(data-day); font-size: 10px; font-weight: 400; color: var(--tp-muted); line-height: 1.2; }
.s360 .s360-att-table td.s360-att__day.is-sunday { background: var(--tp-neutral-soft) !important; }
.s360 .s360-att-table td.s360-att__day.is-present { background: var(--tp-success-soft) !important; border-color: transparent; color: var(--tp-success); }
.s360 .s360-att-table td.s360-att__day.is-absent { background: var(--tp-danger-soft) !important; border-color: transparent; color: var(--tp-danger); }
.s360-att__dayhead small { display: block; font-weight: 400; }
/* learning: enrolments and LMS */
.s360-kv { display: grid; gap: 12px; margin: 0; }
.s360-kv dt { font-size: 12px; font-weight: 500; color: var(--tp-muted); margin-bottom: 4px; }
.s360-kv dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--tp-s1); }
.s360-lmsform { display: grid; gap: 12px; }
.s360-lmsform .tp-btn--primary { justify-self: start; }
.s360-lmsform__note { margin: 0; }
.s360 .select2 { width: 100% !important; }
.s360-lms + .s360-lms { margin-top: var(--tp-s2); }
.s360-lms__sub { font-size: 14px; font-weight: 600; color: var(--tp-ink); margin: 0 0 var(--tp-s1); }
.s360-lms__chapter { border: 1px solid var(--tp-line); border-radius: var(--tp-r-md); margin-bottom: var(--tp-s1); }
.s360-lms__chapter > summary {
display: flex; justify-content: space-between; align-items: center; gap: var(--tp-s1);
min-height: var(--tp-target); padding: 6px 12px; cursor: pointer; font-weight: 500; list-style: none;
}
.s360-lms__chapter > summary::-webkit-details-marker { display: none; }
.s360-lms__chapter > summary::after { content: '\25BE'; color: var(--tp-muted); flex: none; }
.s360-lms__chapter[open] > summary::after { transform: rotate(180deg); }
.s360-lms__chapter > summary > span:first-child { flex: 1; min-width: 0; }
.s360-lms__items { list-style: none; margin: 0; padding: 0 12px 12px; display: grid; gap: 6px; }
.s360-lms__items li { display: flex; gap: var(--tp-s1); align-items: flex-start; }
.s360-lms__items li > i { font-size: 18px; line-height: 20px; color: var(--tp-muted); flex: none; }
.s360-lms__items li.is-done > i { color: var(--tp-success); }
.s360-lms__quiz > span { display: flex; flex-direction: column; gap: 4px; }
.s360-lms__quiz .s360-badges { justify-content: flex-start; }
/* wallet form */
.s360-fields .form-control, .s360-fields .form-select { min-height: var(--tp-target); }
/* profile edit panels */
.s360-form__foot { display: grid; gap: var(--tp-s1); margin-top: var(--tp-s2); }
.s360-repeat { padding-bottom: var(--tp-s1); margin-bottom: var(--tp-s2); border-bottom: 1px solid var(--tp-line); }
.s360-repeat__two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
.s360-checks { margin: 0 0 var(--tp-s2); padding: 0; border: 0; display: grid; gap: 0; }
.s360-checks .tp-check { justify-content: flex-start; }
.s360-checks__note { margin: var(--tp-s1) 0 0; }
.s360-claim-select { max-width: 360px; }
/* the student page's modals */
body:has(.s360) #passwordModal .input-group-addon {
display: inline-flex; align-items: center; justify-content: center; min-width: var(--tp-target);
border: 1px solid var(--tp-line); border-left: 0; border-radius: 0 var(--tp-r-sm) var(--tp-r-sm) 0; background: var(--tp-canvas);
}
body:has(.s360) #passwordModal .input-group-addon a { color: var(--tp-ink); display: inline-flex; align-items: center; justify-content: center; min-height: var(--tp-target); min-width: var(--tp-target); }
body:has(.s360) #addonModal .card, body:has(.s360) #discountLaterModal .card, body:has(.s360) #passwordModal .card, body:has(.s360) #newcourseenrollModal .card { border: 0; box-shadow: none; margin: 0; }
body:has(.s360) #addonModal .card-body, body:has(.s360) #discountLaterModal .card-body, body:has(.s360) #passwordModal .card-body, body:has(.s360) #newcourseenrollModal .card-body { padding: 0; }
body:has(.s360) #addonModal .modal-body .modal-body, body:has(.s360) #discountLaterModal .modal-body .modal-body, body:has(.s360) #passwordModal .modal-body .modal-body { padding: 0; }
body:has(.s360) #addonModal .mb-3.row, body:has(.s360) #discountLaterModal .mb-3.row, body:has(.s360) #passwordModal .mb-3.row { margin-left: 0; margin-right: 0; }
body:has(.s360) #collectionModal .form-control, body:has(.s360) #collectionModal .form-select, body:has(.s360) #newcourseenrollModal .form-control, body:has(.s360) #newcourseenrollModal .form-select,
body:has(.s360) #addonModal .form-control, body:has(.s360) #discountLaterModal .form-control, body:has(.s360) #passwordModal .form-control { min-height: var(--tp-target); }
body:has(.s360) #batchModal .form-check-input, body:has(.s360) #livebatchModal .form-check-input { width: 22px; height: 22px; }
body:has(.s360) #collectionModal .btn-success, body:has(.s360) #collectionModal .btn-primary { background: var(--tp-brand-strong); border-color: var(--tp-brand-strong); color: #fff; min-height: var(--tp-target); }
@media (min-width: 768px) {
.s360 .tp-table--cards td.s360-cell-actions { display: table-cell; margin: 0; white-space: nowrap; }
.s360 .tp-table--cards td.s360-cell-actions:not(:has(*)) { display: table-cell; }
.s360 .tp-table--cards td.s360-cell-actions .tp-btn:not(.tp-btn--icon) { flex: none; min-height: 36px; padding: 0 12px; font-size: 13px; }
.s360 .tp-table--cards .s360-acts .tp-btn--icon { width: 36px; min-height: 36px; }
.s360-acts { justify-content: flex-start; flex-wrap: nowrap; }
.s360-sm-only { display: none; }
.s360-dt .dataTables_filter label { justify-content: flex-end; }
.s360-dt .dataTables_filter input { flex: 0 1 260px; }
.s360-dt .dataTables_paginate .pagination { justify-content: flex-end; }
.s360-dt .dataTables_paginate .page-link { min-width: 36px; min-height: 36px; }
.s360-att-scroll { overflow-x: auto; }
.s360 .s360-att-table tr { display: table-row; }
.s360 .s360-att-table td.s360-att__day { display: table-cell; min-width: 30px; padding: 6px 2px; text-align: center; border: 0; border-bottom: 1px solid var(--tp-line); border-radius: 0; }
.s360 .s360-att-table td.s360-att__day::before { content: none; }
.s360 .s360-att-table th.s360-att__dayhead { text-align: center; padding: 6px 2px; }
.s360-emi-input { min-height: 36px; max-width: 9rem; }
.s360-emis__foot { flex-direction: row; align-items: center; }
.s360-emis__foot .s360-actions-row { margin-left: auto; }
.s360-emis__foot .s360-actions-row > .tp-btn { flex: none; }
.s360-toast { left: auto; right: var(--tp-s3); bottom: var(--tp-s3); max-width: 420px; }
.s360-exam-row { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto; align-items: center; }
#moreexam .s360-exam-row { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) var(--tp-target); }
#moreexam .s360-exam-row .examdate { grid-column: 2; }
#moreexam .s360-exam-row .tp-btn--icon { grid-column: 3; }
.s360-kv { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.s360-kv dd { justify-content: flex-start; }
.s360-lmsform { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
.s360-lmsform__note { grid-column: 1 / -1; }
.s360-lmsform__pick { max-width: 520px; }
.s360-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.s360-fields__wide { grid-column: 1 / -1; }
}
/* ===== end student 360 tabs ===== */
/* ===== master & CRUD pages (batch 2) ===== */
/* Lists and add/edit forms of the catalogue and settings screens (courses, exams, batches,
affiliates, staff, templates...). Same columns as before, restyled. Components:
x-admin.delete-button / confirm, list-search / export-menu / list-script, form-section /
field / form-actions / form-validate, flash, mode-tags. */
/* ---------- flash message ---------- */
.tp-alert { display: flex; align-items: flex-start; gap: var(--tp-s1); padding: 12px var(--tp-s2); margin-bottom: var(--tp-s2); border-radius: var(--tp-r-md); font-size: 14px; line-height: 1.45; background: var(--tp-neutral-soft); color: var(--tp-neutral); }
.tp-alert i { font-size: 20px; line-height: 20px; flex: none; }
.tp-alert--success { background: var(--tp-success-soft); color: var(--tp-success); }
.tp-alert--danger { background: var(--tp-danger-soft); color: var(--tp-danger); }
.tp-alert--info { background: var(--tp-info-soft); color: var(--tp-info); }
.tp-alert--warning { background: var(--tp-warning-soft); color: var(--tp-warning); }
.tp-alert a { color: inherit !important; font-weight: 600; text-decoration: underline; }
.tp-alert .tp-sub { color: inherit; opacity: .85; }
/* ---------- mode tags (Recorded / Offline / Live) ---------- */
.tp-modes { display: inline-flex; flex-wrap: wrap; gap: var(--tp-s0); }
.tp-mode { display: inline-flex; align-items: center; padding: 1px 8px; border: 1px solid var(--tp-line); border-radius: 6px; background: var(--tp-surface); color: var(--tp-neutral); font-size: 12px; font-weight: 500; line-height: 20px; white-space: nowrap; }
/* ---------- row actions: small buttons (bordered on phones, ghost from 768px) ---------- */
.tp-act {
display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--tp-target); padding: 0 12px;
border: 1px solid var(--tp-line); border-radius: var(--tp-r-md); background: var(--tp-surface);
color: var(--tp-ink) !important; font-size: 13px; font-weight: 600; line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer;
}
.tp-act i { font-size: 18px; }
.tp-act:hover { background: var(--tp-neutral-soft); }
.tp-acts { display: flex; flex-wrap: wrap; gap: var(--tp-s1); align-items: center; }
.tp-table--cards td.tp-cell-acts { display: flex; flex-wrap: wrap; gap: var(--tp-s1); margin-top: 10px; }
.tp-table--cards td.tp-cell-acts:empty { display: none; }
.tp-table--cards td.tp-cell-acts .tp-act { flex: 1 1 auto; }
/* an action in its own column (Edit, Delete, ...): side by side at the foot of a phone card */
.tp-table--cards td.tp-cell-btn { display: inline-block; margin: 10px var(--tp-s1) 0 0; vertical-align: top; }
.tp-table--cards td.tp-cell-btn:not(:has(*)) { display: none; }
/* a card whose title column is not the first one (State after Country): title first on phones */
.tp-table--main-first tr { display: flex; flex-wrap: wrap; column-gap: var(--tp-s1); }
.tp-table--main-first td { flex: 1 1 100%; }
.tp-table--main-first td.tp-cell-main { order: -1; }
.tp-table--main-first td.tp-cell-btn { flex: 0 0 auto; margin-right: 0; }
/* a long text cell on a phone card: its label above it, the text left-aligned */
.tp-table--cards td.tp-stack[data-label] { display: block; }
.tp-table--cards td.tp-stack[data-label]::before { display: block; margin-bottom: 2px; }
.tp-table--cards td.tp-stack[data-label] > * { text-align: left; }
/* a row that is switched off (an inactive entry) */
.tp-table tr.tp-row-off td { color: var(--tp-muted); }
.tp-act--on, .tp-act--on i { color: var(--tp-success) !important; }
.tp-code { font-family: SFMono-Regular, Consolas, "Liberation Mono", monospace; letter-spacing: .02em; }
.tp-act--danger { color: var(--tp-danger) !important; }
.tp-act--danger:hover { background: var(--tp-danger-soft); }
.tp-menu-pop button.dropdown-item { width: 100%; text-align: left; }
.tp-menu-pop .dropdown-item.tp-item--danger, .tp-menu-pop .dropdown-item.tp-item--danger i { color: var(--tp-danger); }
.tp-menu-pop .dropdown-item.tp-item--danger:hover, .tp-menu-pop .dropdown-item.tp-item--danger:focus { background: var(--tp-danger-soft); color: var(--tp-danger); }
/* Row menus (x-admin.row-menu) open position:fixed so the card does not clip them; undo the
theme's top:100% / right:0 !important and slide-in animation, which fight Popper. */
.tp-rowmenu > .dropdown-menu { z-index: 1035; animation: none; }
.tp-rowmenu > .dropdown-menu.show, .tp-rowmenu > .dropdown-menu-end[style] { top: 0 !important; left: 0 !important; right: auto !important; }
.tp-thumb { width: 40px; height: 40px; border-radius: var(--tp-r-sm); object-fit: cover; border: 1px solid var(--tp-line); flex: none; background: var(--tp-canvas); }
/* ---------- list search + DataTables pager (x-admin.list-script) ---------- */
.tp-search--list { margin-bottom: 12px; }
/* long text kept to one line in a cell (the full text in its title) */
.tp-clip { display: inline-block; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
/* a wide table (many columns) scrolls sideways inside its card on a desktop, never the page */
.tp-scroll-x { overflow-x: auto; }
/* a small filter form over a list (a select or two and a button) */
.tp-inline-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--tp-s1); margin-bottom: 12px; }
.tp-inline-form > .form-select, .tp-inline-form > .form-control, .tp-inline-form > div { flex: 1 1 180px; max-width: 360px; }
.tp-inline-form .form-select, .tp-inline-form .form-control { min-height: var(--tp-target); border-color: var(--tp-line); border-radius: var(--tp-r-md); }
.tp-inline-form label:not(.visually-hidden) { display: block; font-size: 12px; font-weight: 500; color: var(--tp-muted); margin-bottom: 4px; }
.tp-inline-form--card { background: var(--tp-surface); border: 1px solid var(--tp-line); border-radius: var(--tp-r-lg); padding: 12px var(--tp-s2); margin-bottom: var(--tp-s2); }
.tp-inline-form--card > .tp-btn { flex: 1 1 120px; max-width: 200px; }
/* attendance marking: photo beside the name, the Absent box under it */
.tp-table--cards td.tp-att-photo { position: absolute; top: 14px; left: var(--tp-s2); }
.tp-table--cards tr:has(.tp-att-photo) td.tp-cell-main { padding-left: 42px; min-height: 32px; display: flex; align-items: center; }
.tp-table--cards td.tp-att-absent { margin-top: var(--tp-s0); }
.tp-tablecard .dataTables_wrapper { padding: 0; }
.tp-tablecard table.dataTable { margin: 0 !important; width: 100% !important; border-collapse: separate !important; }
.tp-tablecard table.dataTable td.dataTables_empty { padding: var(--tp-s3) var(--tp-s2); text-align: center; color: var(--tp-muted); }
.tp-dt-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--tp-s1); padding: 10px var(--tp-s2); border-top: 1px solid var(--tp-line); font-size: 12px; color: var(--tp-muted); }
.tp-dt-foot .dataTables_info { padding: 0 !important; white-space: normal !important; font-variant-numeric: tabular-nums; }
.tp-dt-foot .dataTables_paginate { margin: 0 !important; }
.tp-dt-foot .pagination { margin: 0 !important; flex-wrap: wrap; justify-content: flex-end !important; }
.tp-dt-foot .page-link { min-width: var(--tp-target); min-height: var(--tp-target); display: flex; align-items: center; justify-content: center; font-size: 13px; }
/* ---------- add / edit forms ---------- */
.tp-form { max-width: 1040px; }
.tp-formcard { background: var(--tp-surface); border: 1px solid var(--tp-line); border-radius: var(--tp-r-lg); padding: var(--tp-s2); margin-bottom: var(--tp-s2); color: var(--tp-ink); }
.tp-formcard__head { margin-bottom: var(--tp-s2); }
.tp-formcard__title { font-size: 15px; font-weight: 600; margin: 0; color: var(--tp-ink); }
.tp-formcard__sub { font-size: 12px; color: var(--tp-muted); margin: 2px 0 0; }
.tp-form-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--tp-s2); }
.tp-field { min-width: 0; margin: 0; padding: 0; border: 0; }
.tp-field__label { display: block; float: none; width: auto; padding: 0; margin: 0 0 6px; font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--tp-ink); }
.tp-req { color: var(--tp-danger); }
.tp-field__hint { font-size: 12px; color: var(--tp-muted); margin: 4px 0 0; }
.tp-field__error { font-size: 12px; color: var(--tp-danger); margin: 4px 0 0; }
.tp-field .form-control, .tp-field .form-select { min-height: var(--tp-target); font-size: 16px; border-color: var(--tp-line); border-radius: var(--tp-r-md); color: var(--tp-ink); }
.tp-field textarea.form-control { min-height: 96px; }
.tp-field .form-control:focus, .tp-field .form-select:focus { border-color: var(--tp-brand); box-shadow: 0 0 0 3px rgba(66, 134, 239, .25); }
.tp-field .form-control[readonly] { background: var(--tp-canvas); }
.tp-field input[type="file"].form-control { padding-top: 9px; padding-bottom: 9px; }
.tp-field .tox-tinymce { border-color: var(--tp-line); border-radius: var(--tp-r-md); }
.tp-checks { display: flex; flex-wrap: wrap; gap: 0 var(--tp-s3); }
.tp-checks--stack { flex-direction: column; }
.tp-file { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.tp-file > .form-control { flex: 1 1 220px; width: auto; }
.tp-file img { width: 56px; height: 56px; border-radius: var(--tp-r-sm); object-fit: cover; border: 1px solid var(--tp-line); }
.tp-file a { font-weight: 600; }
/* select2 inside a field: the same 44px box */
.tp-field .select2-container { width: 100% !important; }
.tp-field .select2-container .select2-selection--single { height: var(--tp-target); border-color: var(--tp-line); border-radius: var(--tp-r-md); }
.tp-field .select2-container .select2-selection--single .select2-selection__rendered { line-height: 42px; padding-left: 12px; color: var(--tp-ink); }
.tp-field .select2-container .select2-selection--single .select2-selection__arrow { height: 42px; }
.tp-field .select2-container .select2-selection--multiple { min-height: var(--tp-target); border-color: var(--tp-line); border-radius: var(--tp-r-md); }
/* repeated rows (FAQs, options): fields + a remove button */
.tp-repeat { display: grid; gap: 12px; }
.tp-repeat__item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px; border: 1px solid var(--tp-line); border-radius: var(--tp-r-md); background: var(--tp-canvas); }
.tp-repeat__fields, .tp-paper { display: grid; gap: 12px; min-width: 0; }
.tp-repeat__item .tp-field { display: block; margin: 0; }
.tp-repeat__item > .tp-btn { align-self: end; }
.tp-btn--danger-ghost { border-color: transparent; background: transparent; color: var(--tp-danger) !important; }
.tp-btn--danger-ghost:hover { background: var(--tp-danger-soft); }
/* parts of a form shown for one choice only (e.g. a course mode); JS toggles .is-on */
.tp-when:not(.is-on) { display: none; }
/* the end of a form: Cancel + Save, stuck above the tab bar on phones */
.tp-form-actions {
position: sticky; z-index: 5; bottom: calc(var(--tp-tabbar-h) + env(safe-area-inset-bottom, 0px));
display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--tp-s1);
margin: 0 calc(-1 * var(--tp-s2)) var(--tp-s2); padding: 12px var(--tp-s2);
background: var(--tp-surface); border-top: 1px solid var(--tp-line);
}
.tp-form-actions > :only-child { grid-column: 1 / -1; }
.tp-form-actions:has(> :nth-child(3)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tp-form-actions:has(> :nth-child(3)) > .tp-btn--primary { grid-column: 1 / -1; }
/* Skote's overflow:hidden on .main-content would turn sticky off; clip clips the same way. */
.main-content:has(.tp-form-actions) { overflow: clip; }
/* a password box with its show / hide toggle on the right */
.tp-pass { flex-wrap: nowrap; }
.tp-pass > .form-control { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.tp-pass .input-group-addon { display: flex; align-items: center; border: 1px solid var(--tp-line); border-left: 0; border-radius: 0 var(--tp-r-md) var(--tp-r-md) 0; background: var(--tp-canvas); }
.tp-pass > .tp-btn { border-left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; background: var(--tp-canvas); }
.tp-range { display: flex; align-items: center; gap: var(--tp-s1); }
.tp-range > .form-control { flex: 1 1 0; min-width: 0; }
.tp-pass .input-group-addon a { display: inline-flex; align-items: center; justify-content: center; width: var(--tp-target); min-height: 42px; color: var(--tp-muted) !important; }
/* a rich-text editor box (the @ variable list opens inside it) */
.tp-editor { position: relative; }
/* WhatsApp template parameters: a tick and a small position box per variable */
.tp-params > li > .form-control { flex: 0 0 72px; min-height: var(--tp-target); text-align: center; border-color: var(--tp-line); border-radius: var(--tp-r-md); }
/* read-only facts inside a card */
.tp-facts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 0; }
.tp-facts dt { font-size: 12px; font-weight: 500; color: var(--tp-muted); }
.tp-facts dd { margin: 0; color: var(--tp-ink); overflow-wrap: anywhere; }
/* stored HTML shown in a list cell (lesson content) */
.tp-richtext { max-width: 420px; overflow-wrap: anywhere; }
.tp-richtext img { max-width: 100%; height: auto; }
.tp-richtext p:last-child { margin-bottom: 0; }
/* a small table inside a card body */
.tp-table--inner { border: 1px solid var(--tp-line); border-radius: var(--tp-r-md); overflow: hidden; }
.tp-tablecard__head--nowrap { flex-wrap: nowrap; }
.tp-tablecard__head--nowrap > :first-child { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
/* a plain list of rows with actions on the right (lessons of a chapter, ...) */
.tp-rows { list-style: none; margin: 0 0 var(--tp-s2); padding: 0; }
.tp-rows > li { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: var(--tp-target); padding: var(--tp-s0) 0; border-bottom: 1px solid var(--tp-line); }
.tp-rows > li:last-child { border-bottom: 0; }
.tp-rows > li > :first-child { min-width: 0; overflow-wrap: anywhere; }
.tp-rows .tp-acts { flex: none; gap: 2px; }
/* Bootstrap modals on these pages: full screen on phones, the design system inside */
.tp-modal .modal-content { border: 0; border-radius: var(--tp-r-lg); color: var(--tp-ink); }
.tp-modal .modal-header { border-bottom: 1px solid var(--tp-line); padding: 12px var(--tp-s2); }
.tp-modal .modal-title { font-size: 16px; font-weight: 600; margin: 0; color: var(--tp-ink); }
.tp-modal .modal-body { padding: var(--tp-s2); }
.tp-modal .modal-footer { border-top: 1px solid var(--tp-line); padding: 12px var(--tp-s2); gap: var(--tp-s1); }
.tp-modal .modal-footer > * { margin: 0; }
.tp-lessonform, .tp-modal .modal-body form { display: grid; gap: var(--tp-s2); text-align: left; }
.tp-lessonform__pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.tp-lessonform__pair:empty { display: none; }
/* tabs inside a page (affiliate, subcourse content): the student-page look */
.tp-tabs { display: flex; flex-wrap: nowrap; gap: var(--tp-s0); overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--tp-line); margin: 0 0 var(--tp-s2); padding: 0; list-style: none; }
.tp-tabs::-webkit-scrollbar { display: none; }
.tp-tabs .nav-link { min-height: var(--tp-target); padding: 0 var(--tp-s2); display: flex; align-items: center; gap: 6px; white-space: nowrap; border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: none; color: var(--tp-muted); font-weight: 600; }
.tp-tabs .nav-link:hover { color: var(--tp-ink); }
.tp-tabs .nav-link.active { color: var(--tp-brand-strong); border-bottom-color: var(--tp-brand); background: none; }
@media (min-width: 768px) {
/* the phone rule "tr:last-child td { padding: 0 }" outranked the desktop padding: the last row lost it */
.tp-table--cards tr:last-child td { padding: 10px; }
.tp-act { min-height: 36px; padding: 0 10px; border-color: transparent; background: transparent; }
.tp-table--cards td.tp-cell-acts { display: table-cell; margin: 0; white-space: nowrap; text-align: right; }
.tp-table--cards td.tp-cell-acts .tp-act + .tp-act { margin-left: 2px; }
.tp-table--cards td.tp-cell-btn { display: table-cell; margin: 0; white-space: nowrap; }
.tp-table--main-first tr { display: table-row; }
.tp-table--cards td.tp-stack[data-label] { display: table-cell; }
.tp-table--cards td.tp-att-photo { position: static; width: 1%; }
.tp-table--cards tr:has(.tp-att-photo) td.tp-cell-main { padding-left: 10px; display: table-cell; }
.tp-table--cards td.tp-cell-btn .tp-act { margin-left: -10px; }
.tp-table--cards td.tp-cell-menu { width: 1%; }
.tp-search--list { max-width: 420px; }
.tp-dt-foot .page-link { min-width: 36px; min-height: 36px; }
.tp-formcard { padding: var(--tp-s3); }
.tp-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px var(--tp-s3); }
.tp-form-grid--one { grid-template-columns: minmax(0, 1fr); }
.tp-field--wide { grid-column: 1 / -1; }
.tp-field .form-control, .tp-field .form-select { font-size: 14px; }
.tp-form-actions { position: static; display: flex; justify-content: flex-end; margin: 0 0 var(--tp-s3); padding: 0; background: none; border: 0; }
.tp-form-actions .tp-btn--primary { min-width: 140px; }
.tp-facts { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.tp-lessonform__pair { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.tp-paper { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }
.tp-modal .modal-header, .tp-modal .modal-body, .tp-modal .modal-footer { padding-left: var(--tp-s3); padding-right: var(--tp-s3); }
}
/* ===== end master & CRUD ===== */
/* ===== reports & money (batch 2) ===== */
/* Fee and attendance reports, mass collection / allocation / placement. Every report keeps
its columns: .tp-table--report is a table from 768px and a card per row on phones (photo and
name on top, each column as "label value"). DataTables keeps its sorting, search, paging and
Excel/PDF on the same tables; its controls are styled here and its loose buttons hidden for
the Export menu (x-admin.reports-export). Also the Mobile cell (x-admin.reports-contact),
amounts, attendance marks and the day grid. Mobile first. */
.tp-export { position: relative; }
.tp-export__msg { position: absolute; right: 0; top: calc(100% + 4px); z-index: 5; margin: 0; padding: 6px 10px; width: max-content; max-width: 260px; font-size: 12px; color: var(--tp-ink); background: var(--tp-warning-soft); border-radius: var(--tp-r-sm); box-shadow: var(--tp-shadow); }
.tp-owed { color: var(--tp-danger); font-weight: 600; }
.tp-settled { color: var(--tp-success); font-weight: 600; }
/* a report table on phones: one card per row (the 768px block puts it back to a table) */
.tp-table--report tr { display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; }
.tp-table--report td { flex: 1 1 100%; min-width: 0; }
.tp-table--report td.tp-cell-photo { flex: 0 0 auto; order: -2; margin-bottom: var(--tp-s1); }
.tp-table--report td.tp-cell-main { flex: 1 1 0; order: -1; margin-bottom: var(--tp-s1); }
.tp-table--report td.tp-cell-check { position: static; flex: 0 0 auto; order: -3; margin-bottom: var(--tp-s1); }
.tp-table--report td.tp-cell-index { order: 90; }
.tp-table--report td.tp-cell-act { order: 95; margin-top: var(--tp-s1); }
.tp-table--report td.tp-cell-act > .tp-btn { width: 100%; }
.tp-table--report td.tp-cell-act .tp-btn--sm, .tp-actions .tp-btn--sm { min-height: var(--tp-target); }
.tp-table--report td[data-label] .tp-badge { white-space: normal; }
.tp-table--report td[data-label] > .tp-mini, .tp-table--report td[data-label] > span { max-width: 70%; }
/* the day columns of a month report: a 7-wide grid of small labelled boxes */
.tp-table--days tr { row-gap: 4px; column-gap: 4px; }
.tp-table--days td.tp-cell-photo, .tp-table--days td.tp-cell-main { margin-right: 8px; }
.tp-table--days tr td.tp-cell-day { flex: 0 0 calc((100% - 6 * 4px) / 7); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; min-height: 44px; padding: 2px 0; border-radius: 6px; background: var(--tp-canvas) !important; font-size: 12px; font-weight: 700; }
.tp-table--days td.tp-cell-day::before { font-size: 10px; font-weight: 500; color: var(--tp-muted); }
.tp-table--days td.tp-cell-day > * { text-align: center; }
.tp-table--days td.tp-cell-total { flex: 1 1 100%; }
.tp-table--report td.tp-cell-photo .tp-avatar { width: 40px; height: 40px; font-size: 14px; }
.tp-cell-day--p, .tp-table--days tr td.tp-cell-day--p { background: var(--tp-success-soft) !important; color: var(--tp-success); }
.tp-cell-day--a, .tp-table--days tr td.tp-cell-day--a { background: var(--tp-danger-soft) !important; color: var(--tp-danger); }
/* the Mobile cell: the number, then Call and WhatsApp icon buttons */
.tp-contact { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; }
.tp-contact .tp-quick { position: relative; width: var(--tp-target); padding: 0; }
/* P / A marks */
.tp-mark { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 24px; padding: 0 6px; border-radius: 6px; font-size: 12px; font-weight: 700; background: var(--tp-neutral-soft); color: var(--tp-neutral); }
.tp-mark--p { background: var(--tp-success-soft); color: var(--tp-success); }
.tp-mark--a { background: var(--tp-danger-soft); color: var(--tp-danger); }
/* attendance: the P / A counts, a small meter and the figure */
.tp-attmeter { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px var(--tp-s1); }
.tp-attmeter progress { -webkit-appearance: none; appearance: none; width: 72px; height: 6px; border: 0; border-radius: 3px; overflow: hidden; background: var(--tp-neutral-soft); color: var(--tp-success); }
.tp-attmeter progress::-webkit-progress-bar { background: var(--tp-neutral-soft); border-radius: 3px; }
.tp-attmeter progress::-webkit-progress-value { background: currentColor; border-radius: 3px; }
.tp-attmeter progress::-moz-progress-bar { background: currentColor; border-radius: 3px; }
.tp-attmeter--warn progress { color: #B7791F; }
.tp-attmeter--bad progress { color: var(--tp-danger); }
/* DataTables inside a report card: length, search, info and pager in the design system */
.tp-tablecard .dt-buttons { display: none; }
.tp-tablecard table.dataTable { margin: 0 !important; width: 100% !important; border-collapse: separate !important; }
.tp-tablecard .dataTables_wrapper > .row { margin: 0; padding: 12px var(--tp-s2) 0; row-gap: var(--tp-s1); align-items: center; }
.tp-tablecard .dataTables_wrapper > .row > [class*="col-"] { padding: 0; }
.tp-tablecard .dataTables_wrapper > .row:has(table) { padding: 12px 0 0; }
.tp-tablecard .dataTables_wrapper > .row:last-child { padding-bottom: 12px; border-top: 1px solid var(--tp-line); margin-top: 0; }
.tp-tablecard .dataTables_length label, .tp-tablecard .dataTables_filter label { display: flex; align-items: center; gap: var(--tp-s1); width: 100%; margin: 0; font-size: 13px; font-weight: 500; color: var(--tp-muted); white-space: nowrap; }
.tp-tablecard .dataTables_filter { text-align: left; }
.tp-tablecard .dataTables_length select, .tp-tablecard .dataTables_filter input {
min-height: var(--tp-target); border: 1px solid var(--tp-line); border-radius: var(--tp-r-md); font-size: 14px; color: var(--tp-ink); background-color: var(--tp-surface); margin: 0 !important;
}
.tp-tablecard .dataTables_length select { width: auto; padding-right: 32px; }
.tp-tablecard .dataTables_filter input { flex: 1 1 auto; width: auto; min-width: 0; padding: 0 12px; }
.tp-tablecard .dataTables_length select:focus, .tp-tablecard .dataTables_filter input:focus { border-color: var(--tp-brand); box-shadow: 0 0 0 3px rgba(66, 134, 239, .25); outline: 0; }
.tp-tablecard .dataTables_info { padding: 0 !important; font-size: 12px; color: var(--tp-muted); white-space: normal !important; }
.tp-tablecard .dataTables_paginate { padding-top: var(--tp-s1); }
.tp-tablecard .dataTables_paginate .pagination { flex-wrap: wrap; justify-content: flex-start !important; gap: 4px; margin: 0 !important; }
.tp-tablecard .dataTables_paginate .page-link { min-width: var(--tp-target); min-height: var(--tp-target); display: flex; align-items: center; justify-content: center; border-radius: var(--tp-r-sm) !important; color: var(--tp-ink); border-color: var(--tp-line); }
.tp-tablecard .dataTables_paginate .page-item.active .page-link { background: var(--tp-brand-strong); border-color: var(--tp-brand-strong); color: #fff; }
.tp-tablecard .dataTables_paginate .page-item.disabled .page-link { color: var(--tp-muted); }
.tp-tablecard td.dataTables_empty { padding: var(--tp-s3) var(--tp-s2) !important; text-align: center; color: var(--tp-muted); }
/* a search / pick form shown as a card (mass collection, mass allocate, employee attendance) */
.tp-searchcard { padding: var(--tp-s2); margin-bottom: var(--tp-s2); }
.tp-fields--row .tp-fields__check, .tp-fields__check { display: flex; align-items: flex-end; }
.tp-filter__go { display: flex; gap: var(--tp-s1); flex: none; }
/* controls in a table card's tools row (select all, save, assign) */
.tp-actionbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--tp-s1) 12px; }
.tp-actionbar > * { min-width: 0; }
.tp-actionbar .tp-fields { flex: 1 1 100%; }
.tp-actionbar__note { font-size: 12px; color: var(--tp-muted); margin: 0; flex: 1 1 100%; }
.tp-actionbar .tp-btn { flex: 1 1 auto; }
.tp-tablecard__tools:has(.tp-actionbar) { padding-bottom: 12px; border-bottom: 1px solid var(--tp-line); }
.tp-btn--block-sm { width: 100%; margin-bottom: var(--tp-s2); }
/* row actions in one cell (instalment invoices) */
.tp-actions { display: flex; flex-wrap: wrap; gap: var(--tp-s1); align-items: center; }
.tp-row-addon { background: var(--tp-success-soft); }
.tp-amount-input { max-width: 160px; margin-left: auto; text-align: right; }
.tp-enrol-meta { display: flex; flex-wrap: wrap; gap: var(--tp-s1) var(--tp-s2); align-items: center; padding: 12px var(--tp-s2); border-top: 1px solid var(--tp-line); border-bottom: 1px solid var(--tp-line); font-size: 13px; color: var(--tp-muted); }
.tp-enrol-meta b { color: var(--tp-ink); font-weight: 600; }
/* a pick-list of checkboxes in a sheet (batches to assign) */
.tp-picklist { list-style: none; margin: 0 0 var(--tp-s2); padding: 0; max-height: 50vh; overflow-y: auto; border: 1px solid var(--tp-line); border-radius: var(--tp-r-md); }
.tp-picklist li { border-bottom: 1px solid var(--tp-line); }
.tp-picklist li:last-child { border-bottom: 0; }
.tp-picklist li[hidden] { display: none; }
.tp-picklist label { display: flex; align-items: center; gap: 12px; min-height: var(--tp-target); padding: 6px 12px; margin: 0; cursor: pointer; }
.tp-picklist .form-check-input { width: 20px; height: 20px; margin: 0; flex: none; }
.tp-picklist small { display: block; color: var(--tp-muted); font-size: 12px; }
/* a message on the page instead of alert() */
.tp-flash { display: flex; gap: var(--tp-s1); align-items: flex-start; padding: 12px var(--tp-s2); margin-bottom: var(--tp-s2); border-radius: var(--tp-r-md); background: var(--tp-info-soft); color: var(--tp-info); font-weight: 500; white-space: pre-line; }
.tp-flash[hidden] { display: none; }
.tp-flash i { font-size: 18px; }
.tp-flash--ok { background: var(--tp-success-soft); color: var(--tp-success); }
.tp-flash--error { background: var(--tp-danger-soft); color: var(--tp-danger); }
#tp-confirm .tp-sheet__text { white-space: pre-line; }
#tp-confirm .tp-sheet__foot:has([data-confirm-ok][hidden]) { grid-template-columns: minmax(0, 1fr); }
/* the rules of exam readiness; a row of paper badges */
.tp-rulecard summary { list-style: none; cursor: pointer; min-height: var(--tp-target); display: flex; align-items: center; }
.tp-rulecard summary::-webkit-details-marker { display: none; }
.tp-rulecard summary::after { content: '\25BE'; margin-left: auto; color: var(--tp-muted); }
.tp-rulecard[open] summary::after { content: '\25B4'; }
.tp-rules { margin: 0 0 var(--tp-s1); padding-left: 20px; }
.tp-rules li { margin-bottom: 4px; }
.tp-mini { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
/* the Bootstrap dialogs these pages keep (collect, journey, results), in the same look */
.tp-modal .modal-content { border: 0; border-radius: var(--tp-r-lg); color: var(--tp-ink); }
.tp-modal .modal-header { border-bottom: 1px solid var(--tp-line); }
.tp-modal .modal-title { font-size: 16px; font-weight: 600; margin: 0; color: var(--tp-ink); }
.tp-modal .modal-footer { border-top: 1px solid var(--tp-line); }
@media (min-width: 768px) {
/* a wide report scrolls inside its card on a desktop, never the page */
.tp-tablecard:has(> .tp-table--report), .tp-tablecard .dataTables_wrapper:has(> .tp-table--report),
.tp-tablecard .dataTables_wrapper .col-sm-12:has(> .tp-table--report) { overflow-x: auto; position: relative; }
.tp-tablecard .dataTables_paginate { padding-top: 0; }
.tp-tablecard .dataTables_paginate .pagination { justify-content: flex-end !important; }
.tp-tablecard .dataTables_paginate .page-link { min-width: 36px; min-height: 36px; }
.tp-tablecard .dataTables_length select, .tp-tablecard .dataTables_filter input { min-height: 36px; }
.tp-tablecard .dataTables_filter label { justify-content: flex-end; }
.tp-tablecard .dataTables_filter input { flex: 0 1 260px; }
.tp-table--report tr { display: table-row; }
.tp-table--report td.tp-cell-act .tp-btn--sm, .tp-actions .tp-btn--sm { min-height: 36px; }
.tp-table--report th, .tp-table--report td { white-space: nowrap; }
.tp-table--report td[data-label] .tp-badge { white-space: nowrap; }
.tp-table--report td[data-label] > .tp-mini, .tp-table--report td[data-label] > span { max-width: none; }
.tp-table--days tr td.tp-cell-day[data-label] { display: table-cell; min-height: 0; border-radius: 0; background: none !important; }
.tp-table--days tr td.tp-cell-day--p[data-label] { background: var(--tp-success-soft) !important; }
.tp-table--days tr td.tp-cell-day--a[data-label] { background: var(--tp-danger-soft) !important; }
.tp-table--report td.tp-cell-wrap { white-space: normal; min-width: 180px; }
.tp-table--report td.tp-cell-photo { width: 56px; }
.tp-table--report td.tp-cell-index { color: var(--tp-muted); width: 40px; }
.tp-table--report td.tp-cell-check { width: 44px; }
.tp-table--days th.tp-day-head { text-align: center; padding: 6px 4px; font-weight: 500; line-height: 1.25; }
.tp-table--days td.tp-cell-day, .tp-table--days td.tp-cell-day[data-label] { text-align: center; padding: 6px 4px; min-width: 32px; font-weight: 700; }
.tp-contact { justify-content: flex-start; flex-wrap: nowrap; white-space: nowrap; }
.tp-contact .tp-quick { min-height: 32px; width: 32px; }
.tp-attmeter { justify-content: flex-start; flex-wrap: nowrap; }
.tp-fields--row { display: flex; align-items: flex-end; gap: 12px; }
.tp-fields--row .tp-fields__grow { flex: 1 1 220px; }
.tp-fields--row .tp-fields__submit { flex: 0 0 auto; }
.tp-actionbar .tp-fields { flex: 0 1 auto; display: flex; gap: 12px; }
.tp-actionbar .tp-fields > div { min-width: 200px; }
.tp-actionbar .tp-btn { flex: 0 0 auto; }
.tp-actionbar__note { flex: 1 1 auto; text-align: right; }
.tp-btn--block-sm { width: auto; }
.tp-mini { justify-content: flex-start; flex-wrap: nowrap; }
.tp-amount-input { margin-left: 0; text-align: left; }
}
/* ===== end reports & money ===== */
/* ===== owner changes 2026-10-07 ===== */
/* Avatar with a photo: hover (or tap) shows a larger copy in #tp-photo-pop. */
.tp-avatar--photo { padding: 0; border: 0; overflow: hidden; cursor: zoom-in; background: var(--tp-brand-soft); }
.tp-avatar--photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tp-avatar--photo .tp-avatar__initials { display: none; }
.tp-avatar--photo.is-broken { cursor: default; }
.tp-avatar--photo.is-broken img { display: none; }
.tp-avatar--photo.is-broken .tp-avatar__initials { display: inline; }
.tp-photo-pop { position: fixed; z-index: 1080; width: 220px; height: 220px; padding: 4px; border-radius: var(--tp-r-lg); background: var(--tp-surface); box-shadow: 0 8px 24px rgba(29, 39, 51, .25); pointer-events: none; }
.tp-photo-pop img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--tp-r-md); display: block; }
.tp-photo-pop[hidden] { display: none; }
/* "Why?": a link with the reason on hover/tap on wide screens; the reason inline on phone cards. */
.tp-why { display: none; padding: 0; border: 0; background: none; color: var(--tp-brand-strong); font-weight: 600; text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; min-height: 0; }
.tp-why-text { font-size: 13px; }
@media (min-width: 768px) {
.tp-why { display: inline; }
.tp-why-text { display: none; }
}
.tooltip-inner { max-width: 320px; text-align: left; font-size: 13px; padding: 8px 10px; }
/* ===== end owner changes 2026-10-07 ===== */
/* ===== lists stay tables on phones (owner, 2026-10-07) ===== */
/* As cards, a long list made the page very long on a phone. Every .tp-table--cards table is now an
ordinary table at every width, with the same columns as on desktop, scrolling sideways inside
its card. Values match the desktop table, so wide screens look as before. */
*:has(> table.tp-table--cards) { overflow-x: auto; max-width: 100%; position: relative; -webkit-overflow-scrolling: touch; }
.tp-table--cards { display: table !important; width: 100%; }
.tp-table--cards thead { display: table-header-group !important; }
.tp-table--cards tbody { display: table-row-group !important; }
.tp-table--cards tr { display: table-row !important; position: static !important; padding: 0 !important; border: 0 !important; }
.tp-table--cards tr[hidden] { display: none !important; }
.tp-table--cards > thead > tr > th, .tp-table--cards > tbody > tr > td {
display: table-cell !important; position: static !important; margin: 0 !important;
padding: 10px !important; vertical-align: middle !important; white-space: nowrap;
}
.tp-table--cards > tbody > tr > td { border-bottom: 1px solid var(--tp-line) !important; }
.tp-table--cards > tbody > tr:last-child > td { border-bottom: 0 !important; }
.tp-table--cards td[data-label]::before { content: none !important; display: none !important; }
.tp-table--cards td[data-label] > * { text-align: inherit !important; }
.tp-table--cards td.tp-num, .tp-table--cards th.tp-num { text-align: right; }
.tp-table--cards a.tp-person__name { padding: 0 !important; margin: 0 !important; }
.tp-table--cards .tp-person__name, .tp-table--cards .tp-person__sub, .tp-table--cards td[data-label] > * { overflow-wrap: normal; }
.tp-table--cards .tp-cell-quick, .tp-table--cards .tp-row-menu { display: inline-flex !important; position: static !important; gap: 4px; vertical-align: middle; margin: 0 !important; }
.tp-table--cards .tp-quick { min-height: 40px; padding: 0 10px; }
.tp-table--cards .tp-quick span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tp-table--cards tr.tp-row-past { box-shadow: none !important; }
.tp-table--cards tr.tp-row-past > td { background: #FFFBF0 !important; }
.tp-table--cards tr.tp-row-past > td:first-child { box-shadow: inset 3px 0 0 var(--tp-warning); }
.tp-table--cards th { background: var(--tp-canvas); font-size: 12px; font-weight: 600; color: var(--tp-muted); }
@media (min-width: 768px) {
/* wide screens: text cells may wrap again, as before */
.tp-table--cards > thead > tr > th, .tp-table--cards > tbody > tr > td { white-space: normal; }
/* compact actions so a full row (quick actions + the ⋮ menu) fits the card without scrolling */
.tp-table--cards > thead > tr > th, .tp-table--cards > tbody > tr > td { padding: 8px 10px !important; }
.tp-table--cards .tp-quick { min-height: 34px; padding: 0 8px; }
.tp-table--cards .tp-row-menu .tp-btn--icon { width: 34px; min-height: 34px; }
}
/* ===== end lists stay tables on phones ===== */
/* ===== table grid and alignment (owner, 2026-10-07) ===== */
/* Lines between columns, and every cell aligned like its heading (left), so numbers no longer sit
at the far right under a left-aligned heading. The Action column stays right-aligned. */
.tp-table > thead > tr > th, .tp-table > tbody > tr > td { border-right: 1px solid var(--tp-line) !important; }
.tp-table > thead > tr > th:last-child, .tp-table > tbody > tr > td:last-child { border-right: 0 !important; }
.tp-table > thead > tr > th { border-bottom: 1px solid var(--tp-line) !important; }
.tp-table > thead > tr > th, .tp-table > tbody > tr > td,
.tp-table > thead > tr > th.tp-num, .tp-table > tbody > tr > td.tp-num { text-align: left !important; }
.tp-table > tbody > tr > td.tp-cell-actions, .tp-table > thead > tr > th.text-end, .tp-table > tbody > tr > td.text-end { text-align: right !important; }
.tp-table td.tp-num { font-variant-numeric: tabular-nums; }
/* ===== end table grid and alignment ===== */
/* ===== student header, simpler (owner, 2026-10-07: "too cluttered") ===== */
.s360-title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tp-s1) var(--tp-s2); }
.s360-contact { display: inline-flex; gap: 4px; }
.tp-iconlink { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--tp-line); color: var(--tp-ink) !important; font-size: 17px; text-decoration: none; background: var(--tp-surface); }
.tp-iconlink:hover { border-color: var(--tp-brand); color: var(--tp-brand-strong) !important; }
.tp-iconlink--wa { color: var(--tp-success) !important; }
.s360-header .s360-badges { display: flex; justify-content: flex-start; gap: 6px; margin-top: 6px; }
.s360-header .s360-meta { gap: 0; margin-top: 6px; font-size: 13px; }
.s360-header .s360-meta > * + *::before { content: '·'; margin: 0 8px; color: var(--tp-line); color: var(--tp-muted); }
.s360-header .s360-meta a { min-height: 0; display: inline; color: var(--tp-brand-strong); }
/* ===== end student header ===== */
/* last activity: tabular digits, may wrap */
.tp-num-wrap { font-variant-numeric: tabular-nums; }
/* ===== folded sections (owner, 2026-10-07: wallet folded away) ===== */
.tp-collapse { background: var(--tp-surface); border: 1px solid var(--tp-line); border-radius: var(--tp-r-lg); padding: 0 var(--tp-s2); }
.tp-collapse__summary { display: flex; align-items: center; gap: var(--tp-s2); min-height: var(--tp-target); cursor: pointer; list-style: none; }
.tp-collapse__summary::-webkit-details-marker { display: none; }
.tp-collapse__summary .tp-section-title { margin: 0; }
.tp-collapse__caret { margin-left: auto; font-size: 20px; color: var(--tp-muted); transition: transform .15s; }
.tp-collapse[open] .tp-collapse__caret { transform: rotate(180deg); }
.tp-collapse[open] { padding-bottom: var(--tp-s2); }
/* ===== end folded sections ===== */
/* Mobile cell in a report: number and Call / WhatsApp icons on one line at every width now that
phones show tables (the number used to spill out of the cell above two stacked buttons). */
.tp-contact { flex-wrap: nowrap; justify-content: flex-start; white-space: nowrap; }
.tp-contact .tp-quick { min-height: 32px; width: 32px; }
/* One sideways scrollbar per card: a table's scroll box inside another table's scroll box (Mass
collection's instalment form inside its card) does not scroll itself; the outer one does. */
*:has(> table.tp-table--cards) *:has(> table.tp-table--cards) { overflow-x: visible; }
/* Inside tables, badges and button groups stay on one line ("Not paid", Collection + ⋮). */
.tp-table--cards .tp-badge { white-space: nowrap; }
.tp-table--cards .tp-actions { flex-wrap: nowrap; }
/* Phone "More" menu: groups fold (owner, 2026-10-07). Tap a group to open it; wide screens keep
their dropdown groups (styled in the min-width block above). */
@media not all and (min-width: 768px) {
.tp-menu__toggle { min-height: 48px; padding-top: 0; color: var(--tp-ink) !important; font-size: 14px; font-weight: 500; text-transform: none; letter-spacing: 0; cursor: pointer; }
.tp-menu__toggle.is-active { color: var(--tp-brand-strong) !important; }
.tp-menu__caret { display: inline-block; margin-left: auto; font-size: 20px; color: var(--tp-muted); transition: transform .15s; }
.tp-menu__item.is-open > .tp-menu__toggle .tp-menu__caret { transform: rotate(180deg); }
.tp-menu__item--group > .tp-menu__sub { display: none; }
.tp-menu__item--group.is-open > .tp-menu__sub { display: block; }
}
/* Headings are the anchor for DataTables' sort arrows (::before/::after, absolutely placed); with
static headings the arrows floated loose over the table (the stray ⇅). */
.tp-table--cards > thead > tr > th { position: relative !important; }
.tp-table--cards > thead > tr > th:is(.sorting, .sorting_asc, .sorting_desc) { padding-right: 26px !important; }
/* ===== compact table controls, one style everywhere (owner, 2026-10-07: "pagination looks big") =====
DataTables' rows: [length | search] above the table, [info | pager] below. Each pair shares one
line at every width, with 36px controls and 32px page buttons. */
.dataTables_wrapper > .row { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; gap: 8px; margin: 0 !important; padding: 8px 12px; }
.dataTables_wrapper > .row > [class*="col-"] { flex: 0 1 auto !important; width: auto !important; max-width: none !important; padding: 0 !important; min-width: 0; }
.dataTables_wrapper > .row > [class*="col-"]:last-child:not(:first-child) { margin-left: auto; }
.dataTables_wrapper > .row:has(> .col-sm-12 > table), .dataTables_wrapper > .row:has(table) { display: block !important; padding: 0; }
.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter { padding: 0 !important; }
.dataTables_wrapper .dataTables_length label, .dataTables_wrapper .dataTables_filter label {
display: flex !important; align-items: center; gap: 6px; margin: 0 !important; width: auto !important;
font-size: 12px !important; font-weight: 500; color: var(--tp-muted); white-space: nowrap;
}
.dataTables_wrapper .dataTables_length select, .dataTables_wrapper .dataTables_filter input {
min-height: 36px !important; height: 36px; font-size: 13px !important; margin: 0 !important;
border: 1px solid var(--tp-line) !important; border-radius: var(--tp-r-sm) !important; background-color: var(--tp-surface);
}
.dataTables_wrapper .dataTables_length select { padding: 0 26px 0 8px !important; width: auto !important; }
.dataTables_wrapper .dataTables_filter input { width: 160px !important; max-width: 40vw; padding: 0 10px !important; }
.dataTables_wrapper .dataTables_info { padding: 0 !important; font-size: 12px !important; color: var(--tp-muted); white-space: nowrap !important; }
.dataTables_wrapper .dataTables_paginate { padding: 0 !important; margin: 0 !important; }
.dataTables_wrapper .dataTables_paginate .pagination { flex-wrap: nowrap !important; gap: 4px; margin: 0 !important; justify-content: flex-end !important; }
.dataTables_wrapper .dataTables_paginate .page-link {
min-width: 32px !important; min-height: 32px !important; height: 32px; padding: 0 10px !important;
display: flex; align-items: center; justify-content: center; font-size: 13px !important;
border-radius: var(--tp-r-sm) !important; border: 1px solid var(--tp-line) !important; color: var(--tp-ink);
}
.dataTables_wrapper .dataTables_paginate .page-item.active .page-link { background: var(--tp-brand-strong) !important; border-color: var(--tp-brand-strong) !important; color: #fff !important; }
.dataTables_wrapper .dataTables_paginate .page-item.disabled .page-link { color: var(--tp-muted); opacity: .6; }
@media (min-width: 768px) {
.dataTables_wrapper .dataTables_filter input { width: 220px !important; }
}
/* ===== end compact table controls ===== */
/* Phones: just [50 ▾] and a search box with a "Search" placeholder (the words collided). */
@media not all and (min-width: 768px) {
.dataTables_wrapper .dataTables_length label, .dataTables_wrapper .dataTables_filter label { font-size: 0 !important; gap: 0; }
.dataTables_wrapper .dataTables_filter input { width: 100% !important; max-width: none; }
.dataTables_wrapper > .row:first-child > [class*="col-"]:last-child { flex: 1 1 auto !important; }
}
/* ---------- table group bands (Dashboard worklist: Offline, then Live and recorded) ---------- */
.tp-table tr.tp-group-row th {
padding: 6px 10px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
color: var(--tp-brand-strong); background: var(--tp-brand-soft); border-top: 2px solid var(--tp-brand); border-bottom: 1px solid var(--tp-line);
}
.tp-table tr.tp-group-row--other th { color: var(--tp-neutral); background: var(--tp-neutral-soft); border-top-color: var(--tp-line); }
.tp-table tr.tp-group-row:first-child th { border-top: 0; }
.tp-group-row__count { font-weight: 600; color: var(--tp-muted); margin-left: 6px; }
.tp-table tr.tp-group-row[hidden] { display: none; }
/* the label stays in view while the table scrolls sideways on a phone */
.tp-group-row__label { position: sticky; left: var(--tp-s2); display: inline-block; }
/* the month picker above the business figures */
.tp-monthpick__label { font-size: 12px; font-weight: 600; color: var(--tp-muted); margin: 0; }
#month-figures .tp-kpis--flat { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
/* desktop: all five figures in one row */
@media (min-width: 1100px) { #month-figures .tp-kpis--flat { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
#month-figures .tp-kpi__note { color: var(--tp-muted); font-size: 12px; }
/* ---------- guest sign-in (staff and employer): .tp-auth, loaded by the guest layouts ---------- */
body:has(.tp-auth) { background: var(--tp-canvas); color: var(--tp-ink); }
.tp-auth { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--tp-s3) var(--tp-s2); width: 100%; }
.tp-auth__card { width: 100%; max-width: 420px; background: var(--tp-surface); border: 1px solid var(--tp-line); border-radius: var(--tp-r-lg); box-shadow: var(--tp-shadow); padding: var(--tp-s4) var(--tp-s3); }
.tp-auth__brand { margin-bottom: var(--tp-s3); }
.tp-auth__brand img { height: 40px; width: auto; }
.tp-auth__badge { display: inline-block; margin-bottom: var(--tp-s1); padding: 2px 10px; border-radius: 999px; background: var(--tp-brand-soft); color: var(--tp-brand-strong); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.tp-auth__title { font-size: 24px; font-weight: 700; line-height: 1.25; margin: 0 0 4px; color: var(--tp-ink); }
.tp-auth__sub { margin: 0 0 var(--tp-s3); color: var(--tp-muted); font-size: 14px; }
.tp-auth__alert { margin: 0 0 var(--tp-s2); padding: 10px 12px; border-radius: var(--tp-r-sm); font-size: 13px; border: 1px solid transparent; }
.tp-auth__alert ul { margin: 0; padding-left: 18px; }
.tp-auth__alert--error { background: var(--tp-danger-soft); color: var(--tp-danger); border-color: #F4C7C2; }
.tp-auth__alert--info { background: var(--tp-brand-soft); color: var(--tp-brand-strong); border-color: #CFE0FB; }
.tp-auth__field { margin-bottom: var(--tp-s2); }
.tp-auth__label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--tp-ink); }
.tp-auth__input { display: block; width: 100%; min-height: var(--tp-target); padding: 0 12px; font-size: 16px; color: var(--tp-ink); background: var(--tp-surface); border: 1px solid #B9C3D0; border-radius: var(--tp-r-sm); }
.tp-auth__input::placeholder { color: #8591A0; }
.tp-auth__input:focus { outline: 3px solid var(--tp-brand); outline-offset: 0; border-color: var(--tp-brand-strong); }
.tp-auth__pass { position: relative; }
.tp-auth__pass .tp-auth__input { padding-right: 72px; }
.tp-auth__toggle { position: absolute; top: 0; right: 0; height: 100%; min-width: 64px; padding: 0 12px; border: 0; background: none; color: var(--tp-brand-strong); font-size: 13px; font-weight: 600; border-radius: 0 var(--tp-r-sm) var(--tp-r-sm) 0; cursor: pointer; }
.tp-auth__toggle:focus-visible { outline: 3px solid var(--tp-brand); outline-offset: -3px; }
.tp-auth__check { display: flex; align-items: center; gap: var(--tp-s1); min-height: var(--tp-target); margin: 0 0 var(--tp-s1); font-size: 14px; cursor: pointer; }
.tp-auth__check input { width: 18px; height: 18px; }
.tp-auth__submit { display: block; width: 100%; min-height: var(--tp-target); margin-top: var(--tp-s1); border: 0; border-radius: var(--tp-r-sm); background: var(--tp-brand-strong); color: #fff; font-size: 15px; font-weight: 600; cursor: pointer; }
.tp-auth__submit:hover { background: #1E52A8; }
.tp-auth__submit:focus-visible { outline: 3px solid var(--tp-brand); outline-offset: 2px; }
.tp-auth__aside { margin: var(--tp-s3) 0 0; padding-top: var(--tp-s2); border-top: 1px solid var(--tp-line); text-align: center; font-size: 13px; color: var(--tp-muted); }
.tp-auth__aside a, .tp-auth__foot a { color: var(--tp-brand-strong); font-weight: 600; }
.tp-auth__foot { margin: var(--tp-s2) 0 0; text-align: center; font-size: 13px; color: var(--tp-muted); }
/* a long form (employer registration): wider card, short fields side by side, grouped sections */
.tp-auth__card--wide { max-width: 560px; }
.tp-auth__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--tp-s2); }
.tp-auth__row > .tp-auth__field { margin-bottom: var(--tp-s2); }
.tp-auth__row > .tp-auth__input { margin-bottom: 0; }
@media (max-width: 479px) { .tp-auth__row { grid-template-columns: minmax(0, 1fr); gap: 0; } .tp-auth__row > .tp-auth__input { margin-bottom: var(--tp-s1); } }
.tp-auth__section { margin: var(--tp-s3) 0 var(--tp-s2); padding-top: var(--tp-s2); border-top: 1px solid var(--tp-line); font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--tp-muted); }
.tp-auth__section:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.tp-auth__textarea { padding: 10px 12px; min-height: 104px; resize: vertical; }
select.tp-auth__input { padding-right: 8px; }
.tp-auth__hint { margin: -8px 0 var(--tp-s2); font-size: 12px; color: var(--tp-muted); }
.tp-auth__hint a { color: var(--tp-brand-strong); font-weight: 600; }
.tp-auth__notice { margin-bottom: var(--tp-s3); font-size: 14px; color: var(--tp-ink); }
.tp-auth__notice .tp-auth__section { margin-top: 0; padding-top: 0; border-top: 0; }
.tp-auth__notice p { margin: 0 0 var(--tp-s1); }
.tp-auth__notice .tp-auth__hint { margin: var(--tp-s1) 0 0; }
.tp-auth__submit--link { display: flex; align-items: center; justify-content: center; text-decoration: none; }
.tp-auth__submit--link:hover { color: #fff; }
.tp-auth__alert[hidden] { display: none; }
@media not all and (min-width: 480px) { .tp-auth { justify-content: flex-start; } .tp-auth__card { padding: var(--tp-s3) var(--tp-s2); } }
body:has(.tp-auth) .account-pages { margin: 0 !important; padding: 0 !important; }
body:has(.tp-auth) .account-pages > .container { max-width: none; padding: 0; }
body:has(.tp-auth) .account-pages .row { margin: 0; }
/* ---------- sortable column headings (, server-side ?sort=&dir=) ---------- */
.tp-sort { display: inline-flex; align-items: center; gap: 2px; color: inherit; text-decoration: none; white-space: nowrap; }
.tp-table th a.tp-sort, .tp-table th button.tp-sort { color: var(--tp-muted); }
.tp-table th a.tp-sort:hover, .tp-table th button.tp-sort:hover { color: var(--tp-ink); }
.tp-table th a.tp-sort.is-active, .tp-table th button.tp-sort.is-active { color: var(--tp-brand-strong); }
.tp-sort:focus-visible { outline: 3px solid var(--tp-brand); outline-offset: 2px; border-radius: 4px; }
.tp-sort__icon { font-size: 14px; opacity: .45; }
.tp-sort.is-active { color: var(--tp-brand-strong); }
.tp-sort.is-active .tp-sort__icon { opacity: 1; }
th[aria-sort="ascending"], th[aria-sort="descending"] { color: var(--tp-brand-strong); }
button.tp-sort--btn { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
/* ---------- pinned table headings ----------
assets/js/tp-sticky-head.js shows a fixed copy of a table's heading row under the sticky top bar
(--tp-chrome-h, measured) while the page scrolls past the real one. It sits just under the top bar. */
.tp-stickyhead {
position: fixed !important; top: var(--tp-chrome-h, var(--tp-sticky-top)); z-index: 1001; overflow: hidden !important;
background: var(--tp-canvas); border-bottom: 1px solid var(--tp-line); box-shadow: 0 2px 4px rgba(29, 39, 51, .08);
}
.tp-stickyhead[hidden] { display: none; }
.tp-stickyhead > table { table-layout: fixed; margin: 0 !important; width: auto; max-width: none; will-change: transform; }
.tp-stickyhead th { pointer-events: auto; }
/* Business figures: the month's four figures, then the two that ignore the month */
#month-figures .tp-kpis--fixed { margin-top: var(--tp-s2); padding-top: var(--tp-s2); border-top: 1px dashed var(--tp-line); }
.tp-two.tp-two--single { grid-template-columns: minmax(0, 1fr); }
/* every person thumbnail with a photo (assets/js/tp-photo-zoom.js): zoom cursor, keyboard focus ring */
.tp-zoomable:not(.is-broken) { cursor: zoom-in; }
.tp-zoomable:focus-visible { outline: 3px solid var(--tp-brand); outline-offset: 2px; }
.tp-cand__avatar.tp-zoomable { overflow: hidden; }
/* a notice across the top of a page (an employer waiting for approval) and a locked line on a candidate */
.tp-banner { display: flex; align-items: flex-start; gap: var(--tp-s1); margin: 0 0 var(--tp-s2); padding: 12px 14px; border-radius: var(--tp-r-sm); border: 1px solid transparent; font-size: 14px; line-height: 1.45; }
.tp-banner > i { font-size: 20px; line-height: 1.2; flex: none; }
.tp-banner a { font-weight: 600; text-decoration: underline; }
.tp-banner--notice { background: var(--tp-brand-soft); color: var(--tp-brand-strong); border-color: #CFE0FB; }
.tp-cand__locked { display: inline-flex; align-items: center; gap: 6px; margin: 0; color: var(--tp-muted); font-size: 13px; }
/* ===== lists scroll inside their card (owner, 2026-10-15) ===== */
/* A long list used to stretch the page, so reaching the bottom of the table meant a long scroll.
Every list table now has a capped height and its own vertical scrollbar; the header row stays
pinned while the rows scroll. Short tables are unaffected (max-height only bites when taller). */
*:has(> table.tp-table--cards), *:has(> table.tp-table--report) {
max-height: max(360px, calc(100vh - 240px)); overflow-y: auto; overscroll-behavior: contain;
}
.tp-table--cards thead th, .tp-table--report thead th { position: sticky; top: 0; z-index: 3; }
/* ===== Students list fits its card (owner, 2026-10-21) ===== */
/* From laptop width the table wraps its text cells and tightens padding, so a page of 100 rows needs
no sideways scroll. Badges, dates, numbers and the action buttons stay on one line. */
@media (min-width: 992px) {
.tp-table--fit > thead > tr > th, .tp-table--fit > tbody > tr > td { padding: 8px 6px !important; }
.tp-table--fit > tbody > tr > td:not(.tp-cell-actions):not(.tp-cell-badges):not(.tp-tabular):not(.tp-num) { white-space: normal; }
.tp-table--fit .tp-person__name, .tp-table--fit .tp-person__sub { white-space: normal; overflow-wrap: anywhere; }
.tp-table--fit td.tp-cell-main:has(.tp-person) { min-width: 0; }
.tp-table--fit td.tp-cell-wide { min-width: 0; }
}