.site-logo { width: auto; height: 70px; max-width: 210px; object-fit: contain; } /* Admin sidebar brand: shorter block, logo aligned to the left */ .panel-brand { height: 56px; min-height: 56px; justify-content: flex-start; padding: 6px 18px; } .panel-brand img { width: auto; max-width: 160px; max-height: 38px; } /* Admin + school topbar: slim bar */ .panel-topbar { height: 56px !important; padding: 0 15px; } /* Tighter content gutters on admin + school panels */ .panel-main { width: 100%; max-width: 1600px; padding: 15px 15px; margin: 0 auto; flex: 1; } /* Sidebar brand: white backdrop only behind the logo image (admin + school) */ .panel-brand img { background: #fff; padding: 6px 10px; border-radius: 10px; box-shadow: 0 2px 8px rgba(0, 0, 0, .18); } /* Toasts: pinned to the top-right, single brand colour regardless of type */ .app-toast-region { top: 18px !important; right: 18px !important; bottom: auto !important; left: auto !important; } .sidebar-collapsed .app-toast-region { left: auto !important; right: 18px !important; } .app-toast, .app-toast-success, .app-toast-danger, .app-toast-info { background: #15803d !important; border-left: 0 !important; } @media (max-width: 991.98px) { .app-toast-region { top: 14px !important; right: 14px !important; left: auto !important; bottom: auto !important; width: min(360px, calc(100vw - 28px)) !important; } } /* Super admin dashboard cards: DishDash soft tones (blue, grape, green, amber, blue, red, green) */ .dashboard-stat-grid .dashboard-stat-link article { --dd-tone: #3b82c4; --dd-tone-soft: #e4eef7; background: linear-gradient(135deg, var(--dd-tone-soft) 0%, color-mix(in srgb, var(--dd-tone) 35%, white) 100%); } .dashboard-stat-grid .dashboard-stat-link:nth-child(2) article { --dd-tone: #8b6fc7; --dd-tone-soft: #efe9f8; } .dashboard-stat-grid .dashboard-stat-link:nth-child(3) article, .dashboard-stat-grid .dashboard-stat-link:nth-child(7) article { --dd-tone: #9ed387; --dd-tone-soft: #eaf6e3; } .dashboard-stat-grid .dashboard-stat-link:nth-child(4) article { --dd-tone: #e6a020; --dd-tone-soft: #fbf1dc; } .dashboard-stat-grid .dashboard-stat-link:nth-child(6) article { --dd-tone: #e5484d; --dd-tone-soft: #fbe6e6; } :root[data-theme="dark"] .dashboard-stat-grid .dashboard-stat-link article { background: linear-gradient(135deg, #111a2c 0%, color-mix(in srgb, var(--dd-tone) 26%, #111a2c) 100%); } .dashboard-stat-grid .dashboard-stat-link:nth-child(8) article { background:linear-gradient(135deg,#9333ea,#6366f1); } /* Admin cards fill the content column (col-12) with equal left/right gutters */ .panel-main .panel-card, .panel-main .form-panel, .narrow-form, .account-settings-panel { width: 100%; max-width: 100%; margin-left: 0; margin-right: 0; } .account-settings-panel .form-actions { margin-top: 24px; } .action-icons { flex-wrap: nowrap !important; white-space: nowrap; } .action-icons form { flex: 0 0 auto; } .review-cell { width: 340px; min-width: 260px; max-width: 340px; } .package-module-picker { margin: 4px 0 0; padding: 18px; border: 1px solid var(--panel-border); border-radius: 10px; } .package-module-picker legend { float: none; width: auto; margin: 0 0 3px; padding: 0 5px; color: var(--panel-ink); font-size: 13px; font-weight: 800; } .package-module-picker > p { margin: 0 0 14px; color: var(--panel-muted); font-size: 11px; } .module-checkbox-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; } .school-form-section { padding: 22px 0; border-top: 1px solid var(--panel-border); } .school-form-section:first-of-type { border-top: 0; padding-top: 0; } .school-form-section-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; } .school-form-section-head > span { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 34px; color: #fff; border-radius: 10px; background: var(--primary-color); font-weight: 800; } .school-form-section-head h3 { margin: 0; font-size: 16px; } .school-form-section-head p { margin: 2px 0 0; color: var(--panel-muted); font-size: 11px; } .school-section-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: start; } .school-section-grid .grid-full { grid-column: 1 / -1; } .school-section-grid .grid-span-2 { grid-column: span 2; } .master-create-panel { margin-bottom: 18px; } .master-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; padding: 7px; border: 1px solid var(--panel-border); border-radius: 12px; background: #fff; } .master-tabs a { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 9px 15px; border: 1px solid var(--panel-border); border-radius: 8px; color: var(--panel-ink); background: #fff; font-weight: 750; text-decoration: none!important; } .master-tabs a:hover,.master-tabs a.active { color: #fff; background: var(--primary-color); } .master-modal .modal-content { color: var(--panel-ink); border: 1px solid var(--panel-border); border-radius: 14px; background: #fff; box-shadow: 0 24px 70px rgba(15,23,42,.24); } .master-modal .modal-header,.master-modal .modal-footer { border-color: var(--panel-border); } .master-modal .modal-title { font-size: 18px; } .master-modal .modal-body { display: grid; gap: 16px; } .master-modal .modal-body label { display: grid; gap: 7px; font-size: 12px; font-weight: 700; } .master-modal .modal-body input { width: 100%; min-height: 46px; padding: 10px 12px; color: var(--panel-ink); border: 1px solid var(--panel-border); border-radius: 9px; background: #fff; } .master-add-row { display: grid; grid-template-columns: 220px minmax(240px, 1fr) auto; gap: 12px; align-items: end; } .master-add-row label { display: grid; gap: 7px; font-size: 12px; font-weight: 700; } .master-add-row input,.master-add-row select,.master-option-edit input { width: 100%; min-height: 44px; padding: 9px 12px; color: var(--panel-text); border: 1px solid var(--panel-border); border-radius: 9px; background: var(--panel-card); } .master-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; } .master-option-list { display: grid; gap: 9px; } .master-option-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; } .master-option-edit { display: grid; grid-template-columns: minmax(0, 1fr) 38px; gap: 7px; } .master-option-row .action-icons { display: flex; gap: 5px; } .empty-master { margin: 0; color: var(--panel-muted); } @media (max-width: 1050px) { .module-checkbox-grid,.school-section-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .school-section-grid .grid-span-2 { grid-column: 1 / -1; } } .module-checkbox-grid label { display: flex; align-items: center; gap: 0; min-width: 0; padding: 10px 16px 10px 12px; border: 1px solid var(--panel-border); border-radius: 9px; background: #fff; cursor: pointer; } :root[data-theme="dark"] .module-checkbox-grid label { background: #111a2c; border-color: #344057; } .module-checkbox-grid input { width: 18px; height: 18px; flex: 0 0 18px; margin: 0 12px 0 0; accent-color: var(--primary-color); } .module-checkbox-grid span { overflow: hidden; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; } .package-feature-list li { min-height: 34px; align-items: flex-start; justify-content: flex-start; gap: 11px; margin-bottom: 8px; text-align: left; } .package-feature-list li svg { margin-top: 0; } .pricing-grid .price-card.featured { border-width: 1px; outline: 1px solid var(--primary); } .package-feature-list li > span:last-child { line-height: 1.45; } .package-feature-list .is-unavailable { color: #c53030; } .package-unavailable-mark { width: 16px; flex: 0 0 16px; color: #dc2626; font-size: 22px; font-weight: 900; line-height: 16px; text-align: center; } .pricing-not-included { display: inline-flex; align-items: center; gap: 5px; margin-right: 8px; color: #c53030; font-weight: 800; } .pricing-not-included b { color: #dc2626; font-size: 18px; } /* Public pages: consistent rhythm and inline form feedback. */ .section{padding:82px 0}.page-hero{padding:76px 0 72px}.page-hero h1{font-size:clamp(38px,5vw,58px);margin-bottom:18px}.page-hero p{font-size:16px}.section-head{margin-bottom:38px}.cta-section{padding-top:0}.form-field-error{display:block;margin-top:6px;color:#b42318;font-size:11px;font-weight:700}.form-grid input.is-invalid,.form-grid select.is-invalid,.form-grid textarea.is-invalid{border-color:#dc2626;background:#fff7f7;box-shadow:0 0 0 3px rgba(220,38,38,.08)} @media(max-width:820px){.section{padding:64px 0}.page-hero{padding:62px 0}.section-head{margin-bottom:30px}} .service-module-phone { transform: translateX(38px) rotate(4deg); } .service-feature.is-reversed .service-module-phone { transform: translateX(-14px) rotate(-4deg); } /* Footer: solid brand-coloured social buttons (default look, like real icons) */ .site-footer .footer-socials { gap: 10px; flex-wrap: wrap; } .site-footer .footer-socials a { width: 40px; height: 40px; border: 0 !important; color: #fff !important; transition: transform .2s ease, filter .2s ease; } .site-footer .footer-socials a svg { width: 19px; height: 19px; } .site-footer .footer-socials .social-facebook { background: #1877f2; } .site-footer .footer-socials .social-instagram { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); } .site-footer .footer-socials .social-youtube { background: #ff0000; } .site-footer .footer-socials .social-linkedin { background: #0a66c2; } .site-footer .footer-socials a:hover { transform: translateY(-2px); filter: brightness(1.08); } /* Footer: official app-store badge images, dynamic store URLs from admin */ .site-footer .app-downloads { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; } .site-footer .app-downloads a { padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 10px; background: transparent; transition: transform .2s ease; } .site-footer .app-downloads a:hover { transform: translateY(-2px); } .site-footer .app-downloads img { display: block; height: 44px; width: auto; } /* ---- School cards: circular profile, centred details ---- */ .school-grid { grid-template-columns: repeat(3, 1fr); gap: 22px; } .school-card { overflow: visible; border: 1px solid var(--line); border-radius: 20px; background: #fff; box-shadow: 0 12px 35px rgba(17, 43, 78, .07); transition: transform .3s ease, box-shadow .3s ease; } .school-card:hover { transform: translateY(-6px); box-shadow: 0 22px 55px rgba(17, 43, 78, .13); } .school-card .school-card-inner { display: flex; flex-direction: column; align-items: center; gap: 9px; height: 100%; padding: 32px 24px 26px; text-align: center; color: inherit; } .school-card .school-avatar { width: 90px; height: 90px; display: grid; place-items: center; overflow: hidden; border-radius: 50%; color: #fff; background: linear-gradient(135deg, var(--primary), #2f6cab); box-shadow: 0 10px 24px rgba(23, 63, 117, .25); font: 800 25px "Plus Jakarta Sans", Manrope, sans-serif; letter-spacing: .02em; } .school-card .school-avatar img { width: 100%; height: 100%; object-fit: cover; } .school-card .school-card-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 3px; } .school-card .school-card-meta span { padding: 4px 10px; color: var(--primary); border-radius: 999px; background: #edf3f9; font-size: 9px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; } .school-card h3 { margin: 3px 0 0; font-size: 18px; } .school-card .school-location { display: inline-flex; align-items: center; justify-content: center; gap: 6px; margin: 0; color: var(--muted); font-size: 12px; } .school-card .school-location svg { width: 15px; color: var(--secondary); } .school-card .school-classrange { margin: 0; color: var(--muted); font-size: 11px; font-weight: 700; } .school-card .school-card-cta { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 12px; color: var(--primary); font-size: 12px; font-weight: 800; } .school-card .school-card-cta svg { width: 15px; transition: transform .25s; } .school-card:hover .school-card-cta svg { transform: translateX(4px); } /* Home: featured schools scroll horizontally, like the testimonials row */ .section-head-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .school-carousel { display: flex; gap: 20px; margin-top: 40px; padding: 4px 2px 14px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: thin; } .school-carousel > .school-card { flex: 0 0 clamp(250px, 28vw, 300px); scroll-snap-align: start; } @media (max-width: 992px) { .school-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .school-grid { grid-template-columns: 1fr; } .school-carousel > .school-card { flex-basis: 82%; } } /* Website: kill horizontal scroll + tighten the vertical rhythm. Use overflow-x: clip (NOT hidden) so it doesn't break position: sticky. */ html, body { overflow-x: clip; max-width: 100%; } /* Header stays pinned at the top on scroll (not only when scrolling back up) */ .site-header { position: -webkit-sticky; position: sticky; top: 0; z-index: 200; } /* Not-found / error page (inside the website header + footer) */ .error-section { padding: 0; } .error-404 { max-width: 720px; margin: 0 auto; padding: 0; text-align: center; } .error-404 .error-art { display: block; width: 100%; max-width: 560px; height: auto; margin: 0 auto; } .error-404 h1 { margin: 18px 0 12px; font: 800 clamp(38px, 8vw, 76px) / 1.05 "Plus Jakarta Sans", Manrope, sans-serif; letter-spacing: -.03em; color: var(--ink, #101828); } .error-404 .error-lead { margin: 0 auto 30px; max-width: 520px; font-size: clamp(15px, 2.2vw, 20px); color: var(--muted); } .error-404 .error-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } main, .site-footer { overflow-x: clip; } .section { padding: 68px 0; } .section-head { margin-bottom: 32px; } .page-hero { padding: 60px 0 54px; } /* ---- Home rotating hero banner (admin-managed, up to 2 slides) ---- */ .home-banner { position: relative; overflow: hidden; background: var(--primary-900); } .home-banner-track { display: flex; transition: transform .7s cubic-bezier(.6, .2, .1, 1); } .home-banner-slide { position: relative; flex: 0 0 100%; font-size: 0; } .home-banner-slide.is-linked { cursor: pointer; } /* Image scales with the screen width — whole banner visible on mobile, no crop. On desktop it's fixed to a hero height with a centred crop. */ .home-banner-img { display: block; width: 100%; height: auto; } @media (min-width: 992px) { .home-banner-img { height: 506px; object-fit: cover; object-position: center; } } /* Stretched link — clicking anywhere on the banner opens the configured URL */ .home-banner-link { position: absolute; inset: 0; z-index: 3; } .home-banner-dots { position: absolute; left: 0; right: 0; bottom: 20px; display: flex; justify-content: center; gap: 9px; z-index: 2; } .home-banner-dots button { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .4); cursor: pointer; transition: width .25s ease, background-color .25s ease; } .home-banner-dots button.is-active { width: 26px; border-radius: 999px; background: var(--secondary); } @media (max-width: 767px) { .home-banner-dots { bottom: 10px; } .home-banner-dots button { width: 8px; height: 8px; } .home-banner-dots button.is-active { width: 20px; } } /* ---- Home "at a glance" stats — plain white cards (values from admin) ---- */ .stats-section { padding: 56px 0 !important; background: #fff; } .stats-section .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .stats-section .stat-card { display: flex; flex-direction: column; gap: 6px; padding: 26px 24px; border: 1px solid var(--line); border-radius: 18px; background: #fff; color: var(--ink); box-shadow: 0 10px 28px rgba(17, 43, 78, .06); } .stats-section .stat-card strong { font: 800 32px "Plus Jakarta Sans", Manrope, sans-serif; color: var(--primary); letter-spacing: -.02em; } .stats-section .stat-card > span { color: var(--muted); font-size: 13px; font-weight: 600; } @media (max-width: 900px) { .stats-section { padding: 40px 0 !important; } .stats-section .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } .stats-section .stat-card { padding: 18px 18px; border-radius: 14px; } .stats-section .stat-card strong { font-size: 26px; } } @media (max-width: 520px) { .stats-section .stats-grid { grid-template-columns: 1fr; } } /* Three-up form grid (col-12 on mobile, col-md-4 / col-lg-4 from tablet up) */ .form-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .form-grid.cols-3 > label.full { grid-column: 1 / -1; } @media (max-width: 767.98px) { .form-grid.cols-3 { grid-template-columns: 1fr; } } /* Searchable selects sit exactly where a plain input does: same gap under the label (inputs have margin-top:7px) and same 44px height, so fields in a row line up. */ .form-panel label > .select2-container, .form-grid label > .select2-container { display: block; margin-top: 7px; } .master-modal .modal-body label > .select2-container { margin-top: 0; } .master-modal .modal-body input, .master-modal .modal-body select, .master-modal .modal-body textarea { margin-top: 0; } .form-grid > label { align-self: start; } /* Opening any popup (add / edit / delete / view — admin, school panel) must not move the page. Bootstrap hides the scrollbar and pads by its width; because html/body use overflow-x:clip the scrollbar never actually hides, so that padding shoved the page left. Keep the scrollbar as-is, drop every compensating padding, and let the popup fade in place. */ html { scrollbar-gutter: stable; } body.modal-open { overflow: auto !important; padding-right: 0 !important; } body.modal-open .fixed-top, body.modal-open .fixed-bottom, body.modal-open .is-fixed { padding-right: 0 !important; } body.modal-open .sticky-top { margin-right: 0 !important; } .modal { padding-left: 0 !important; padding-right: 0 !important; overscroll-behavior: contain; } .modal.fade .modal-dialog, .modal.show .modal-dialog { transform: none !important; } /* AJAX form status banner (contact + school inquiry) */ .form-ajax-alert { align-items: center; font-size: 13px; font-weight: 600; line-height: 1.5; animation: form-alert-in .25s ease; } .form-ajax-alert.alert-error { display: flex; } .form-ajax-alert-icon { width: 24px; height: 24px; flex: 0 0 24px; display: grid; place-items: center; border-radius: 50%; color: #fff; font-size: 13px; font-weight: 800; background: #16a34a; } .form-ajax-alert.alert-error .form-ajax-alert-icon { background: #dc2626; } @keyframes form-alert-in { from { opacity: 0; transform: translateY(-4px); } } .btn.is-loading { opacity: .75; cursor: wait; } /* School inquiry: 10 "what happens next" steps — tighter rhythm so the list stays compact */ .inquiry-layout .steps-list { margin: 26px 0; } .inquiry-layout .steps-list li { margin: 16px 0; align-items: flex-start; } /* Responsive tables (admin + school panel). The hidden toggle checkbox is absolutely positioned; without a positioned parent it escaped the table's scroll box and widened the whole page on phones, cutting off the right-hand columns. */ .panel-status-toggle { position: relative; } .table-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .panel-card, .panel-main, .panel-wrap { min-width: 0; } @media (max-width: 767.98px) { .table-wrap table { min-width: 640px; } .table-wrap th, .table-wrap td { white-space: normal; } .table-wrap td b { min-width: 120px; } } /* Admin + school panel pagination: Laravel's Bootstrap 5 view (set in EnsureAdmin / EnsureSchoolUser). No card or background behind it, round buttons, aligned right. */ .panel-main div.pagination { display: block; margin-top: 18px; padding: 0; background: none; border: 0; box-shadow: none; } .panel-main div.pagination > nav { display: flex; justify-content: flex-end; } /* "Showing 1 to 20 of 46 results" on the left, page numbers on the right. */ .panel-main div.pagination > nav > div.d-sm-flex { flex: 1 1 auto !important; flex-wrap: wrap; align-items: center; justify-content: space-between !important; gap: 10px 14px; } .panel-main div.pagination > nav > div.d-sm-flex > div:last-child { margin-left: auto; } /* School Master lists: page buttons only, no "Showing … results" count. */ .panel-main div.pagination-no-count > nav > div.d-sm-flex > div:first-child { display: none; } .panel-main div.pagination p.small { margin: 0; color: var(--panel-muted) !important; font-size: 12px; } .panel-main ul.pagination { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; margin: 0; padding: 0; background: none; box-shadow: none; } .panel-main ul.pagination .page-link { width: 36px; height: 36px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--panel-border); border-radius: 50% !important; margin: 0 !important; background: transparent; color: var(--panel-ink); font-size: 13px; font-weight: 700; line-height: 1; box-shadow: none; } .panel-main ul.pagination .page-link:hover { border-color: var(--panel-primary); background: transparent; color: var(--panel-primary); } .panel-main ul.pagination .page-item.active .page-link { border-color: var(--panel-primary); background: var(--panel-primary); color: #fff; } .panel-main ul.pagination .page-item.disabled .page-link { background: transparent; opacity: .45; } .panel-main ul.pagination .page-link:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--panel-primary) 20%, transparent); } /* Phones: Bootstrap shows Previous / Next pills instead of page numbers. */ .panel-main div.pagination > nav > div.d-sm-none { gap: 8px; justify-content: flex-end !important; } .panel-main div.pagination > nav > div.d-sm-none .page-link { width: auto; padding: 0 16px; border-radius: 999px !important; } /* School masters grouped by class (sections, subjects, fee heads) */ .group-chips { display: flex; flex-wrap: wrap; gap: 6px; } .group-chip { display: inline-flex; flex-direction: column; padding: 5px 10px; border: 1px solid var(--panel-border); border-radius: 9px; background: #f5f8fc; line-height: 1.35; } .group-chip b { font-size: 13px; } .panel-main table td .group-chip b { display: inline; } .group-chip em { color: var(--panel-muted); font-size: 11px; font-style: normal; } .group-chip.is-inactive { opacity: .55; text-decoration: line-through; } :root[data-theme="dark"] .group-chip { background: #111a2e; } .group-rows { display: grid; gap: 10px; } .group-row { display: flex; align-items: flex-end; gap: 10px; padding: 10px; border: 1px solid var(--panel-border); border-radius: 10px; } .group-row .group-field { flex: 1 1 0; min-width: 0; margin: 0; } .group-row .group-field-name { flex-grow: 2; } .group-row .group-remove { flex: 0 0 auto; margin-bottom: 3px; } .master-modal .modal-body .group-row select { width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid var(--panel-border); border-radius: 9px; background: #fff; } .group-add { justify-self: start; width: auto; } /* Narrower popups for class-wise masters and staff; long lists scroll inside the popup. */ .modal-dialog.grouped-modal, .modal-dialog.staff-modal { max-width: 640px; } .grouped-modal .group-rows, .staff-modal .group-rows { max-height: 46vh; overflow-y: auto; padding-right: 4px; } .group-row .group-active { flex: 0 0 auto; margin: 0 0 10px; } .staff-fresher-box { display: flex; align-items: center; gap: 9px; min-height: 44px; margin-top: 7px; padding: 0 12px; border: 1px solid var(--panel-border); border-radius: 9px; font-weight: 600; cursor: pointer; } .staff-fresher-box input { width: 18px !important; height: 18px; min-height: 0 !important; margin: 0 !important; accent-color: var(--panel-primary); } .staff-form [data-teacher-block][hidden], .staff-form [data-experience][hidden] { display: none !important; } .staff-form .school-form-section-head h3 small { color: var(--panel-muted); font-weight: 600; } .staff-teacher-block { grid-column: 1 / -1; display: grid; gap: 10px; padding: 12px; border: 1px dashed var(--panel-border); border-radius: 12px; } .staff-teacher-block[hidden] { display: none; } .staff-teacher-block h3 { margin: 0; font-size: 14px; font-weight: 800; color: var(--panel-ink); } .staff-teacher-block h3 small { color: var(--panel-muted); font-weight: 600; } .staff-modal .group-row select { width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid var(--panel-border); border-radius: 9px; background: #fff; } @media (max-width: 575.98px) { .group-row { flex-wrap: wrap; } .group-row .group-field { flex-basis: 100%; } } /* Attendance status dropdown in the list, leave balance box */ .attendance-status-form { margin: 0; } .attendance-status-form select { min-width: 118px; min-height: 36px; padding: 6px 10px; border: 1px solid var(--panel-border); border-radius: 8px; background: #fff; font-size: 13px; font-weight: 600; } .leave-balance-box { display: grid; gap: 4px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--panel-primary) 30%, transparent); border-radius: 10px; background: color-mix(in srgb, var(--panel-primary) 6%, transparent); font-size: 13px; } .leave-balance-box[hidden] { display: none; } .leave-split { display: block; white-space: nowrap; } .leave-cancel { min-height: 34px; padding: 0 12px; font-size: 12px; } .card-head > .reset-button, .card-head > .primary-button { flex: 0 0 auto; white-space: nowrap; } .policy-days { max-width: 120px; min-height: 40px; } /* Salary slip statement (page; the PDF has its own inline styles) */ .salary-slip table { width: 100%; border-collapse: collapse; margin: 0 0 14px; font-size: 13px; } .salary-slip th, .salary-slip td { padding: 9px 10px; border: 1px solid var(--panel-border); text-align: left; vertical-align: top; } .salary-slip .slip-grid th { width: 20%; background: #f5f8fc; color: var(--panel-muted); font-weight: 700; } .salary-slip .slip-money thead th { background: var(--panel-primary); color: #fff; } .salary-slip .num { text-align: right; white-space: nowrap; } .salary-slip .slip-subtotal td { background: #f5f8fc; font-weight: 800; } .salary-slip .slip-net td { background: var(--panel-primary); color: #fff; font-size: 16px; font-weight: 800; } .salary-slip small { color: var(--panel-muted); } :root[data-theme="dark"] .salary-slip .slip-grid th, :root[data-theme="dark"] .salary-slip .slip-subtotal td { background: #111a2e; } /* ID card preview: real card size shown 1.6× larger, front and back side by side */ .idc-preview { display: flex; flex-wrap: wrap; gap: 28px; } .idc-preview figure { margin: 0; text-align: center; } .idc-preview figcaption { margin-top: 10px; color: var(--panel-muted); font-size: 12px; font-weight: 700; } .idc-zoom { width: calc(54mm * 1.6); height: calc(85.6mm * 1.6); } .idc-zoom > .idc { transform: scale(1.6); transform-origin: top left; box-shadow: 0 4px 18px rgba(15, 23, 42, .12); } .idc-print-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; } .staff-photo-row { display: flex; align-items: center; gap: 14px; margin-top: 7px; } .staff-photo-row input[type=file] { margin-top: 0 !important; } .staff-photo-preview { width: 64px; height: 72px; flex: 0 0 64px; display: grid; place-items: center; overflow: hidden; border: 1px dashed var(--panel-border); border-radius: 10px; background: #f5f8fc; color: #94a3b8; font-size: 24px; } .staff-photo-preview img { width: 100%; height: 100%; object-fit: cover; } .staff-form-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px; } .staff-form-actions .staff-fresher-box { margin: 0 auto 0 0; } .staff-document-previews, .staff-document-previews [data-new-documents] { display: flex; flex-wrap: wrap; gap: 12px; } .staff-document-previews [data-new-documents]:empty { display: none; } .staff-document-tile { position: relative; width: 76px; text-align: center; } .staff-document-thumb { display: grid; place-items: center; width: 60px; height: 60px; margin: 0 auto 5px; overflow: hidden; border: 1px solid var(--panel-border); border-radius: 10px; background: color-mix(in srgb, var(--panel-primary) 6%, #fff); color: var(--panel-primary); font-size: 24px; } .staff-document-thumb img { width: 100%; height: 100%; object-fit: cover; } .staff-document-close { position: absolute; top: -7px; right: 1px; display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 2px solid #fff; border-radius: 50%; background: #dc2626; color: #fff; font-size: 11px; } .staff-document-tile small { display: block; overflow: hidden; color: var(--panel-muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; } .support-history { display: grid; gap: 14px; } .support-history-item { display: grid; grid-template-columns: 38px 1fr; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--panel-border); } .support-history-item:last-child { padding-bottom: 0; border-bottom: 0; } .support-history-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: color-mix(in srgb, var(--panel-primary) 10%, transparent); color: var(--panel-primary); } .support-history-head { display: flex; justify-content: space-between; gap: 12px; } .support-history-head time, .support-history-item small { color: var(--panel-muted); font-size: 11px; } .support-history-item p { margin: 8px 0 0; white-space: pre-wrap; } /* School fee collection */ .fee-collect-table td input[type=number] { width: 130px; min-height: 40px; margin: 0; } .fee-collect-table td input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--panel-primary); } .fee-collect-table tfoot td { border-top: 2px solid var(--panel-border); font-size: 14px; } .fee-history-edit { margin-left: 8px; color: var(--panel-muted); font-size: 11px; } .fee-history-edit:hover { color: var(--panel-primary); } .panel-main table tr.fee-history-current td { background: color-mix(in srgb, var(--panel-primary) 8%, transparent); } /* Empty tables ("No subjects yet…", "Nothing here yet."): message centred, admin + school. An empty-state row is the only row in tbody and has one cell spanning every column. */ .panel-main table tbody tr:only-child > td[colspan]:only-child { padding: 34px 0 !important; color: var(--panel-muted); text-align: center !important; } .panel-main .table-empty-message { position: sticky; left: 0; display: block; max-width: 100%; padding: 0 16px; box-sizing: border-box; text-align: center; white-space: normal; } /* Page header on phones: the action button keeps its label on one line. */ .panel-page-header-action .primary-button, .panel-page-header-action .back-button, .panel-page-header-action .reset-button { white-space: nowrap; } /* Several header buttons (Auto generate + Add holiday, leave shortcuts) never touch. */ .panel-page-header-action { flex-wrap: wrap; align-items: center; gap: 10px; } @media (max-width: 575.98px) { .panel-page-header { display: flex !important; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; } .panel-page-header h1 { flex: 1 1 auto; min-width: 0; } .panel-page-header-action { display: flex; flex-wrap: wrap; gap: 8px; } } /* Alert Notification composer — audience selection now, Firebase delivery later. */ .alert-intro-card { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; } .alert-intro-card > div { min-width: 0; flex: 1; } .alert-intro-card h2 { margin: 0 0 3px; font-size: 17px; } .alert-intro-card p { margin: 0; color: var(--panel-muted); } .alert-intro-icon, .alert-preview-icon { width: 48px; height: 48px; flex: 0 0 48px; display: grid; place-items: center; border-radius: 14px; background: color-mix(in srgb, var(--panel-primary) 12%, white); color: var(--panel-primary); font-size: 20px; } .alert-composer { display: grid; gap: 20px; } .alert-composer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .alert-composer-grid .full { grid-column: 1 / -1; } .alert-recipient-choice { width: min(100%, 420px); } .alert-target-panel { display: grid; gap: 16px; } .alert-target-panel[hidden] { display: none; } .alert-field { display: grid; gap: 7px; color: #475569; font-size: 12px; font-weight: 700; } .alert-field input, .alert-field textarea, .alert-field select { width: 100%; border: 1px solid var(--panel-border); border-radius: 10px; background: var(--panel-card, #fff); color: var(--panel-ink); font: inherit; } .alert-field input, .alert-field textarea { padding: 10px 12px; } .alert-field textarea { min-height: 105px; resize: vertical; } .alert-field select[multiple] { min-height: 132px; padding: 6px; } .alert-field select option { padding: 7px 8px; border-radius: 6px; } .alert-field small, .alert-delivery-note { color: var(--panel-muted); font-size: 11px; font-weight: 500; } .alert-field :is(input, textarea, select):focus { outline: 0; border-color: var(--panel-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--panel-primary) 14%, transparent); } .alert-section-head { display: flex; align-items: center; gap: 10px; padding-top: 2px; border-top: 1px solid var(--panel-border); } .alert-section-head > span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; background: var(--panel-primary); color: #fff; font-size: 12px; font-weight: 800; } .alert-section-head h3 { margin: 0; color: var(--panel-ink); font-size: 15px; } .alert-section-head p { margin: 1px 0 0; color: var(--panel-muted); font-size: 12px; } .alert-audience-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .alert-audience-option { position: relative; cursor: pointer; } .alert-audience-option input { position: absolute; opacity: 0; pointer-events: none; } .alert-audience-option > span { min-height: 116px; display: flex; flex-direction: column; gap: 6px; padding: 14px; border: 1px solid var(--panel-border); border-radius: 12px; background: var(--panel-card, #fff); transition: .18s ease; } .alert-audience-option i { color: var(--panel-primary); font-size: 18px; } .alert-audience-option b { color: var(--panel-ink); font-size: 13px; } .alert-audience-option small { color: var(--panel-muted); font-size: 11px; font-weight: 500; line-height: 1.35; } .alert-audience-option input:checked + span { border-color: var(--panel-primary); background: color-mix(in srgb, var(--panel-primary) 8%, white); box-shadow: 0 0 0 3px color-mix(in srgb, var(--panel-primary) 10%, transparent); } .alert-role-pills { display: flex; flex-wrap: wrap; gap: 8px; } .alert-role-pills label { cursor: pointer; } .alert-role-pills input { position: absolute; opacity: 0; pointer-events: none; } .alert-role-pills span { display: inline-flex; align-items: center; min-height: 34px; padding: 7px 11px; border: 1px solid var(--panel-border); border-radius: 999px; background: var(--panel-card, #fff); color: var(--panel-muted); font-size: 12px; font-weight: 700; } .alert-role-pills input:checked + span { border-color: var(--panel-primary); background: var(--panel-primary); color: #fff; } .alert-preview { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--panel-primary) 25%, white); border-radius: 13px; background: color-mix(in srgb, var(--panel-primary) 6%, white); } .alert-preview > div { min-width: 0; display: flex; align-items: center; gap: 12px; } .alert-preview small, .alert-preview strong, .alert-preview p { display: block; } .alert-preview small { color: var(--panel-muted); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } .alert-preview strong { margin-top: 2px; color: var(--panel-ink); font-size: 14px; } .alert-preview p { margin: 3px 0 0; color: var(--panel-muted); font-size: 12px; } .alert-preview > span { max-width: 32%; color: var(--panel-primary); font-size: 12px; font-weight: 800; text-align: right; } .alert-delivery-note { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; } :root[data-theme="dark"] .alert-audience-option input:checked + span, :root[data-theme="dark"] .alert-preview { background: color-mix(in srgb, var(--panel-primary) 18%, #111a2c); } @media (max-width: 991.98px) { .alert-audience-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 575.98px) { .alert-intro-card { align-items: flex-start; flex-wrap: wrap; } .alert-intro-card .status-pill { margin-left: 62px; } .alert-composer-grid, .alert-audience-grid { grid-template-columns: 1fr; } .alert-composer-grid .full { grid-column: auto; } .alert-preview { align-items: flex-start; flex-direction: column; } .alert-preview > span { max-width: none; text-align: left; } .alert-delivery-note { width: 100%; margin-left: 0; } } /* School dashboard: plan card */ .plan-card { margin-bottom: 20px; border-top: 4px solid #16a34a; } .plan-card.is-warning { border-top-color: #f59e0b; } .plan-card.is-expired { border-top-color: #dc2626; } .plan-card-main { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .plan-card-icon { width: 50px; height: 50px; flex: 0 0 50px; display: grid; place-items: center; border-radius: 14px; background: color-mix(in srgb, var(--panel-primary) 12%, transparent); color: var(--panel-primary); font-size: 20px; } .plan-card-copy { flex: 1 1 220px; min-width: 0; } .plan-card-eyebrow { color: var(--panel-muted); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } .plan-card-copy h2 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 2px 0 0; font-size: 20px; font-weight: 800; color: var(--panel-ink); } .plan-card-copy p { margin: 2px 0 0; color: var(--panel-muted); font-size: 13px; } .plan-card-days { text-align: right; } .plan-card-days strong { display: block; font-size: 32px; font-weight: 800; line-height: 1; color: var(--panel-ink); } .plan-card-days span { color: var(--panel-muted); font-size: 12px; font-weight: 700; } .plan-card.is-warning .plan-card-days strong { color: #d97706; } .plan-card.is-expired .plan-card-days strong { color: #dc2626; } .plan-card-progress { height: 8px; margin-top: 16px; overflow: hidden; border-radius: 99px; background: var(--panel-border); } .plan-card-progress span { display: block; height: 100%; border-radius: inherit; background: #16a34a; } .plan-card.is-warning .plan-card-progress span { background: #f59e0b; } .plan-card.is-expired .plan-card-progress span { background: #dc2626; } .plan-card-dates { margin: 8px 0 0; color: var(--panel-muted); font-size: 13px; } .plan-card-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 22px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--panel-border); } .plan-card-grid h3 { margin: 0 0 10px; color: var(--panel-ink); font-size: 14px; font-weight: 800; } .plan-card-grid .group-chip i { color: #16a34a; } .plan-renew-form { display: grid; gap: 10px; } .plan-renew-form .primary-button { justify-self: start; } @media (max-width: 767.98px) { .plan-card-grid { grid-template-columns: 1fr; } .plan-card-days { text-align: left; } } /* School dashboard: stat cards + charts */ .school-stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin-bottom: 20px; } .school-stat-card { position: relative; display: block; min-height: 118px; overflow: hidden; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; } a.school-stat-card:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(15, 23, 42, .18); } .school-stat-card em { display: block; margin-top: 4px; font-size: 12px; font-style: normal; opacity: .9; } .school-stat-icon { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: rgba(255, 255, 255, .2); font-size: 17px; } .school-stat-card small { padding-right: 48px; } .school-chart-grid { margin-bottom: 20px; } .school-chart-grid .chart-card { margin-bottom: 0; } .chart-legend i.legend-dot-0 { background: var(--panel-primary); } .chart-legend i.legend-dot-1 { background: var(--panel-secondary); } .chart-legend i.legend-dot-2 { background: #94a3b8; } .chart-empty { margin: 0; padding: 40px 10px; color: var(--panel-muted); text-align: center; } /* Admin school view page */ .school-view-head { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 20px; } .school-view-logo { width: 72px; height: 72px; flex: 0 0 72px; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--panel-border); border-radius: 16px; background: linear-gradient(135deg, var(--panel-primary), var(--panel-secondary)); color: #fff; font-size: 28px; font-weight: 800; } .school-view-logo img { width: 100%; height: 100%; object-fit: contain; background: #fff; } .school-view-title { min-width: 0; flex: 1 1 240px; } .school-view-title h2 { margin: 0; font-size: 20px; font-weight: 800; color: var(--panel-ink); overflow-wrap: anywhere; } .school-view-title p { margin: 4px 0 0; color: var(--panel-muted); font-size: 13px; } .school-view-switches { display: flex; flex-wrap: wrap; gap: 18px; } .school-view-switches form { margin: 0; } .school-view-card { margin-bottom: 20px; } .school-view-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; } .school-view-section-title { margin: 22px 0 12px; padding-top: 18px; border-top: 1px solid var(--panel-border); color: var(--panel-primary); font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; } .school-view-card .card-head + .school-view-section-title { margin-top: 0; padding-top: 0; border-top: 0; } .school-view-details { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } .school-view-links a { display: flex; align-items: center; gap: 10px; padding: 11px 13px; border: 1px solid var(--panel-border); border-radius: 10px; color: var(--panel-ink); font-weight: 700; font-size: 13px; text-decoration: none; } .school-view-links a i { width: 18px; color: var(--panel-primary); text-align: center; } .school-view-links a:hover { border-color: var(--panel-primary); color: var(--panel-primary); } .school-view-description { color: var(--panel-ink); font-size: 14px; line-height: 1.7; overflow-wrap: anywhere; } .school-view-description img { max-width: 100%; height: auto; } .panel-main table td small.date-range-cell { line-height: 1.5; margin-top: 4px; } /* Admin blogs: post title column fixed at 250px, wraps onto more lines */ .panel-main table .blog-post-col { width: 250px; max-width: 250px; min-width: 250px; white-space: normal; overflow-wrap: anywhere; } .panel-main table td.blog-post-col b { min-width: 0; } /* FAQ answer / testimonial review popup */ .content-modal-text { margin: 0; color: var(--panel-ink); font-size: 14px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; } .content-modal-rating { margin: 0; color: #f59e0b; font-size: 14px; letter-spacing: 2px; } /* From / To dates stacked in one table cell */ .panel-main table td.date-range-cell { line-height: 1.55; white-space: nowrap; } .panel-main table td.date-range-cell .status-pill { display: inline-flex; margin-top: 5px; } /* Panel filter bars: responsive grid (~col-md-3) instead of a wrapping flex row */ .panel-filter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; align-items: end; margin-bottom: 20px; } .panel-filter-grid > label, .panel-filter-grid > label:first-child { width: auto !important; min-width: 0 !important; margin: 0; } .panel-filter-grid > .primary-button, .panel-filter-grid > .reset-button, .panel-filter-grid > button { height: 44px; align-self: end; } /* Filter action buttons (Filter + Clear) sit together in one grid cell */ .panel-filter-grid .filter-actions { display: flex; gap: 10px; align-items: end; } .panel-filter-grid .filter-actions .primary-button, .panel-filter-grid .filter-actions .reset-button { height: 44px; white-space: nowrap; } /* Status toggle: green = active, red = deactivated (admin + school, everywhere) */ .panel-status-toggle-track { background: #dc2626; } .panel-status-toggle input:checked + .panel-status-toggle-track { background: #16a34a; } /* Reusable coloured status pill — green (paid/done), red (pending/generated), etc. */ .status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; font-size: 11px; font-weight: 800; line-height: 1; text-transform: capitalize; white-space: nowrap; } .status-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .status-pill.status-green { color: #15803d; background: #dcfce7; } .status-pill.status-red { color: #b91c1c; background: #fee2e2; } .status-pill.status-amber { color: #b45309; background: #fef3c7; } .status-pill.status-blue { color: #1d4ed8; background: #dbeafe; } /* select2 sizing so it matches panel inputs (filters + modals) */ .panel-main .select2-container, .master-modal .select2-container { width: 100% !important; } /* Clear (×) on the right of a chosen dropdown, just before the arrow — undo a wrong pick in one click */ .select2-container--default .select2-selection--single { position: relative; } .select2-container--default .select2-selection--single .select2-selection__clear { position: absolute; top: 50%; right: 30px; z-index: 2; transform: translateY(-50%); width: 20px; height: 20px; margin: 0; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; float: none; background: #eef2f7; color: #64748b; font-size: 15px; font-weight: 700; line-height: 1; cursor: pointer; } .select2-container--default .select2-selection--single .select2-selection__clear:hover { background: #fee2e2; color: #b91c1c; } .select2-container--default .select2-selection--single .select2-selection__clear ~ .select2-selection__rendered, .select2-container--default .select2-selection--single .select2-selection__rendered:has(+ .select2-selection__clear) { padding-right: 56px; } :root[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__clear { background: rgba(148, 163, 184, .18); color: #cbd5e1; } /* Multi-select (e.g. several staff roles): same box as the single dropdown, chips inside */ .panel-main .select2-container--default .select2-selection--multiple, .master-modal .select2-container--default .select2-selection--multiple { min-height: 44px; padding: 4px 34px 4px 6px; border: 1px solid #dce1e9; border-radius: 9px; position: relative; } .select2-container--default .select2-selection--multiple .select2-selection__choice { margin: 3px 4px 3px 0; padding: 2px 8px 2px 22px; border: 0; border-radius: 999px; background: #e8f0fb; color: var(--panel-primary, #1e5797); font-size: 12px; font-weight: 700; } .select2-container--default .select2-selection--multiple .select2-selection__choice__remove { border: 0; color: inherit; top: 50%; transform: translateY(-50%); } .select2-container--default .select2-selection--multiple .select2-selection__clear { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); margin: 0; padding: 0 4px; border: 0; background: none; color: #64748b; font-size: 17px; } .select2-container--default .select2-search--inline .select2-search__field { margin-top: 6px; height: 24px; font-family: inherit; } :root[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice { background: rgba(96, 165, 250, .18); color: #bfdbfe; } .panel-main .select2-container--default .select2-selection--single, .master-modal .select2-container--default .select2-selection--single { height: 44px; display: flex; align-items: center; padding: 0 6px; border: 1px solid #dce1e9; border-radius: 9px; } .select2-container--default .select2-selection--single .select2-selection__arrow { height: 42px; } .select2-dropdown { border-color: #dce1e9; border-radius: 9px; z-index: 1060; } .select2-container--open .select2-dropdown { box-shadow: 0 18px 45px rgba(15, 23, 42, .16); } /* Admin settings: home banner blocks */ .settings-banner-block { padding-top: 18px; margin-top: 18px; border-top: 1px solid var(--panel-border); } .settings-banner-block:first-of-type { padding-top: 0; margin-top: 4px; border-top: 0; } .settings-banner-block h3 { margin: 0 0 12px; font-size: 14px; font-weight: 800; } /* Admin list: round logo / initials avatar instead of a banner thumbnail */ .table-avatar { width: 46px; height: 46px; display: grid; place-items: center; overflow: hidden; border-radius: 50%; color: #fff; background: linear-gradient(135deg, var(--primary-color, #1e5797), #2f6cab); font-weight: 800; font-size: 14px; letter-spacing: .02em; } .table-avatar img { width: 100%; height: 100%; object-fit: cover; } /* School profile: keep long rich-text content inside its column (no page scroll) */ .profile-grid { min-width: 0; } .profile-grid > div:first-child { min-width: 0; } .content-card { min-width: 0; } .content-card .rich-text { color: var(--muted); overflow-wrap: anywhere; word-break: break-word; } .content-card .rich-text > :first-child { margin-top: 0; } .content-card .rich-text > :last-child { margin-bottom: 0; } .content-card .rich-text p { margin: 0 0 12px; } .content-card .rich-text h2, .content-card .rich-text h3 { margin: 18px 0 8px; color: var(--ink); } .content-card .rich-text ul, .content-card .rich-text ol { margin: 0 0 12px; padding-left: 20px; } /* ---- School profile hero: circular avatar over a static campus banner ---- */ .school-profile-hero .profile-cover { position: relative; height: 260px; border-radius: 22px; } .school-profile-hero .profile-photo > img, .school-profile-hero .profile-photo:after { border-radius: 22px; } .school-profile-hero .profile-heading { position: relative; align-items: flex-end; margin: -34px 22px 0; padding: 80px 34px 30px; } .school-profile-hero .profile-avatar { position: absolute; top: -58px; left: 34px; width: 112px; height: 112px; display: grid; place-items: center; overflow: hidden; border: 5px solid #fff; border-radius: 50%; color: #fff; background: linear-gradient(135deg, var(--primary), #2f6cab); box-shadow: 0 14px 34px rgba(21, 52, 86, .26); font: 800 32px "Plus Jakarta Sans", Manrope, sans-serif; letter-spacing: .02em; z-index: 3; } .school-profile-hero .profile-avatar img { width: 100%; height: 100%; object-fit: cover; } @media (max-width: 700px) { .school-profile-hero .profile-heading { margin: -30px 12px 0; padding: 66px 20px 22px; text-align: center; align-items: center; } .school-profile-hero .profile-avatar { left: 0; right: 0; top: -46px; width: 92px; height: 92px; margin-inline: auto; font-size: 26px; transform: none; } } @media (max-width: 600px) { .site-logo { height: 48px; max-width: 170px; } .service-module-phone, .service-feature.is-reversed .service-module-phone { transform: scale(.9) rotate(-2deg); } .app-toast-region { top: 14px !important; right: 14px !important; left: auto !important; bottom: auto !important; } .module-checkbox-grid,.school-section-grid,.master-grid,.master-add-row { grid-template-columns: 1fr; } .school-section-grid .grid-span-2,.school-section-grid .grid-full { grid-column: auto; } } /* School dashboard subscription banner */ .subscription-banner { border-left: 4px solid var(--line, #e2e8f0); } .subscription-banner.is-ok { border-left-color: #16a34a; } .subscription-banner.is-warning { border-left-color: #d97706; background: #fffbeb; } .subscription-banner.is-expired { border-left-color: #dc2626; background: #fef2f2; } .subscription-banner .fa-id-card-clip { color: var(--panel-primary, #2f6cab); } /* Website pricing: subscription length line */ .price-card .billing-term { display: inline-flex; align-items: center; gap: 6px; margin: 8px 0 2px; font-size: 13px; font-weight: 700; color: var(--primary); } .price-card .billing-term svg { width: 15px; height: 15px; } /* School-role permissions page: panel-login row + 4-per-row module cards */ .permission-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; padding: 14px 16px; border: 1px solid var(--panel-border, #e2e8f0); border-radius: 10px; background: #fff; } .permission-row > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .permission-row small { color: var(--panel-muted, #64748b); font-size: 11px; } .permission-row form { flex: 0 0 auto; margin: 0; } .permission-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .permission-card { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border: 1px solid var(--panel-border, #e2e8f0); border-radius: 10px; background: #fff; } .permission-card > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .permission-card b { font-size: 12.5px; line-height: 1.25; } .permission-card small { font-size: 10px; color: var(--panel-muted, #64748b); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .permission-card form { flex: 0 0 auto; margin: 0; } :root[data-theme="dark"] .permission-row, :root[data-theme="dark"] .permission-card { background: #111a2c; border-color: #344057; } @media (max-width: 1100px) { .permission-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .permission-grid { grid-template-columns: 1fr; } } /* Payments summary: gradient stat cards (col-md-4) */ .mini-stat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 18px; } .mini-stat-card { padding: 18px 20px; border-radius: 14px; color: #fff; } .mini-stat-card small { display: block; font-size: 12px; font-weight: 700; opacity: .9; text-transform: uppercase; letter-spacing: .04em; } .mini-stat-card strong { display: block; margin-top: 6px; font-size: 24px; font-weight: 800; } .mini-stat-card.g-green { background: linear-gradient(135deg, #059669, #10b981); } .mini-stat-card.g-blue { background: linear-gradient(135deg, #2563eb, #4f46e5); } .mini-stat-card.g-red { background: linear-gradient(135deg, #db2777, #f43f5e); } .mini-stat-card.g-amber { background: linear-gradient(135deg, #ea580c, #f59e0b); } @media (max-width: 767.98px) { .mini-stat-grid { grid-template-columns: 1fr; } } /* Slightly narrower admin/school sidebar → a bit more room for content */ :root { --panel-sidebar-width: 256px; } .visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important} /* Public website 2026 refresh: centered hierarchy, tighter rhythm and softer depth. */ body:not(.panel-body) .section { padding: 54px 0; } body:not(.panel-body) .page-hero { padding: 32px 0; background: linear-gradient(145deg, #f5f9ff 0%, #fffaf1 100%); } body:not(.panel-body) .page-hero::after { bottom: -330px; opacity: .55; } body:not(.panel-body) .page-hero-inner { text-align: center; } body:not(.panel-body) .page-hero p { max-width: 720px; font-size: 16px; line-height: 1.8; } body:not(.panel-body) .section-head, body:not(.panel-body) .section-head.centered { display: block; width: 100%; max-width: none; margin: 0 auto 30px; text-align: center; } body:not(.panel-body) .section-head > div { max-width: none; } body:not(.panel-body) .section-head h2 { max-width: 820px; margin: 0 auto; font-size: clamp(32px, 4vw, 44px); } body:not(.panel-body) .section-head > p, body:not(.panel-body) .section-head > div > p, body:not(.panel-body) .section-head.centered p { max-width: none; width: 100%; margin: 12px auto 0; color: var(--muted); font-size: 15px; line-height: 1.85; } body:not(.panel-body) .section-head-actions { justify-content: center; margin-top: 18px; } body:not(.panel-body) .faq-list-centered { width: min(100%, 880px); margin: 0 auto; } body:not(.panel-body) .carousel-shell { position: relative; } body:not(.panel-body) .testimonial-viewport { margin-top: 0; } body:not(.panel-body) .carousel-edge { position: absolute; top: 50%; z-index: 5; width: 48px; height: 48px; display: grid; place-items: center; padding: 0; border: 1px solid #dfe6ee; border-radius: 50%; color: var(--primary); background: #fff; box-shadow: 0 12px 30px rgba(17, 43, 78, .16); font-size: 21px; cursor: pointer; transform: translateY(-50%); transition: color .2s ease, background-color .2s ease, border-color .2s ease, opacity .2s ease, transform .2s ease; } body:not(.panel-body) .carousel-edge-prev { left: -24px; } body:not(.panel-body) .carousel-edge-next { right: -24px; } body:not(.panel-body) .carousel-edge:hover:not(:disabled), body:not(.panel-body) .carousel-edge:focus-visible { color: var(--primary-900); border-color: var(--secondary); background: var(--secondary); } body:not(.panel-body) .carousel-edge:focus-visible { outline: 3px solid rgba(23, 63, 117, .18); outline-offset: 3px; } body:not(.panel-body) .carousel-edge:disabled { opacity: .38; cursor: default; } body:not(.panel-body) .carousel-edge[hidden] { display: none; } body:not(.panel-body) .school-carousel { margin-top: 0; padding-inline: 2px; scrollbar-width: none; } body:not(.panel-body) .school-carousel::-webkit-scrollbar { display: none; } body:not(.panel-body) .school-carousel > .school-card { flex-basis: calc((100% - 40px) / 3); } /* School directory cards: the same logo-first treatment on home and /schools. */ :where(.schools-section, .school-directory) .school-card .school-card-inner { align-items: stretch; min-height: 360px; gap: 11px; padding: 24px; text-align: left; } :where(.schools-section, .school-directory) .school-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 3px; } :where(.schools-section, .school-directory) .school-logo-mark { width: 78px; height: 78px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; flex: 0 0 78px; overflow: hidden; border: 1px solid #dbe7f4; border-radius: 18px; color: var(--primary); background: linear-gradient(145deg, #f5f9ff, #e7f0fa); box-shadow: 0 10px 24px rgba(23, 63, 117, .11); } :where(.schools-section, .school-directory) .school-logo-mark img { width: 100%; height: 100%; object-fit: contain; padding: 6px; background: #fff; } :where(.schools-section, .school-directory) .school-logo-mark svg { width: 27px; height: 27px; } :where(.schools-section, .school-directory) .school-logo-mark strong { display: block; font-size: 11px; line-height: 1; letter-spacing: .08em; } :where(.schools-section, .school-directory) .school-card:nth-child(3n + 2) .school-logo-mark { color: #9a5b08; border-color: #f3dfba; background: linear-gradient(145deg, #fffaf0, #fff0cf); } :where(.schools-section, .school-directory) .school-card:nth-child(3n) .school-logo-mark { color: #167052; border-color: #cfe8df; background: linear-gradient(145deg, #f2fbf7, #dff4ea); } :where(.schools-section, .school-directory) .school-card .school-card-meta { justify-content: flex-start; margin-top: 0; } :where(.schools-section, .school-directory) .school-featured-label { display: inline-flex; align-items: center; gap: 6px; color: #167052; font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; } :where(.schools-section, .school-directory) .school-featured-label svg { width: 14px; } :where(.schools-section, .school-directory) .school-card h3 { margin: 3px 0 0; font-size: 19px; line-height: 1.35; } :where(.schools-section, .school-directory) .school-card .school-tagline { min-height: 42px; color: var(--muted); font-size: 12px; line-height: 1.7; } :where(.schools-section, .school-directory) .school-card .school-location { justify-content: flex-start; } :where(.schools-section, .school-directory) .school-card .school-classrange { color: var(--ink); } :where(.schools-section, .school-directory) .school-card .school-card-cta { width: 100%; justify-content: space-between; margin-top: auto; border-top: 1px solid var(--line); } /* Every role keeps its label and explanation visible. */ .experience-section .role-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; border: 0; } .experience-section .role-list button { height: 100%; grid-template-columns: 38px 1fr; gap: 10px; padding: 18px; border: 1px solid #dfe6ee; border-radius: 16px; background: #fff; } .experience-section .role-list button > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: var(--primary); background: #eaf2fa; } .experience-section .role-list button b { color: var(--ink); font-size: 15px; line-height: 1.35; } .experience-section .role-list button small, .experience-section .role-list button.active small { display: block; margin-top: 7px; color: var(--muted); font-size: 11px; line-height: 1.65; } .experience-section .role-list button.active { border-color: var(--secondary); box-shadow: 0 12px 28px rgba(17, 43, 78, .08); } @media (min-width: 821px) { .experience-section .experience-grid { align-items: start; } .experience-section .experience-visual { position: sticky; top: 104px; } } .role-audience-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0 0 40px; } .role-audience-grid article { padding: 24px; border: 1px solid #e2e8f0; border-radius: 18px; background: #fff; box-shadow: 0 10px 28px rgba(17, 43, 78, .05); } .role-audience-grid article > span { color: var(--secondary); font-size: 11px; font-weight: 800; letter-spacing: .08em; } .role-audience-grid h3 { margin: 12px 0 8px; font-size: 18px; } .role-audience-grid p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.7; } /* Keep both controls vertically centred on the first/last card edges. */ .carousel-shell { position: relative !important; } .carousel-shell > .carousel-edge { position: absolute !important; top: 50% !important; bottom: auto !important; margin: 0 !important; transform: translateY(-50%) !important; } .carousel-shell > .carousel-edge-prev { left: -24px !important; } .carousel-shell > .carousel-edge-next { right: -24px !important; } body:not(.panel-body) .modules-section, body:not(.panel-body) .schools-section, body:not(.panel-body) .about-story-section { background: #fff; } body:not(.panel-body) .surface-section, body:not(.panel-body) .experience-section, body:not(.panel-body) .faq-section, body:not(.panel-body) .form-section, body:not(.panel-body) .school-directory { background: #f6f8fb; } body:not(.panel-body) .module-card, body:not(.panel-body) .principle-grid article, body:not(.panel-body) .school-card, body:not(.panel-body) .price-card, body:not(.panel-body) .form-card, body:not(.panel-body) .contact-card, body:not(.panel-body) .content-card { border-color: #e5eaf1; box-shadow: 0 12px 34px rgba(17, 43, 78, .055); } body:not(.panel-body) .principle-grid article { min-height: 230px; padding: 32px; } body:not(.panel-body) .principle-grid article p, body:not(.panel-body) .principle-grid article div { color: var(--muted); font-size: 13px; line-height: 1.75; } body:not(.panel-body) .module-card:hover, body:not(.panel-body) .principle-grid article:hover, body:not(.panel-body) .school-card:hover, body:not(.panel-body) .price-card:hover { transform: translateY(-5px); box-shadow: 0 22px 50px rgba(17, 43, 78, .11); } body:not(.panel-body) .principle-grid article { transition: transform .28s ease, box-shadow .28s ease; } body:not(.panel-body) .stats-section { padding: 36px 0 !important; } body:not(.panel-body) .modules-section { padding-top: 54px; } body:not(.panel-body) .school-directory { padding-top: 42px; } body:not(.panel-body) .filter-bar, body:not(.panel-body) .blog-search { margin-top: 0; margin-bottom: 38px; } body:not(.panel-body) .filter-bar { border: 1px solid #e7ebf0; box-shadow: 0 16px 40px rgba(17, 43, 78, .08); } body:not(.panel-body) .pricing-grid { margin-top: 4px; } body:not(.panel-body) .form-layout { gap: 54px; } body:not(.panel-body) .contact-intro > p { max-width: 470px; line-height: 1.8; } body:not(.panel-body) .site-footer { margin-top: 0; } @media (max-width: 820px) { body:not(.panel-body) .section { padding: 44px 0; } body:not(.panel-body) .section-head, body:not(.panel-body) .section-head.centered { margin-bottom: 26px; } body:not(.panel-body) .section-head h2 { font-size: clamp(30px, 8vw, 38px); } body:not(.panel-body) .school-carousel > .school-card { flex-basis: calc((100% - 20px) / 2); } body:not(.panel-body) .carousel-edge-prev { left: 8px; } body:not(.panel-body) .carousel-edge-next { right: 8px; } .carousel-shell > .carousel-edge-prev { left: 8px !important; } .carousel-shell > .carousel-edge-next { right: 8px !important; } body:not(.panel-body) .filter-bar { margin-top: 0; } body:not(.panel-body) .principle-grid article { min-height: 0; } .role-audience-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { body:not(.panel-body) .school-carousel > .school-card { flex-basis: 88%; } body:not(.panel-body) .carousel-edge { width: 42px; height: 42px; font-size: 18px; } .experience-section .role-list, .role-audience-grid { grid-template-columns: 1fr; } } /* Holidays: weekly off day checkboxes */ .weekly-off-box, .operation-grid > .span-2 { grid-column: 1 / -1; } .weekly-off-box { display: grid; gap: 8px; } .weekly-off-title { font-size: 13px; font-weight: 700; color: var(--panel-text, #172033); } .weekly-off-days { display: flex; flex-wrap: wrap; gap: 10px; } .weekly-off-day { display: inline-flex !important; flex-direction: row !important; align-items: center; gap: 8px; margin: 0; padding: 10px 16px; border: 1px solid var(--panel-border, #dbe3ee); border-radius: 10px; cursor: pointer; } .weekly-off-day input[type="checkbox"] { width: 17px; height: 17px; margin: 0; accent-color: var(--panel-primary); } .weekly-off-day:has(input:checked) { border-color: var(--panel-primary); background: color-mix(in srgb, var(--panel-primary) 8%, transparent); } /* Options a filter switched off (section of another class, etc.) are not listed in search dropdowns. */ .select2-results__option--disabled, .select2-results__option[aria-disabled="true"] { display: none; } /* ID card print centre */ .idc-intro { margin-bottom: 20px; } .idc-legend { display: flex; flex-wrap: wrap; gap: 8px; } .idc-legend-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border: 1px solid var(--panel-border, #dbe3ee); border-radius: 999px; font-size: 12.5px; font-weight: 600; } .idc-legend-chip i { width: 12px; height: 12px; border-radius: 50%; } .idc-box { display: grid; gap: 18px; align-content: start; } .idc-box-head { display: flex; align-items: center; gap: 14px; } .idc-box-head h2 { margin: 0; font-size: 18px; } .idc-box-head p { margin: 3px 0 0; color: var(--panel-muted); font-size: 13px; } .idc-box-icon { width: 46px; height: 46px; flex: 0 0 46px; display: grid; place-items: center; border-radius: 12px; color: #fff; font-size: 19px; } .idc-form { display: grid !important; gap: 12px; margin: 0 !important; padding: 16px; border: 1px solid var(--panel-border, #dbe3ee); border-radius: 12px; } .idc-form h3 { margin: 0; font-size: 14px; font-weight: 800; } .idc-form > label, .idc-form > label:first-child { width: 100% !important; min-width: 0 !important; } .idc-form .primary-button { justify-self: start; } /* Leave shortcuts: the page you are on */ .panel-page-header-action .reset-button.is-current { border-color: var(--panel-primary); background: color-mix(in srgb, var(--panel-primary) 10%, transparent); color: var(--panel-primary); pointer-events: none; } @media (min-width: 576px) { .panel-page-header h1 { white-space: nowrap; } } /* Page header: title left, buttons right; when the buttons do not fit they drop to the next line. */ .panel-page-header { display: flex !important; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; } .panel-page-header h1 { margin-right: auto; } .panel-page-header-action { justify-content: flex-end; } /* Salary master: allowances / deduction / gross stacked in one cell with labels */ .salary-breakup { display: grid; gap: 3px; white-space: nowrap; font-size: 13px; color: var(--panel-muted); } .salary-breakup b { display: inline !important; color: var(--panel-ink); } .attendance-geo-actions { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; } .attendance-geo-actions .reset-button { height: 44px; } /* Search dropdowns inside tables: select2 keeps the original