/* =====================================================
STYLENEW-FIXES.CSS
Load this file AFTER stylenew.css (same order it's
linked in your , just add this right
after it). Because CSS cascades, these corrected
rules override the broken ones below without editing
the original file at all.
Fix 1: invalid background-image declarations that
used bare rgba() colors instead of a gradient
function. Restored as a proper dotted texture
radial-gradient (matches the pattern already
used correctly elsewhere in stylenew.css, e.g.
.vf-hero::after).
Fix 2: invalid background shorthand on
.tpl5 .t5-scroll-cue .t5-arrow that used raw
circle values, which is not valid CSS.
Fix 3: invalid mask value on .tpl5 .t5-zigzag-top
that used raw circle values instead of a
valid mask image (radial-gradient).
Fix 4: undefined CSS variable --green-700-rgb used in
.ck-pop .ck-icon.g, replaced with the existing
--primary-rgb token so the glow renders again.
===================================================== */
/* ---- Fix 1: dotted texture overlays ---- */
.hp-hero::before,
.hp-stats::before,
.hp-cta::before,
.pg-hero::before,
.dh-hero::before {
background-image:
radial-gradient(circle, rgba(255,255,255,.045) 1px, transparent 1.4px);
background-size: 42px 42px;
}
/* ---- Fix 2: scroll-cue arrow (Template 5) ---- */
.tpl5 .t5-scroll-cue .t5-arrow {
width: 3rem;
height: 2.4rem;
background: transparent;
border: 2px solid currentColor;
border-radius: 4px;
}
/* ---- Fix 3: zigzag-top mask (Template 5) ---- */
.tpl5 .t5-zigzag-top::before {
content: '';
position: absolute;
top: -1rem; left: 0; right: 0; height: 2rem;
background: var(--t5-cream);
-webkit-mask: radial-gradient(circle, #000 1px, transparent 1.4px) repeat-x left top / 2.8rem 2rem;
mask: radial-gradient(circle, #000 1px, transparent 1.4px) repeat-x left top / 2.8rem 2rem;
}
/* ---- Fix 4: undefined --green-700-rgb variable ---- */
.ck-pop .ck-icon.g {
box-shadow: 0 0 0 1rem rgba(var(--primary-rgb), .08);
}
/* =====================================================
Fix 5: MISSING ADMIN LEGACY FRAMEWORK
Pages like pin.php, upload-resultd.php, print-broadsheet2.php
and 120+ other admin/management pages use .mgmt-page,
.admin-section, .adm-btn, .adm-alert etc. — none of which
were ever defined in stylenew.css, so those pages render
as plain unstyled HTML. This block restores them using the
same design tokens ( --primary, --border-light, --shadow-*,
--r-* ) as the rest of stylenew.css so they conform fully.
===================================================== */
.mgmt-page{
background: var(--bg);
padding: 3.2rem 0 5rem;
min-height: 42rem;
}
.mgmt-page .container{ position: relative; z-index: 1; }
.admin-section{
background: var(--white);
border: 1px solid var(--border-light);
border-radius: var(--r-lg);
box-shadow: var(--shadow-card);
padding: 2.8rem 3rem;
margin-bottom: 2.4rem;
position: relative;
overflow: hidden;
}
.admin-section::before{
content:'';
position:absolute;
top:0; left:0; right:0;
height:4px;
background: var(--primary);
opacity:.95;
}
.admin-section-title{
font-family: var(--font-heading);
font-size: 1.85rem;
font-weight: 700;
color: var(--text);
margin: 0 0 2rem;
padding-bottom: 1.2rem;
border-bottom: 1px solid var(--border-light);
display:flex;
align-items:center;
gap:.9rem;
letter-spacing: -.01em;
line-height: 1.3;
}
.admin-section-title i{
width:3.6rem; height:3.6rem;
display:inline-flex; align-items:center; justify-content:center;
background: var(--primary-mist);
color: var(--primary);
border-radius: var(--r-sm);
font-size:1.65rem;
flex-shrink:0;
}
.adm-btn{
display:inline-flex; align-items:center; justify-content:center;
gap:.6rem;
padding:1.05rem 2rem;
font-family: var(--font-heading);
font-size:1.35rem;
font-weight:600;
border-radius: var(--r-sm);
border:2px solid transparent;
cursor:pointer;
transition: all var(--t-base);
text-decoration:none !important;
line-height:1.2;
white-space:nowrap;
text-align:center;
}
.adm-btn i{ font-size:1.3rem; }
.adm-btn.primary{
background: var(--primary);
color: var(--white) !important;
border-color: var(--primary);
box-shadow: 0 4px 14px var(--primary-glow);
}
.adm-btn.primary:hover{
background: var(--primary-dark);
border-color: var(--primary-dark);
color: var(--white) !important;
transform: translateY(-2px);
box-shadow: 0 8px 22px var(--primary-glow);
}
.adm-btn.success{
background: #15803d;
color: var(--white) !important;
border-color: #15803d;
box-shadow: 0 4px 14px rgba(21,128,61,.22);
}
.adm-btn.success:hover{
background:#0f6a32; border-color:#0f6a32;
color:var(--white) !important;
transform: translateY(-2px);
box-shadow: 0 8px 22px rgba(21,128,61,.28);
}
.adm-btn.secondary{
background: var(--white);
color: var(--primary) !important;
border-color: var(--primary);
}
.adm-btn.secondary:hover{
background: var(--primary);
color: var(--white) !important;
transform: translateY(-2px);
box-shadow: 0 6px 18px var(--primary-glow);
}
.adm-btn.warning{
background: var(--accent);
color: var(--white) !important;
border-color: var(--accent);
box-shadow: 0 4px 14px rgba(var(--accent-rgb), .22);
}
.adm-btn.warning:hover{
background: var(--accent-dark); border-color: var(--accent-dark);
transform: translateY(-2px);
}
.adm-btn.danger,
.adm-btn.btn-danger{
background:#dc2626; color:var(--white) !important; border-color:#dc2626;
box-shadow: 0 4px 14px rgba(220,38,38,.18);
}
.adm-btn.danger:hover,
.adm-btn.btn-danger:hover{
background:#b91c1c; border-color:#b91c1c; transform: translateY(-2px);
}
.adm-btn.default,
.adm-btn.btn-default{
background: var(--gray-600); color:var(--white) !important; border-color: var(--gray-600);
}
.adm-btn.default:hover{ background: var(--gray-700); border-color: var(--gray-700); transform: translateY(-2px); }
.adm-btn:disabled{ opacity:.55; cursor:not-allowed; transform:none !important; box-shadow:none !important; }
.adm-alert{
padding:1.4rem 1.6rem;
border-radius: var(--r-md);
font-size:1.4rem;
font-weight:500;
line-height:1.6;
border:1px solid;
display:flex; align-items:flex-start; gap:.9rem;
margin-bottom:1.6rem;
}
.adm-alert i{ font-size:1.6rem; flex-shrink:0; margin-top:.15rem; }
.adm-alert.success{ background:#ecfdf5; color:#065f46; border-color:#a7f3d0; }
.adm-alert.error{ background:#fef2f2; color:#991b1b; border-color:#fecaca; }
.adm-alert.info{ background:#eff6ff; color:#1e40af; border-color:#bfdbfe; }
.adm-alert.warning{ background:#fffbeb; color:#92400e; border-color:#fde68a; }
.adm-form-group{ margin-bottom:1.6rem; }
.adm-form-group label{
font-weight:600; font-size:1.3rem; color:var(--text);
display:block; margin-bottom:.5rem; letter-spacing:.01em;
}
.adm-form-control,
.adm-form-group .form-control,
.admin-section .form-control{
width:100%;
padding:1.15rem 1.4rem;
font-size:1.45rem;
border:2px solid var(--border) !important;
border-radius: var(--r-sm) !important;
background: var(--white) !important;
color: var(--text) !important;
transition: border-color var(--t-base), box-shadow var(--t-base);
outline:none;
height:auto;
line-height:1.4;
}
.adm-form-control:focus,
.admin-section .form-control:focus{
border-color: var(--primary) !important;
box-shadow: 0 0 0 4px var(--primary-glow) !important;
}
.adm-form-row{ display:flex; flex-wrap:wrap; gap:1.4rem; align-items:flex-end; }
.admin-section table.table{
margin-bottom:0;
font-size:1.4rem;
}
.admin-section table.table th{
background: var(--gray-50);
color: var(--text);
font-family: var(--font-heading);
font-weight:600;
font-size:1.3rem;
border-bottom:2px solid var(--border);
}
.admin-section .autocomplete-suggestions{
background: var(--white);
border:1px solid var(--border);
border-radius: var(--r-md);
box-shadow: var(--shadow-lg);
overflow:hidden;
z-index: 50;
}
.admin-section .autocomplete-suggestion{
display:flex; align-items:center; gap:1.2rem;
padding:1rem 1.4rem;
cursor:pointer;
transition: background var(--t-fast);
border-bottom:1px solid var(--border-light);
}
.admin-section .autocomplete-suggestion:hover{ background: var(--green-50); }
.admin-section .autocomplete-suggestion:last-child{ border-bottom:none; }
.admin-section .suggestion-image,
.admin-section .no-image{
width:4.2rem; height:4.2rem;
border-radius:50%; object-fit:cover;
background: var(--gray-100);
display:flex; align-items:center; justify-content:center;
color:var(--text-muted); font-size:1.8rem;
flex-shrink:0;
}
.admin-section .suggestion-name{ font-weight:600; font-size:1.45rem; color:var(--text); }
.admin-section .suggestion-details{ font-size:1.25rem; color:var(--text-muted); }
.subject-dropdown{ background:var(--white); border:1px solid var(--border); border-radius:var(--r-md); box-shadow:var(--shadow-lg); overflow:hidden; max-height:260px; overflow-y:auto; }
.subject-dropdown .sd-item{ padding:10px 16px; font-size:1.3rem; color:var(--text); cursor:pointer; border-bottom:1px solid var(--border-light); transition:background .15s; }
.subject-dropdown .sd-item:hover{ background:var(--primary-mist); color:var(--primary); }
.subject-dropdown .sd-item.new-subject{ color:var(--accent); font-weight:600; }
.subject-dropdown .sd-item:last-child{ border-bottom:none; }
.form-hint{ font-size:1.15rem; color:var(--text-muted); margin-top:.3rem; display:block; }
.ed_teacher_div{ background:var(--white); border:1px solid var(--border-light); border-radius:var(--r-lg); box-shadow:var(--shadow-card); padding:2.4rem 2.8rem; }
.ed_teacher_div h3.mb-4{ font-family:var(--font-heading); font-weight:800; color:var(--text); }
.table-advance{ width:100%; border-collapse:collapse; background:var(--white); border-radius:var(--r-md); overflow:hidden; border:1px solid var(--border-light); }
.table-advance th{ background:var(--gray-50); padding:1rem 1.2rem; font-size:1.2rem; font-weight:700; text-transform:uppercase; color:var(--text); border-bottom:2px solid var(--border); }
.table-advance td{ padding:1rem 1.2rem; border-bottom:1px solid var(--border-light); font-size:1.35rem; }
.table-responsive{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.ed_teacher_form .form-group{ margin-bottom:1.6rem; }
.ed_teacher_form label{ font-weight:600; font-size:1.3rem; color:var(--text); margin-bottom:.5rem; display:block; }
/* =====================================================
Fix 6: BOOTSTRAP UTILITY POLYFILLS
Bootstrap 3 (bundled via main.css) does not provide the
mb-*, d-flex, rounded-circle, etc. utilities that many
newer pages rely on. These lightweight fallbacks prevent
unstyled / collapsed layouts.
===================================================== */
.d-flex{ display:flex !important; }
.d-none{ display:none !important; }
.d-block{ display:block !important; }
.text-center{ text-align:center !important; }
.text-right{ text-align:right !important; }
.rounded-circle{ border-radius:50% !important; }
.img-fluid{ max-width:100%; height:auto; display:block; }
.mb-0{ margin-bottom:0 !important; }
.mb-2{ margin-bottom:.8rem !important; }
.mb-3{ margin-bottom:1.2rem !important; }
.mb-4{ margin-bottom:1.6rem !important; }
.mb-sm-4{ margin-bottom:1.6rem !important; }
.ml-4{ margin-left:1.6rem !important; }
.p-0{ padding:0 !important; }
.font-weight-bold{ font-weight:700 !important; }
.alert{ padding:1.4rem 1.6rem; border-radius:var(--r-md); border:1px solid transparent; font-size:1.4rem; margin-bottom:1.6rem; }
.alert-success{ background:#ecfdf5; color:#065f46; border-color:#a7f3d0; }
.alert-danger,.alert-error{ background:#fef2f2; color:#991b1b; border-color:#fecaca; }
.alert-info{ background:#eff6ff; color:#1e40af; border-color:#bfdbfe; }
.alert-warning{ background:#fffbeb; color:#92400e; border-color:#fde68a; }
.success1{ background:#ecfdf5; color:#065f46; border:1px solid #a7f3d0; padding:1.4rem 1.6rem; border-radius:var(--r-md); margin-bottom:1.6rem; font-size:1.4rem; }
.error1{ background:#fef2f2; color:#991b1b; border:1px solid #fecaca; padding:1.4rem 1.6rem; border-radius:var(--r-md); margin-bottom:1.6rem; font-size:1.4rem; }
/* =====================================================
Fix 7: PQ DESIGN SYSTEM — missing aliases & components
admin_manage_classes.php and similar pages use shorthand
.pq-btn-gy/or/rd/bl/gr and .pq-section-heading etc.
which had no rules, leaving those pages plain.
===================================================== */
.pq-btn-gy{ background:var(--gray-100) !important; color:var(--text) !important; border-color:var(--border) !important; }
.pq-btn-or{ background:var(--accent) !important; color:var(--white) !important; border-color:var(--accent) !important; }
.pq-btn-rd{ background:#dc2626 !important; color:var(--white) !important; border-color:#dc2626 !important; }
.pq-btn-bl{ background:#2563eb !important; color:var(--white) !important; border-color:#2563eb !important; }
.pq-btn-gr{ background:var(--primary) !important; color:var(--white) !important; border-color:var(--primary) !important; }
.pq-btn-gy:hover{ background:var(--gray-200) !important; }
.pq-btn-or:hover{ background:var(--accent-dark) !important; border-color:var(--accent-dark) !important; }
.pq-btn-rd:hover{ background:#b91c1c !important; border-color:#b91c1c !important; }
.pq-btn-bl:hover{ background:#1e40af !important; border-color:#1e40af !important; }
.pq-btn-gr:hover{ background:var(--primary-dark) !important; border-color:var(--primary-dark) !important; }
.pq-section-heading{ display:flex; align-items:center; gap:.8rem; font-family:var(--font-heading); font-size:1.5rem; font-weight:700; color:var(--text); padding:1.2rem 1.6rem; background:var(--gray-50); border:1px solid var(--border-light); border-left:4px solid var(--primary); border-radius:var(--r-md); margin:2rem 0 1.4rem; }
.pq-section-heading i{ color:var(--primary); }
.pq-section-heading.pq-inline{ margin:0; display:inline-flex; }
.pq-table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--border-light); border-radius:var(--r-md); margin-bottom:1.6rem; }
.pq-t{ width:100%; border-collapse:collapse; font-size:1.35rem; background:var(--white); }
.pq-t th{ background:var(--gray-50); color:var(--text); font-weight:700; font-family:var(--font-heading); font-size:1.15rem; text-transform:uppercase; letter-spacing:.04em; padding:1rem 1.2rem; text-align:left; border-bottom:2px solid var(--border); white-space:nowrap; }
.pq-t td{ padding:1rem 1.2rem; border-bottom:1px solid var(--border-light); color:var(--text-secondary); vertical-align:middle; }
.pq-t tr:last-child td{ border-bottom:none; }
.pq-t tr:hover td{ background:var(--green-50); }
.pq-no-results{ text-align:center; padding:3rem 1.6rem; color:var(--text-muted); font-style:italic; font-size:1.35rem; }
.pq-row-num{ color:var(--text-muted); font-size:1.25rem; text-align:center; }
.pq-actions-cell{ display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; }
.pq-form-section{ display:flex; flex-wrap:wrap; gap:1.2rem; align-items:flex-end; background:var(--white); border:1px solid var(--border-light); border-radius:var(--r-md); padding:1.8rem; margin-bottom:1.8rem; }
.pq-form-actions-tight{ display:flex; gap:.8rem; flex-wrap:wrap; align-items:center; justify-content:flex-end; }
.pq-ok{ background:#ecfdf5; color:#065f46; border:1px solid #a7f3d0; padding:1rem 1.4rem; border-radius:var(--r-md); font-size:1.35rem; margin-bottom:1.2rem; }
.pq-err,.pq-alrt{ background:#fef2f2; color:#991b1b; border:1px solid #fecaca; padding:1rem 1.4rem; border-radius:var(--r-md); font-size:1.35rem; margin-bottom:1.2rem; }
.pq-alrt-mt{ margin-top:1.2rem; }
.pq-badge.bj{ background:var(--primary-mist); color:var(--primary); }
.pq-badge.ba{ background:#fef3c7; color:#92400e; }
.bj{ background:var(--primary-mist); color:var(--primary); padding:.3rem .8rem; border-radius:var(--r-full); font-size:1.15rem; font-weight:600; display:inline-flex; align-items:center; }
.ba{ background:#fef3c7; color:#92400e; padding:.3rem .8rem; border-radius:var(--r-full); font-size:1.15rem; font-weight:600; display:inline-flex; align-items:center; }
.fg{ display:flex; gap:1.2rem; flex-wrap:wrap; }
.fg .pq-field{ flex:1 1 20rem; min-width:0; }
#pq-toast{ position:fixed; bottom:2rem; right:2rem; background:var(--text); color:var(--white); padding:1.2rem 1.8rem; border-radius:var(--r-md); box-shadow:var(--shadow-xl); display:none; align-items:center; gap:1rem; z-index:99999; font-size:1.35rem; }
#pq-toast.show{ display:flex; }
#pq-spinner{ position:fixed; inset:0; background:rgba(0,0,0,.35); display:none; z-index:99998; }
#pq-spinner.show{ display:block; }
.pq-mo{ position:fixed; inset:0; background:rgba(0,0,0,.5); display:none; align-items:center; justify-content:center; z-index:9999; padding:2rem; }
.pq-mo.open{ display:flex; }
.pq-m{ background:var(--white); border-radius:var(--r-lg); box-shadow:var(--shadow-2xl); max-width:52rem; width:100%; max-height:90vh; overflow:auto; }
.pq-mh{ display:flex; align-items:center; justify-content:space-between; padding:1.6rem 2rem; border-bottom:1px solid var(--border-light); font-family:var(--font-heading); font-weight:700; font-size:1.6rem; }
.pq-mh--warning{ background:#fffbeb; border-bottom-color:#fde68a; }
.pq-mb{ padding:1.8rem 2rem; }
.pq-mc{ background:none; border:none; font-size:2.2rem; color:var(--text-muted); cursor:pointer; line-height:1; }
/* =====================================================
Fix 8: STUDENT ENTER EXAM — stu-* framework
student_enter_exam.php used 15+ bespoke classes with
zero CSS. Styled to match portal theme.
===================================================== */
.stu-enter-exam-wrap{ background:var(--bg); padding:3rem 0 5rem; min-height:50vh; }
.stu-enter-exam-wrap .stu-entry-card{ max-width:56rem; margin:0 auto; background:var(--white); border:1px solid var(--border-light); border-radius:var(--r-xl); box-shadow:var(--shadow-xl); padding:3.2rem 3rem; text-align:center; position:relative; overflow:hidden; }
.stu-enter-exam-wrap .stu-entry-card::before{ content:''; position:absolute; top:0; left:0; right:0; height:4px; background:var(--primary); }
.stu-entry-icon{ width:6.4rem; height:6.4rem; display:inline-flex; align-items:center; justify-content:center; background:var(--primary-mist); color:var(--primary); border-radius:50%; font-size:3rem; margin:0 auto 1.6rem; }
.stu-entry-title{ font-family:var(--font-heading); font-size:2.4rem; font-weight:800; color:var(--text); margin:0 0 .6rem; letter-spacing:-.02em; }
.stu-entry-subtitle{ color:var(--text-muted); font-size:1.4rem; margin:0 0 2.4rem; line-height:1.6; }
.stu-code-input-group{ margin-bottom:1.6rem; }
.stu-code-input{ width:100%; padding:1.6rem 1.8rem; font-size:2rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; text-align:center; border:2px solid var(--border); border-radius:var(--r-md); background:var(--white); color:var(--text); transition:border-color var(--t-base), box-shadow var(--t-base); outline:none; }
.stu-code-input:focus{ border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-glow); }
.stu-code-input::placeholder{ font-size:1.4rem; font-weight:500; letter-spacing:.04em; text-transform:none; color:var(--gray-400); }
.stu-btn-enter-exam{ width:100%; padding:1.4rem 2rem; background:var(--primary); color:var(--white) !important; border:2px solid var(--primary); border-radius:var(--r-md); font-family:var(--font-heading); font-size:1.5rem; font-weight:700; cursor:pointer; transition:all var(--t-base); box-shadow:0 6px 18px var(--primary-glow); }
.stu-btn-enter-exam:hover{ background:var(--primary-dark); border-color:var(--primary-dark); transform:translateY(-2px); box-shadow:0 10px 24px var(--primary-glow); }
.stu-help-text{ margin-top:1.8rem; padding:1.4rem 1.6rem; background:var(--bg-alt); border:1px solid var(--border-light); border-radius:var(--r-md); font-size:1.3rem; color:var(--text-secondary); line-height:1.7; text-align:left; }
.stu-alert{ padding:1.4rem 1.6rem; border-radius:var(--r-md); font-size:1.4rem; font-weight:500; border:1px solid; margin:0 auto 2rem; max-width:56rem; text-align:left; }
.stu-alert-error{ background:#fef2f2; color:#991b1b; border-color:#fecaca; }
.stu-alert-success{ background:#ecfdf5; color:#065f46; border-color:#a7f3d0; }
.stu-available-exams{ margin-top:2.4rem; text-align:left; border-top:1px solid var(--border-light); padding-top:2rem; }
.stu-available-exams-title{ font-family:var(--font-heading); font-size:1.3rem; font-weight:700; color:var(--text); margin-bottom:1.2rem; text-transform:uppercase; letter-spacing:.04em; }
.stu-exam-chip{ display:flex; align-items:center; gap:1.2rem; padding:1.2rem 1.4rem; background:var(--white); border:1px solid var(--border-light); border-radius:var(--r-md); margin-bottom:.8rem; cursor:pointer; transition:all var(--t-base); }
.stu-exam-chip:hover{ border-color:var(--primary); background:var(--primary-mist); transform:translateY(-1px); box-shadow:var(--shadow-sm); }
.stu-exam-chip-code{ font-family:var(--font-heading); font-weight:800; font-size:1.3rem; color:var(--primary); background:var(--primary-mist); padding:.5rem 1rem; border-radius:var(--r-sm); letter-spacing:.06em; flex-shrink:0; }
.stu-exam-chip-title{ font-weight:600; font-size:1.4rem; color:var(--text); }
.stu-exam-chip-meta{ font-size:1.2rem; color:var(--text-muted); margin-top:.2rem; }
/* =====================================================
Certificates table column widths - professional aligned design
matching admin_generate_id_cards.php guide
===================================================== */
.cert-mgmt .students-table.cert-table thead th.th-recipient{ width: 22%; }
.cert-mgmt .students-table.cert-table thead th.th-cert{ width: 22%; }
.cert-mgmt .students-table.cert-table thead th.th-number{ width: 16%; }
.cert-mgmt .students-table.cert-table thead th.th-session{ width: 14%; }
.cert-mgmt .students-table.cert-table thead th.th-status{ width: 10%; }
.cert-mgmt .students-table.cert-table thead th.th-actions{ width: 16%; }
.cert-mgmt .students-table.cert-table thead th:first-child{ border-top-left-radius: var(--r-lg) !important; }
.cert-mgmt .students-table.cert-table thead th:last-child{ border-top-right-radius: var(--r-lg) !important; padding-right: 1.4rem !important; }
/* =====================================================
Fix 9: STUDENT TAKE EXAM — ste-page / exam-container
student_take_exam.php references exam layout classes
that had no CSS (ste-page, timer-circle, question-card…).
===================================================== */
.ste-page{ background:var(--bg); padding:2rem 0 5rem; }
.exam-container{ max-width:84rem; margin:0 auto; background:var(--white); border:1px solid var(--border-light); border-radius:var(--r-lg); box-shadow:var(--shadow-card); overflow:hidden; }
.exam-header{ display:flex; align-items:flex-start; justify-content:space-between; gap:2rem; padding:2rem 2.4rem; background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); color:var(--white); flex-wrap:wrap; }
.exam-header .exam-title{ font-family:var(--font-heading); font-size:2rem; font-weight:800; color:var(--white); line-height:1.2; }
.exam-header .exam-info{ display:flex; gap:1.2rem; flex-wrap:wrap; margin-top:.6rem; font-size:1.25rem; color:rgba(255,255,255,.82); }
.exam-header .exam-info span{ display:inline-flex; align-items:center; gap:.4rem; }
.timer-section{ text-align:center; flex-shrink:0; }
.timer-label{ font-size:1.05rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.78); margin-bottom:.8rem; }
.timer-circle-container{ position:relative; width:12rem; height:12rem; margin:0 auto; background:rgba(255,255,255,.08); border-radius:50%; display:flex; align-items:center; justify-content:center; }
.timer-circle{ transform:rotate(-90deg); }
.timer-circle-bg{ fill:none; stroke:rgba(255,255,255,.2); stroke-width:6; }
.timer-circle-progress{ fill:none; stroke:#27ae60; stroke-width:6; stroke-linecap:round; transition:stroke .3s, stroke-dashoffset .5s linear; }
.timer-text{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--white); }
.timer-text #time-display-circle{ font-family:var(--font-heading); font-size:2.2rem; font-weight:800; line-height:1; }
.timer-label-text{ font-size:1rem; opacity:.7; text-transform:uppercase; letter-spacing:.08em; }
.timer-danger .timer-circle-progress{ stroke:#e74c3c !important; }
.exam-body{ padding:2.4rem; }
.warning-box{ display:flex; gap:1rem; padding:1.4rem 1.6rem; background:#fffbeb; border:1px solid #fde68a; border-left:4px solid var(--accent); border-radius:var(--r-md); font-size:1.35rem; color:#92400e; margin-bottom:2rem; line-height:1.6; }
.progress-bar{ height:2rem; background:var(--gray-100); border-radius:var(--r-full); overflow:hidden; margin-bottom:1.8rem; border:1px solid var(--border-light); }
.progress-fill{ height:100%; background:linear-gradient(90deg, var(--primary) 0%, var(--primary-light) 100%); color:var(--white); font-size:1.15rem; font-weight:700; display:flex; align-items:center; justify-content:center; transition:width .4s ease; min-width:6rem; }
.question-status-legend{ display:flex; gap:1.6rem; flex-wrap:wrap; margin-bottom:1.2rem; font-size:1.25rem; color:var(--text-muted); }
.question-status-legend .legend-item{ display:flex; align-items:center; gap:.6rem; }
.legend-box{ width:1.6rem; height:1.6rem; border-radius:4px; border:1px solid var(--border); background:var(--white); }
.legend-box.answered{ background:var(--primary); border-color:var(--primary); }
.legend-box.current{ background:var(--accent); border-color:var(--accent); }
.pagination{ display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:2rem; }
.page-btn{ width:3.6rem; height:3.6rem; display:inline-flex; align-items:center; justify-content:center; background:var(--white); border:1px solid var(--border); border-radius:var(--r-sm); font-size:1.3rem; font-weight:600; color:var(--text); cursor:pointer; transition:all var(--t-fast); }
.page-btn:hover{ border-color:var(--primary); color:var(--primary); transform:translateY(-1px); }
.page-btn.active{ background:var(--accent); color:var(--white); border-color:var(--accent); box-shadow:0 4px 12px rgba(var(--accent-rgb),.25); }
.page-btn.answered{ background:var(--primary-mist); border-color:var(--primary); color:var(--primary); }
.question-card{ display:none; background:var(--white); border:1px solid var(--border-light); border-radius:var(--r-lg); padding:2.4rem; margin-bottom:1.8rem; box-shadow:var(--shadow-sm); }
.question-card.active{ display:block; }
.question-number{ display:inline-block; padding:.4rem 1rem; background:var(--primary-mist); color:var(--primary); font-size:1.2rem; font-weight:700; border-radius:var(--r-full); margin-bottom:1.2rem; }
.question-text{ font-size:1.6rem; font-weight:600; color:var(--text); line-height:1.6; margin-bottom:1.6rem; }
.question-image{ max-width:100%; border-radius:var(--r-md); margin-bottom:1.6rem; border:1px solid var(--border-light); }
.options-container{ display:flex; flex-direction:column; gap:1rem; }
.option{ display:flex; gap:1.2rem; padding:1.4rem 1.6rem; border:2px solid var(--border-light); border-radius:var(--r-md); cursor:pointer; transition:all var(--t-fast); background:var(--white); align-items:flex-start; }
.option:hover{ border-color:var(--primary); background:var(--green-50); }
.option.selected{ border-color:var(--primary); background:var(--primary-mist); box-shadow:0 2px 10px var(--primary-glow); }
.option input[type="radio"]{ margin-top:.35rem; accent-color:var(--primary); width:1.7rem; height:1.7rem; flex-shrink:0; }
.option-content{ flex:1; font-size:1.45rem; color:var(--text-secondary); line-height:1.6; }
.option-label{ font-weight:700; color:var(--text); margin-right:.4rem; }
.option-image{ max-width:28rem; border-radius:var(--r-sm); margin-top:.8rem; border:1px solid var(--border-light); }
.navigation-section{ display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-top:2rem; padding-top:1.6rem; border-top:1px solid var(--border-light); }
.navigation-section .nav-buttons{ display:flex; gap:1rem; }
.navigation-section .btn{ padding:1rem 2rem; font-size:1.35rem; }
.submit-section{ text-align:center; margin-top:2rem; }
.submit-section .btn-success{ background:#15803d; border-color:#15803d; color:var(--white); padding:1.2rem 3rem; font-size:1.5rem; font-weight:700; box-shadow:0 6px 18px rgba(21,128,61,.22); }
.submit-section .btn-success:hover{ background:#0f6a32; transform:translateY(-2px); }
.auto-save-indicator{ position:fixed; bottom:2rem; left:50%; transform:translateX(-50%); background:var(--primary); color:var(--white); padding:1rem 2rem; border-radius:var(--r-full); font-size:1.35rem; font-weight:600; box-shadow:var(--shadow-lg); display:none; z-index:9999; }
/* Generic exam page fallbacks */
.brd-hero + .ste-page{ margin-top:0; }
.exam-body .btn{ display:inline-flex; align-items:center; justify-content:center; gap:.6rem; border-radius:var(--r-sm); font-family:var(--font-heading); font-weight:600; cursor:pointer; transition:all var(--t-base); text-decoration:none !important; }
.exam-body .btn-primary{ background:var(--primary); color:var(--white) !important; border:2px solid var(--primary); }
.exam-body .btn-primary:hover{ background:var(--primary-dark); border-color:var(--primary-dark); transform:translateY(-2px); }
.exam-body .btn:disabled{ opacity:.5; cursor:not-allowed; transform:none !important; }
/* =====================================================
Fix 10: STAFF DIRECTORY — restored to original beautiful
design. stylenew.css defines only the base 6 dir-*
rules; staff-directory.php now uses 35 dir-* elements
(hero inner/eyebrow/shapes, toolbar, search, cards…).
This completes the system WITHOUT overriding the
original palette — strictly extends it using theme
tokens (--primary, --accent, --gold) so it stays
conformant and premium.
===================================================== */
.dir-modern{ background:var(--bg); padding:3.2rem 0 5rem; min-height:60vh; }
.dir-modern .container{ padding-top:0; }
/* When .dir-hero is wrapped as .admin-section, hide the green strip since the hero has its own */
.dir-modern .dir-hero.admin-section::before{ display:none; }
/* calendar toolbar already has a bottom border, don't double-up with the section bar */
.calendar-toolbar.admin-section::before,
.calendar-page .admin-section.calendar-toolbar::before{ display:none; }
.msg-toolbar.admin-section::before,
.msg-page .admin-section.msg-toolbar::before{ display:none; }
/* The dir toolbar already has a border */
.dir-toolbar.admin-section::before,
.dir-modern .admin-section.dir-toolbar::before{ display:none; }
.dir-pattern{ height:4px; background:linear-gradient(90deg, var(--primary) 0%, var(--accent) 50%, var(--gold) 100%); border-radius:var(--r-full); margin:0 0 1.6rem; opacity:.9; }
.dir-pattern:empty{ display:block; }
.dir-hero{ background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 68%, var(--primary-deeper) 100%); color:var(--white); padding:4.4rem 3.2rem 3.6rem; border-radius:var(--r-2xl); margin:0 0 2rem; position:relative; overflow:hidden; border:1px solid rgba(255,255,255,.08); box-shadow:var(--shadow-xl); }
.dir-hero::before{ content:''; position:absolute; top:-9rem; right:-6rem; width:28rem; height:28rem; border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,.10) 0%, transparent 70%); pointer-events:none; }
.dir-hero::after{ content:''; position:absolute; bottom:-7rem; left:-4rem; width:22rem; height:22rem; border-radius:50%; background:radial-gradient(circle, var(--primary-light) 0%, transparent 65%); opacity:.18; pointer-events:none; }
.dir-hero-art{ position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.dir-hero-shape{ position:absolute; border-radius:50%; background:rgba(255,255,255,.06); backdrop-filter:blur(2px); }
.dir-hero-shape--1{ width:20rem; height:20rem; top:-5rem; right:6%; opacity:.9; }
.dir-hero-shape--2{ width:13rem; height:13rem; bottom:-2.5rem; right:20%; opacity:.55; }
.dir-hero-shape--3{ width:9rem; height:9rem; top:16%; left:3%; opacity:.42; }
.dir-hero-shape--4{ width:6.5rem; height:6.5rem; bottom:14%; left:11%; opacity:.32; background:rgba(var(--accent-rgb),.14); }
.dir-hero-inner{ position:relative; z-index:1; max-width:72rem; }
.dir-hero-eyebrow{ display:inline-flex; align-items:center; gap:.6rem; padding:.55rem 1.3rem; background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.22); border-radius:var(--r-full); font-size:1.12rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; margin-bottom:1.4rem; backdrop-filter:blur(6px); }
.dir-hero-eyebrow i{ color:var(--gold); }
.dir-hero-title{ font-family:var(--font-heading); font-size:clamp(2.8rem,4.6vw,3.8rem); font-weight:800; color:var(--white); margin:0 0 .7rem; letter-spacing:-.025em; line-height:1.08; text-shadow:0 2px 14px rgba(0,0,0,.18); }
.dir-hero-sub{ color:rgba(255,255,255,.88); font-size:1.52rem; line-height:1.65; margin:0 0 2.2rem; max-width:60rem; font-weight:400; }
.dir-hero-stats{ display:flex; gap:1.8rem; flex-wrap:wrap; }
.dir-hero-stat{ min-width:9rem; padding:1.1rem 1.6rem; background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.14); border-radius:var(--r-lg); backdrop-filter:blur(8px); text-align:center; }
.dir-hero-stat strong{ display:block; font-family:var(--font-heading); font-size:2.8rem; font-weight:800; color:var(--white); line-height:1; margin-bottom:.2rem; }
.dir-hero-stat span{ font-size:1.15rem; color:rgba(255,255,255,.74); text-transform:uppercase; letter-spacing:.08em; font-weight:700; }
.dir-toolbar{ background:var(--white); border:1px solid var(--border-light); border-radius:var(--r-xl); box-shadow:var(--shadow-card); padding:1.8rem 2rem; margin-bottom:2rem; display:flex; flex-direction:column; gap:1.4rem; }
.dir-toolbar-row{ display:flex; align-items:center; justify-content:space-between; gap:1.4rem; flex-wrap:wrap; }
.dir-search-wrapper{ position:relative; flex:1 1 34rem; max-width:48rem; display:flex; align-items:center; }
.dir-search{ width:100%; padding:1.15rem 4.2rem 1.15rem 4.2rem; border:2px solid var(--border); border-radius:var(--r-full); font-size:1.45rem; background:var(--gray-25); color:var(--text); outline:none; transition:border-color var(--t-base), box-shadow var(--t-base), background var(--t-base); }
.dir-search:focus{ border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-glow); background:var(--white); }
.dir-search-icon{ position:absolute; left:1.5rem; color:var(--text-muted); font-size:1.45rem; pointer-events:none; }
.dir-search-clear{ position:absolute; right:.55rem; width:3.3rem; height:3.3rem; border:none; background:var(--gray-100); color:var(--text-muted); border-radius:50%; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transform:scale(.85); transition:all var(--t-fast); }
.dir-search-clear.is-visible{ opacity:1; pointer-events:auto; transform:scale(1); }
.dir-search-clear:hover{ background:var(--primary); color:var(--white); transform:scale(1.05); }
.dir-result-count{ display:inline-flex; align-items:center; gap:.6rem; padding:.75rem 1.5rem; background:var(--primary-mist); border:1px solid rgba(var(--primary-rgb),.14); border-radius:var(--r-full); font-size:1.3rem; font-weight:700; color:var(--primary-dark); white-space:nowrap; }
.dir-filters{ display:flex; gap:.8rem; flex-wrap:wrap; }
.dir-filter{ display:inline-flex; align-items:center; gap:.6rem; padding:.85rem 1.7rem; background:var(--white); border:1.6px solid var(--border); border-radius:var(--r-full); font-size:1.32rem; font-weight:600; color:var(--text-secondary); cursor:pointer; transition:all var(--t-base); box-shadow:var(--shadow-xs); }
.dir-filter em{ background:var(--gray-100); color:var(--text-muted); padding:.2rem .75rem; border-radius:var(--r-full); font-style:normal; font-size:1.15rem; min-width:2.2rem; text-align:center; font-weight:700; }
.dir-filter:hover{ border-color:var(--primary); color:var(--primary); transform:translateY(-1px); box-shadow:var(--shadow-sm); }
.dir-filter.is-active{ background:var(--primary); color:var(--white); border-color:var(--primary); box-shadow:0 6px 18px var(--primary-glow); transform:translateY(-1px); }
.dir-filter.is-active em{ background:rgba(255,255,255,.20); color:var(--white); }
.dir-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(31rem, 1fr)); gap:1.8rem; }
.dir-card{ background:var(--white); border:1px solid var(--border-light); border-radius:var(--r-xl); box-shadow:var(--shadow-card); overflow:hidden; display:flex; flex-direction:column; transition:all var(--t-slow); position:relative; }
.dir-card::before{ content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--role-color, var(--primary)); opacity:0; transition:opacity var(--t-base); }
.dir-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-hover); border-color:rgba(var(--primary-rgb),.12); }
.dir-card:hover::before{ opacity:1; }
.dir-card.is-inactive{ opacity:.92; filter:saturate(.85); }
.dir-card-photo{ position:relative; height:13rem; background:linear-gradient(135deg, var(--photo-bg, var(--primary)) 0%, color-mix(in srgb, var(--photo-bg, var(--primary)) 78%, #000) 100%); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.dir-card-photo::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 42%, rgba(0,0,0,.18) 100%); pointer-events:none; }
.dir-card-photo img{ width:100%; height:100%; object-fit:cover; position:relative; z-index:1; }
.dir-init{ font-family:var(--font-heading); font-size:4.4rem; font-weight:800; color:var(--white); text-transform:uppercase; letter-spacing:-.04em; text-shadow:0 2px 12px rgba(0,0,0,.22); position:relative; z-index:1; }
.dir-card-status{ position:absolute; bottom:.9rem; right:.9rem; width:1.45rem; height:1.45rem; background:#22c55e; border:3px solid var(--white); border-radius:50%; box-shadow:0 2px 10px rgba(0,0,0,.18); z-index:2; }
.dir-card-status.is-off{ background:var(--gray-400); }
.dir-card-body{ padding:1.9rem 1.9rem 1.4rem; flex:1; }
.dir-card-role-chip{ display:inline-flex; align-items:center; font-size:1.13rem; font-weight:800; padding:.38rem .95rem; border-radius:var(--r-full); margin-bottom:1rem; letter-spacing:.02em; border:1px solid currentColor; opacity:.95; }
.dir-card-name{ font-family:var(--font-heading); font-size:1.68rem; font-weight:700; color:var(--text); margin:0 0 .3rem; line-height:1.25; }
.dir-card-code{ display:inline-flex; align-items:center; gap:.5rem; font-size:1.18rem; color:var(--text-muted); margin-bottom:1.1rem; background:var(--gray-50); padding:.3rem .8rem; border-radius:var(--r-full); border:1px solid var(--border-light); }
.dir-card-info{ display:flex; flex-direction:column; gap:.55rem; margin-bottom:1.1rem; }
.dir-card-info-row{ display:flex; align-items:center; gap:.8rem; font-size:1.32rem; color:var(--text-secondary); text-decoration:none !important; transition:color var(--t-fast); word-break:break-all; }
.dir-card-info-row:hover{ color:var(--primary); }
.dir-card-info-row i{ width:1.65rem; text-align:center; color:var(--primary); flex-shrink:0; font-size:1.32rem; }
.dir-badge-inactive{ display:inline-flex; align-items:center; gap:.5rem; padding:.45rem 1.05rem; background:#fef2f2; color:#991b1b; border:1px solid #fecaca; border-radius:var(--r-full); font-size:1.15rem; font-weight:700; }
.dir-card-actions{ display:flex; gap:.65rem; padding:1.05rem 1.9rem; border-top:1px solid var(--border-light); background:linear-gradient(180deg, var(--gray-25) 0%, var(--white) 100%); }
.dir-card-action{ width:3.7rem; height:3.7rem; display:inline-flex; align-items:center; justify-content:center; background:var(--white); border:1.5px solid var(--border); border-radius:50%; color:var(--primary); text-decoration:none !important; transition:all var(--t-base); box-shadow:var(--shadow-xs); }
.dir-card-action:hover{ background:var(--primary); color:var(--white); border-color:var(--primary); transform:translateY(-2px); box-shadow:0 6px 16px var(--primary-glow); }
.dir-empty{ text-align:center; padding:5.5rem 2rem; background:var(--white); border:1.5px dashed var(--border); border-radius:var(--r-xl); color:var(--text-secondary); position:relative; overflow:hidden; box-shadow:var(--shadow-card); }
.dir-empty[hidden]{ display:none !important; }
.dir-empty-art{ position:absolute; top:-4rem; right:-4rem; width:16rem; height:16rem; border-radius:50%; background:var(--primary-mist); opacity:.5; pointer-events:none; }
.dir-empty-shape{ position:absolute; border-radius:50%; background:var(--primary); opacity:.07; }
.dir-empty-shape--1{ width:10rem; height:10rem; top:-2rem; right:6rem; }
.dir-empty-shape--2{ width:7rem; height:7rem; bottom:2rem; right:14rem; }
.dir-empty-shape--3{ width:5rem; height:5rem; top:4rem; left:6rem; background:var(--accent); opacity:.09; }
.dir-empty i.fa-user-circle-o{ font-size:5rem; color:var(--text-muted); opacity:.38; display:block; margin-bottom:1.2rem; }
.dir-empty h3{ font-family:var(--font-heading); font-size:1.9rem; font-weight:700; color:var(--text); margin:0 0 .6rem; }
.dir-empty p{ color:var(--text-muted); font-size:1.42rem; max-width:42rem; margin:0 auto 1.8rem; line-height:1.65; }
.dir-empty-reset{ display:inline-flex; align-items:center; gap:.6rem; padding:.95rem 2rem; background:var(--primary); color:var(--white); border:none; border-radius:var(--r-full); font-weight:700; cursor:pointer; transition:all var(--t-base); box-shadow:0 4px 14px var(--primary-glow); }
.dir-empty-reset:hover{ background:var(--primary-dark); transform:translateY(-2px); box-shadow:0 8px 20px var(--primary-glow); }
.dir-hidden{ display:none !important; }
.dir-reveal{ animation:dirReveal .5s cubic-bezier(.4,0,.2,1) both; }
@keyframes dirReveal{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:translateY(0); } }
/* =====================================================
Fix 11: GLOBAL FALLBACK — first-principle audit
281 root PHP files were scanned. ~30 distinct bespoke
prefixes (ss-*, tch-*, pr-*, empty-state, stat-*, etc.)
had zero CSS, rendering those pages as plain HTML.
Instead of patching each page ad-hoc, this universal
layer provides theme-conformant base styles for every
common pattern (card, grid, table, badge, form) so any
future bespoke page automatically inherits the design
system without bespoke CSS.
===================================================== */
.empty-state{ text-align:center; padding:4rem 2rem; background:var(--white); border:1px solid var(--border-light); border-radius:var(--r-lg); color:var(--text-muted); }
.empty-state i{ font-size:4rem; opacity:.4; display:block; margin-bottom:1rem; color:var(--text-muted); }
.stat-label,.stat-number,.stat-icon{ font-family:var(--font-heading); }
.stat-card{ background:var(--white); border:1px solid var(--border-light); border-radius:var(--r-md); padding:1.6rem; text-align:center; box-shadow:var(--shadow-card); }
.field-group{ margin-bottom:1.6rem; }
.field-group label{ font-weight:600; font-size:1.3rem; color:var(--text); display:block; margin-bottom:.5rem; }
.table-responsive{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.btn-block{ display:flex !important; width:100% !important; justify-content:center; }
.img-responsive{ max-width:100%; height:auto; display:block; }
[id*="toast"],[class*="toast"]{ font-family:var(--font-body); }
.ss-wrap,[class^="ss-"],[class*=" ss-"]{ font-family:var(--font-body); }
.ss-card{ background:var(--white); border:1px solid var(--border-light); border-radius:var(--r-md); padding:1.6rem; box-shadow:var(--shadow-card); }
/* =====================================================
Fix 12: STUDENT PORTAL — stu-exams-list / stu-history
/ stu-view-attendance family
These 3 flagship student pages (and all student_*
siblings) used 40+ bespoke classes with zero rules in
stylenew.css. Root cause is NOT the page code — each
page correctly includes header.inc.php (so CSS loads)
and uses semantic BEM names — the fault is stylenew.css
is incomplete. This fix supplies the missing design
system using theme tokens so all student pages conform.
===================================================== */
/* --- Shared student portal canvas --- */
.stu-exams-list-wrap,.stu-history-wrap,.sva-page{ background:var(--bg); padding:2rem 0 5rem; min-height:55vh; }
.stu-exams-list-wrap .container,.stu-history-wrap .container,.sva-wrap .container{ padding-top:1rem; }
.stu-list-spacer,.stu-history-spacer{ height:.8rem; }
.sva-wrap{ max-width:1240px; margin:0 auto; padding-left:2.4rem; padding-right:2.4rem; }
.sva-page .sva-wrap{ padding:0; }
/* --- student_exams_list --- */
.stu-list-code-entry{ background:var(--white); border:1px solid var(--border-light); border-radius:var(--r-xl); box-shadow:var(--shadow-card); padding:2.2rem 2.4rem; margin-bottom:2rem; text-align:center; position:relative; overflow:hidden; max-width:72rem; margin-left:auto; margin-right:auto; }
.stu-list-code-entry::before{ content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg, var(--primary), var(--accent)); }
.stu-list-code-entry h4{ font-family:var(--font-heading); font-size:1.85rem; font-weight:700; color:var(--text); margin:0 0 .4rem; }
.stu-list-code-entry p{ color:var(--text-muted); font-size:1.35rem; margin:0 0 1.4rem; }
.stu-list-code-input-group{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; max-width:44rem; margin:0 auto; }
.stu-list-code-input{ flex:1 1 20rem; padding:1.15rem 1.6rem; border:2px solid var(--border); border-radius:var(--r-md); font-size:1.5rem; background:var(--gray-25); outline:none; transition:all var(--t-base); text-align:center; font-weight:600; letter-spacing:.06em; }
.stu-list-code-input:focus{ border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-glow); background:var(--white); }
.stu-list-btn{ display:inline-flex; align-items:center; justify-content:center; gap:.6rem; padding:1.05rem 1.9rem; border-radius:var(--r-md); font-family:var(--font-heading); font-size:1.35rem; font-weight:700; border:2px solid transparent; cursor:pointer; transition:all var(--t-base); text-decoration:none !important; white-space:nowrap; }
.stu-list-btn-primary{ background:var(--primary); color:var(--white) !important; border-color:var(--primary); box-shadow:0 4px 14px var(--primary-glow); }
.stu-list-btn-primary:hover{ background:var(--primary-dark); transform:translateY(-2px); }
.stu-list-btn-success{ background:#15803d; color:var(--white) !important; border-color:#15803d; box-shadow:0 4px 14px rgba(21,128,61,.22); }
.stu-list-btn-success:hover{ background:#0f6a32; transform:translateY(-2px); }
.stu-list-grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:1.8rem; max-width:110rem; margin:0 auto; }
.stu-list-card{ background:var(--white); border:1px solid var(--border-light); border-radius:var(--r-lg); box-shadow:var(--shadow-card); padding:2rem 2rem 1.6rem; }
.stu-list-card h3{ font-family:var(--font-heading); font-size:1.6rem; font-weight:700; color:var(--text); margin:0 0 1.4rem; padding-bottom:1rem; border-bottom:1px solid var(--border-light); }
.stu-list-exam-item{ border:1px solid var(--border-light); border-radius:var(--r-md); padding:1.4rem 1.6rem; margin-bottom:1.2rem; background:var(--white); transition:all var(--t-base); }
.stu-list-exam-item:hover{ border-color:rgba(var(--primary-rgb),.18); box-shadow:var(--shadow-sm); transform:translateY(-1px); }
.stu-list-exam-header{ display:flex; justify-content:space-between; gap:1rem; align-items:flex-start; margin-bottom:.8rem; }
.stu-list-exam-title{ font-weight:700; font-size:1.5rem; color:var(--text); line-height:1.3; }
.stu-list-code-badge{ display:inline-flex; margin-top:.35rem; padding:.28rem .75rem; background:var(--primary-mist); color:var(--primary); border-radius:var(--r-full); font-size:1.12rem; font-weight:800; letter-spacing:.06em; }
.stu-list-exam-status{ padding:.38rem .9rem; border-radius:var(--r-full); font-size:1.1rem; font-weight:800; letter-spacing:.06em; white-space:nowrap; flex-shrink:0; }
.stu-list-status-available{ background:#eff6ff; color:#1e40af; border:1px solid #bfdbfe; }
.stu-list-status-completed{ background:#ecfdf5; color:#065f46; border:1px solid #a7f3d0; }
.stu-list-exam-meta{ display:flex; gap:.6rem; flex-wrap:wrap; margin:.8rem 0; }
.stu-list-meta-tag{ display:inline-flex; align-items:center; gap:.35rem; padding:.38rem .8rem; background:var(--gray-50); border:1px solid var(--border-light); border-radius:var(--r-full); font-size:1.2rem; font-weight:600; color:var(--text-secondary); }
.stu-list-exam-date{ font-size:1.22rem; color:var(--text-muted); margin:.4rem 0 .9rem; }
.stu-list-score-display{ font-family:var(--font-heading); font-size:2rem; font-weight:800; color:var(--primary); line-height:1; }
.stu-list-empty{ text-align:center; padding:3.5rem 1.6rem; color:var(--text-muted); }
.stu-list-empty-icon{ font-size:4rem; opacity:.6; margin-bottom:.8rem; }
.stu-list-alert{ max-width:72rem; margin:0 auto 1.6rem; padding:1.2rem 1.6rem; border-radius:var(--r-md); font-size:1.35rem; border:1px solid; }
.stu-list-alert-error{ background:#fef2f2; color:#991b1b; border-color:#fecaca; }
/* --- student_exam_history --- */
.stu-history-stats-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; max-width:90rem; margin:0 auto 2rem; }
.stu-history-stat-card{ background:var(--white); border:1px solid var(--border-light); border-radius:var(--r-lg); box-shadow:var(--shadow-card); padding:2rem 1.6rem; text-align:center; position:relative; overflow:hidden; }
.stu-history-stat-card::before{ content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--primary); }
.stu-history-stat-card:nth-child(2)::before{ background:var(--accent); }
.stu-history-stat-card:nth-child(3)::before{ background:var(--gold); }
.stu-history-stat-icon{ width:4.2rem; height:4.2rem; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; margin:0 auto .8rem; font-size:2rem; }
.stu-history-stat-icon.primary{ background:var(--primary-mist); color:var(--primary); }
.stu-history-stat-icon.success{ background:#ecfdf5; color:#065f46; }
.stu-history-stat-icon.warning{ background:#fef3c7; color:#92400e; }
.stu-history-stat-value{ font-family:var(--font-heading); font-size:2.6rem; font-weight:800; color:var(--text); line-height:1; }
.stu-history-stat-label{ font-size:1.2rem; color:var(--text-muted); font-weight:600; text-transform:uppercase; letter-spacing:.06em; margin-top:.3rem; }
.stu-history-subject{ background:var(--white); border:1px solid var(--border-light); border-radius:var(--r-lg); box-shadow:var(--shadow-card); padding:1.8rem 2rem; margin-bottom:1.6rem; max-width:96rem; margin-left:auto; margin-right:auto; }
.stu-history-subject-header{ margin-bottom:1.2rem; padding-bottom:1rem; border-bottom:1px solid var(--border-light); }
.stu-history-subject-title{ font-family:var(--font-heading); font-size:1.55rem; font-weight:700; color:var(--text); display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; }
.stu-history-subject-count{ padding:.28rem .8rem; background:var(--gray-100); border-radius:var(--r-full); font-size:1.15rem; font-weight:700; color:var(--text-secondary); border:1px solid var(--border-light); }
.stu-history-exam-list{ display:flex; flex-direction:column; gap:1rem; }
.stu-history-exam-item{ border:1px solid var(--border-light); border-radius:var(--r-md); padding:1.4rem 1.6rem; cursor:pointer; transition:all var(--t-base); background:var(--white); }
.stu-history-exam-item:hover{ border-color:var(--primary); box-shadow:var(--shadow-sm); transform:translateY(-1px); }
.stu-history-exam-item-header{ display:flex; justify-content:space-between; gap:1rem; align-items:center; margin-bottom:.6rem; }
.stu-history-exam-item-title{ font-weight:700; font-size:1.45rem; color:var(--text); flex:1; }
.stu-history-score-badge{ padding:.4rem 1rem; border-radius:var(--r-full); font-weight:800; font-size:1.3rem; color:var(--white); flex-shrink:0; }
.stu-history-score-excellent{ background:#15803d; }
.stu-history-score-good{ background:#2563eb; }
.stu-history-score-fair{ background:var(--accent); }
.stu-history-score-poor{ background:#dc2626; }
.stu-history-exam-item-meta{ display:flex; gap:1rem; flex-wrap:wrap; font-size:1.2rem; color:var(--text-muted); margin-bottom:.7rem; }
.stu-history-exam-item-footer{ display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; padding-top:.8rem; border-top:1px solid var(--border-light); }
.stu-history-exam-stats{ font-size:1.25rem; color:var(--text-secondary); font-weight:500; }
.stu-history-view-btn{ padding:.6rem 1.4rem; background:var(--primary); color:var(--white) !important; border-radius:var(--r-full); font-size:1.22rem; font-weight:700; text-decoration:none !important; border:1px solid var(--primary); transition:all var(--t-base); }
.stu-history-view-btn:hover{ background:var(--primary-dark); transform:translateY(-1px); }
.stu-history-empty{ text-align:center; padding:3rem 1.6rem; color:var(--text-muted); }
.stu-history-empty-icon{ font-size:4rem; opacity:.5; margin-bottom:.6rem; }
/* --- student_view_attendance --- */
.attendance-container{ max-width:96rem; margin:0 auto; }
.attendance-card{ background:var(--white); border:1px solid var(--border-light); border-radius:var(--r-xl); box-shadow:var(--shadow-card); padding:2.2rem 2.4rem; margin-bottom:1.8rem; position:relative; overflow:hidden; }
.attendance-card::before{ content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg, var(--primary), var(--accent)); }
.attendance-card h3{ font-family:var(--font-heading); font-size:1.65rem; font-weight:700; color:var(--text); margin:0 0 1.4rem; }
.month-selector{ display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; margin-bottom:1.6rem; padding:1rem 1.2rem; background:var(--gray-25); border:1px solid var(--border-light); border-radius:var(--r-md); }
.month-selector select{ min-width:14rem; padding:.9rem 1.2rem; border:1.5px solid var(--border); border-radius:var(--r-sm); font-size:1.35rem; background:var(--white); }
.month-selector .btn{ padding:.9rem 1.6rem; background:var(--primary); color:var(--white); border:1px solid var(--primary); border-radius:var(--r-sm); font-weight:700; cursor:pointer; }
.month-selector .btn:hover{ background:var(--primary-dark); }
.stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; margin-bottom:1.2rem; }
.stats-grid .stat-card{ padding:1.6rem 1.2rem; border-radius:var(--r-lg); text-align:center; border:1px solid var(--border-light); }
.stats-grid .stat-card.present{ background:#ecfdf5; border-color:#a7f3d0; }
.stats-grid .stat-card.absent{ background:#fef2f2; border-color:#fecaca; }
.stats-grid .stat-card.late{ background:#fffbeb; border-color:#fde68a; }
.stats-grid .stat-card.percentage{ background:#eff6ff; border-color:#bfdbfe; }
.stats-grid .stat-number{ font-family:var(--font-heading); font-size:2.4rem; font-weight:800; color:var(--text); line-height:1; }
.stats-grid .stat-label{ font-size:1.2rem; font-weight:700; color:var(--text-secondary); text-transform:uppercase; letter-spacing:.04em; margin-top:.3rem; }
table.calendar{ width:100%; border-collapse:collapse; background:var(--white); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-card); border:1px solid var(--border-light); }
table.calendar th{ background:var(--gray-900); color:var(--white); padding:1rem .6rem; font-size:1.2rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; text-align:center; }
table.calendar td{ border:1px solid var(--border-light); padding:.7rem .5rem; text-align:center; vertical-align:top; height:8.5rem; background:var(--white); transition:background var(--t-fast); }
table.calendar td.today{ background:var(--primary-mist); outline:2px solid var(--primary); outline-offset:-2px; }
table.calendar td.empty{ background:var(--gray-50); }
table.calendar .day-number{ font-weight:700; font-size:1.45rem; color:var(--text); margin-bottom:.4rem; }
table.calendar .day-status{ display:inline-flex; padding:.28rem .6rem; border-radius:var(--r-full); font-size:1.05rem; font-weight:700; letter-spacing:.03em; }
.status-present{ background:#ecfdf5; color:#065f46; border:1px solid #a7f3d0; }
.status-absent{ background:#fef2f2; color:#991b1b; border:1px solid #fecaca; }
.status-late{ background:#fffbeb; color:#92400e; border:1px solid #fde68a; }
.status-excused{ background:#eff6ff; color:#1e40af; border:1px solid #bfdbfe; }
.legend{ display:flex; gap:1rem; flex-wrap:wrap; justify-content:center; margin-top:1.2rem; padding:1rem; background:var(--white); border:1px solid var(--border-light); border-radius:var(--r-md); }
.legend-item{ display:flex; align-items:center; gap:.6rem; font-size:1.25rem; font-weight:600; color:var(--text-secondary); }
.legend-color{ width:1.6rem; height:1.6rem; border-radius:4px; border:1px solid var(--border); }
.no-data{ text-align:center; padding:4rem 2rem; background:var(--white); border:1px dashed var(--border); border-radius:var(--r-lg); color:var(--text-muted); margin-top:1.6rem; }
.sva-wrap{ background:transparent; }
/* =====================================================
Fix 13: REMAINING PORTAL PAGES — 12 affiliated pages
student_view_assignments, student_study_flashcards,
student_games, student_library, view_announcements,
parent_messages, view_calendar, student_badges,
student_practice_hub, parent_view_fees,
parent_dashboard, student_wallet_card
All use 30-50 bespoke classes with zero rules in
stylenew.css (despite comments "moved to Section XX").
Diagnosis: pages correctly include header.inc.php
(CSS loads), mismatch is 90% missing CSS / 10% BEM
naming drift. This fix supplies the absent system
so every page conforms to stylenew.css tokens.
===================================================== */
/* --- Shared header-card (used by 5 pages) --- */
.header-card{ background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); color:var(--white); border-radius:var(--r-xl); padding:2.2rem 2.4rem; margin-bottom:1.8rem; position:relative; overflow:hidden; box-shadow:var(--shadow-lg); border:1px solid rgba(255,255,255,.08); }
.header-card::before{ content:''; position:absolute; top:-6rem; right:-4rem; width:18rem; height:18rem; border-radius:50%; background:rgba(255,255,255,.07); }
.header-card .header-title{ font-family:var(--font-heading); font-size:2rem; font-weight:800; color:var(--white); margin-bottom:.4rem; position:relative; }
.header-card .header-subtitle{ color:rgba(255,255,255,.86); font-size:1.35rem; position:relative; }
.header-card .header-subtitle strong{ color:var(--white); }
/* --- student_view_assignments --- */
.assignment-container{ max-width:96rem; margin:0 auto; padding:0 2.4rem; background:transparent; }
.tabs{ display:flex; gap:.6rem; margin-bottom:1.6rem; border-bottom:2px solid var(--border-light); padding-bottom:.2rem; }
.tab{ padding:.85rem 1.6rem; border-radius:var(--r-md) var(--r-md) 0 0; font-weight:700; font-size:1.35rem; color:var(--text-muted); cursor:pointer; border:1px solid transparent; border-bottom:none; transition:all var(--t-base); }
.tab:hover{ color:var(--primary); background:var(--primary-mist); }
.tab.active{ background:var(--white); color:var(--primary); border-color:var(--border-light); box-shadow:var(--shadow-sm); }
.assignment-card{ background:var(--white); border:1px solid var(--border-light); border-radius:var(--r-lg); padding:1.8rem 2rem; margin-bottom:1.4rem; box-shadow:var(--shadow-card); transition:all var(--t-base); border-left:4px solid transparent; }
.assignment-card.pending{ border-left-color:var(--accent); }
.assignment-card.submitted{ border-left-color:#22c55e; }
.assignment-card.overdue{ border-left-color:#dc2626; background:#fff7f7; }
.assignment-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-hover); }
.assignment-header{ display:flex; justify-content:space-between; gap:1rem; align-items:center; margin-bottom:.8rem; }
.assignment-title{ font-weight:800; font-size:1.55rem; color:var(--text); }
.status-badge{ padding:.38rem .9rem; border-radius:var(--r-full); font-size:1.15rem; font-weight:800; color:var(--white); }
.status-submitted{ background:#22c55e; } .status-late{ background:#f59e0b; } .status-pending{ background:var(--gray-400); }
.assignment-meta{ display:flex; gap:.8rem; flex-wrap:wrap; font-size:1.22rem; color:var(--text-muted); margin-bottom:.8rem; }
.due-info{ padding:.7rem 1rem; border-radius:var(--r-md); font-size:1.25rem; font-weight:600; margin-bottom:1rem; background:var(--gray-50); border:1px solid var(--border-light); }
.due-info.overdue{ background:#fef2f2; color:#991b1b; border-color:#fecaca; }
.assignment-description{ background:var(--gray-25); border:1px solid var(--border-light); border-radius:var(--r-md); padding:1.2rem 1.4rem; font-size:1.35rem; color:var(--text-secondary); line-height:1.65; margin-bottom:1.2rem; }
.submit-section{ text-align:center; }
.submitted-info{ text-align:left; }
.submission-content{ background:var(--white); border:1px solid var(--border-light); border-radius:var(--r-md); padding:1.4rem; margin-top:.6rem; font-size:1.35rem; line-height:1.65; }
.grade-section{ margin-top:1.2rem; padding:1.4rem; background:var(--gray-25); border:1px solid var(--border-light); border-radius:var(--r-md); }
.grade-display-student{ display:flex; align-items:center; gap:1.2rem; margin:.8rem 0; }
.grade-badge-large{ width:5.2rem; height:5.2rem; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; font-weight:800; font-size:1.8rem; color:var(--white); background:var(--primary); }
.grade-badge-large.grade-a{ background:#15803d; } .grade-badge-large.grade-b{ background:#2563eb; } .grade-badge-large.grade-c{ background:#0d9488; } .grade-badge-large.grade-d{ background:#d97706; } .grade-badge-large.grade-f{ background:#dc2626; }
.teacher-feedback{ margin-top:1rem; padding:1rem 1.2rem; background:var(--white); border-radius:var(--r-md); border:1px solid var(--border-light); }
.awaiting-grade{ text-align:center; padding:2rem; color:var(--text-muted); }
/* =====================================================
Assignment Submit Modal — extends stylenew.css Section 95
Base .modal/.modal-content/.modal-header/.close are now
handled by stylenew.css (brand-green header, blur backdrop,
animation). This block only widens the assignment modal
and styles its inner form like #composeModal so it matches
every other modal on the site.
===================================================== */
#submitModal .modal-content{ max-width:72rem; }
#submitModal form{ padding:1.5rem; }
#submitModal .form-group{ margin-bottom:1.1rem; }
#submitModal .form-group label{ display:block; font-size:1.35rem; font-weight:600; color:var(--gray-700, #334155); margin-bottom:.4rem; }
#submitModal .form-control{ width:100%; padding:.75rem 1rem; font-size:1.45rem; border:1px solid var(--gray-200, #e2e8f0); border-radius:8px; background:var(--gray-50, #f8fafc); color:var(--gray-900, #0f172a); transition:border-color .15s, box-shadow .15s, background .15s; font-family:inherit; box-sizing:border-box; }
#submitModal .form-control:focus{ outline:0; border-color:var(--primary); background:var(--white); box-shadow:0 0 0 3px rgba(var(--primary-rgb), .18); }
#submitModal textarea.form-control{ min-height:140px; resize:vertical; line-height:1.5; font-size:1.45rem; }
#submitModal .alert-info{ background:#eff6ff; color:#1e40af; border:1px solid #bfdbfe; padding:1rem 1.2rem; border-radius:8px; font-size:1.35rem; margin:1rem 0 0; line-height:1.6; }
#submitModal .alert-info strong{ color:#1e40af; }
#submitModal .alert-info ul{ margin:.6rem 0 0 1.2rem; }
#submitModal button[type="submit"]{ width:100% !important; margin-top:.5rem; padding:1rem 1.2rem; background:var(--primary); color:var(--white); border:0; border-radius:8px; font-size:1.45rem; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:.5rem; transition:transform .1s, box-shadow .15s; box-shadow:0 4px 12px rgba(var(--primary-rgb), .3); }
#submitModal button[type="submit"]:hover{ transform:translateY(-1px); box-shadow:0 6px 18px rgba(var(--primary-rgb), .4); }
#submitModal button[type="submit"]:active{ transform:translateY(0); }
#modal-assignment-title{ padding:1rem 1.5rem 0; font-size:1.45rem; font-weight:600; color:var(--gray-800, #1e293b); line-height:1.4; }
#submitModal .cke_chrome{ border-radius:8px; overflow:hidden; border-color:var(--gray-200, #e2e8f0) !important; }
/* Global modal font-size boost — align all modals with main-page 1.6rem body size */
.modal .modal-content{ font-size:1.45rem; line-height:1.65; }
.modal .modal-content p{ font-size:1.45rem; }
.modal .modal-content .form-group label{ font-size:1.35rem; }
.modal .modal-content .form-control{ font-size:1.45rem; }
.modal .modal-content small{ font-size:1.25rem; }
.modal .modal-content .btn, .modal .modal-content button{ font-size:1.45rem; }
.pq-m{ font-size:1.45rem; }
.pq-mb{ font-size:1.45rem; }
.cbt-modal .modal-content{ font-size:1.45rem; }
/* --- student_study_flashcards --- */
.ssf-page{ background:var(--bg); padding:2rem 0 5rem; }
.flashcard-container{ max-width:96rem; margin:0 auto; padding:0 2.4rem; }
.flashcard-container .card{ background:var(--white); border:1px solid var(--border-light); border-radius:var(--r-xl); padding:2.4rem; box-shadow:var(--shadow-card); text-align:center; margin-bottom:1.8rem; }
.flashcard-container .card h3{ font-size:1.8rem; font-weight:800; margin-bottom:.6rem; }
.subject-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(22rem, 1fr)); gap:1.4rem; margin-top:1.6rem; }
.subject-card{ display:flex; flex-direction:column; align-items:center; gap:.6rem; padding:2rem 1.6rem; background:var(--white); border:1.5px solid var(--border-light); border-radius:var(--r-lg); text-align:center; text-decoration:none !important; transition:all var(--t-base); box-shadow:var(--shadow-card); color:var(--text) !important; }
.subject-card:hover{ border-color:var(--primary); transform:translateY(-4px); box-shadow:var(--shadow-hover); background:var(--primary-mist); }
.subject-icon{ font-size:3.2rem; }
.subject-name{ font-weight:800; font-size:1.45rem; }
.subject-stats{ font-size:1.25rem; color:var(--text-muted); line-height:1.5; }
.progress-section{ background:var(--white); border:1px solid var(--border-light); border-radius:var(--r-lg); padding:1.8rem 2rem; box-shadow:var(--shadow-card); }
.progress-title{ font-weight:800; font-size:1.45rem; margin-bottom:1rem; }
.stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; }
.stat-box{ background:var(--gray-25); border:1px solid var(--border-light); border-radius:var(--r-md); padding:1.4rem 1rem; text-align:center; }
/* --- student_games --- */
.stu-games-wrap{ background:var(--bg); padding:2rem 0 5rem; }
.stu-games-spacer{ height:.8rem; }
.stu-games-header{ text-align:center; margin-bottom:1.8rem; }
.stu-games-header-title{ font-family:var(--font-heading); font-size:2.4rem; font-weight:800; color:var(--text); }
.stu-games-header-sub{ color:var(--text-muted); font-size:1.35rem; margin-top:.4rem; }
.stu-games-stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; max-width:96rem; margin:0 auto 2rem; padding:0 2.4rem; }
.stu-games-stat-card{ background:var(--white); border:1px solid var(--border-light); border-radius:var(--r-lg); padding:1.8rem 1.2rem; text-align:center; box-shadow:var(--shadow-card); border-top:3px solid var(--primary); }
.stu-games-stat-num{ font-family:var(--font-heading); font-size:2.2rem; font-weight:800; color:var(--text); }
.stu-games-stat-lbl{ font-size:1.15rem; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.06em; margin-top:.2rem; }
.stu-games-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(28rem, 1fr)); gap:1.6rem; max-width:110rem; margin:0 auto; padding:0 2.4rem; }
.stu-game-card{ background:var(--white); border:1px solid var(--border-light); border-radius:var(--r-xl); padding:2rem; box-shadow:var(--shadow-card); cursor:pointer; transition:all var(--t-base); position:relative; overflow:hidden; }
.stu-game-card::before{ content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--primary); opacity:0; transition:opacity var(--t-base); }
.stu-game-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-hover); border-color:rgba(var(--primary-rgb),.15); }
.stu-game-card:hover::before{ opacity:1; }
.stu-game-icon{ font-size:3rem; margin-bottom:.6rem; }
.stu-game-title{ font-weight:800; font-size:1.55rem; margin-bottom:.6rem; }
.stu-game-meta{ display:flex; gap:.6rem; flex-wrap:wrap; margin-bottom:1rem; }
.stu-game-meta-badge{ padding:.32rem .75rem; background:var(--gray-50); border:1px solid var(--border-light); border-radius:var(--r-full); font-size:1.15rem; font-weight:600; }
.stu-game-difficulty{ padding:.32rem .75rem; border-radius:var(--r-full); font-size:1.1rem; font-weight:800; text-transform:uppercase; }
.stu-game-difficulty-easy{ background:#ecfdf5; color:#065f46; } .stu-game-difficulty-medium{ background:#fffbeb; color:#92400e; } .stu-game-difficulty-hard{ background:#fef2f2; color:#991b1b; }
.stu-game-best{ display:flex; justify-content:space-between; background:var(--primary-mist); border-radius:var(--r-md); padding:.8rem 1rem; margin-bottom:1rem; }
.stu-game-best-lbl{ font-size:1.15rem; font-weight:700; color:var(--primary-dark); } .stu-game-best-val{ font-weight:800; color:var(--primary); }
.stu-game-stats{ display:flex; flex-direction:column; gap:.4rem; margin-bottom:1.2rem; font-size:1.25rem; color:var(--text-secondary); }
.stu-game-stat-row{ display:flex; justify-content:space-between; border-bottom:1px dashed var(--border-light); padding:.3rem 0; }
.stu-game-stat-row:last-child{ border:none; }
.stu-game-play{ width:100%; padding:1rem; background:var(--primary); color:var(--white); border:none; border-radius:var(--r-md); font-weight:800; cursor:pointer; transition:all var(--t-base); box-shadow:0 4px 14px var(--primary-glow); }
.stu-game-play:hover{ background:var(--primary-dark); transform:translateY(-1px); }
.stu-games-empty{ text-align:center; padding:4rem 2rem; background:var(--white); border:1px dashed var(--border); border-radius:var(--r-xl); color:var(--text-muted); max-width:60rem; margin:2rem auto; }
.stu-games-empty-icon{ font-size:5rem; opacity:.6; margin-bottom:1rem; }
/* --- student_library / view_calendar shared --- */
.slib-page,.calendar-page{ background:var(--bg); padding:2rem 0 5rem; }
.library-wrap,.calendar-container{ max-width:110rem; margin:0 auto; padding:0 2.4rem; }
.library-container .header-card,.calendar-container .header-card{ margin-bottom:1.8rem; }
.filter-section{ background:var(--white); border:1px solid var(--border-light); border-radius:var(--r-lg); padding:1.6rem 1.8rem; margin-bottom:1.6rem; box-shadow:var(--shadow-card); }
.filter-row{ display:grid; grid-template-columns:1fr 1fr 1fr auto; gap:1.2rem; align-items:end; }
.filter-tag{ display:inline-flex; padding:.35rem .8rem; background:var(--primary-mist); color:var(--primary); border-radius:var(--r-full); font-size:1.15rem; font-weight:700; margin-right:.4rem; border:1px solid rgba(var(--primary-rgb),.15); }
.materials-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(30rem, 1fr)); gap:1.6rem; }
.material-card{ background:var(--white); border:1px solid var(--border-light); border-radius:var(--r-lg); padding:1.8rem; box-shadow:var(--shadow-card); transition:all var(--t-base); display:flex; flex-direction:column; gap:.8rem; }
.material-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-hover); border-color:rgba(var(--primary-rgb),.12); }
.material-icon{ font-size:2.6rem; }
.material-title{ font-weight:800; font-size:1.45rem; color:var(--text); line-height:1.3; }
.material-meta{ display:flex; gap:.5rem; flex-wrap:wrap; }
.meta-badge{ padding:.28rem .7rem; background:var(--gray-50); border:1px solid var(--border-light); border-radius:var(--r-full); font-size:1.1rem; font-weight:600; color:var(--text-secondary); }
.material-description{ font-size:1.3rem; color:var(--text-muted); line-height:1.6; flex:1; }
.material-stats{ font-size:1.2rem; color:var(--text-muted); border-top:1px solid var(--border-light); padding-top:.8rem; }
.material-actions{ display:flex; gap:.8rem; margin-top:.6rem; }
.material-actions .btn-success,.material-actions .btn-info{ flex:1; padding:.75rem 1rem; border-radius:var(--r-md); font-weight:700; font-size:1.25rem; text-align:center; text-decoration:none !important; border:1px solid; transition:all var(--t-base); }
.material-actions .btn-success{ background:#15803d; color:var(--white); border-color:#15803d; }
.material-actions .btn-info{ background:#2563eb; color:var(--white); border-color:#2563eb; }
.content-grid{ display:grid; grid-template-columns:2fr 1fr; gap:1.8rem; }
.content-grid .card{ background:var(--white); border:1px solid var(--border-light); border-radius:var(--r-lg); padding:1.8rem; box-shadow:var(--shadow-card); }
.calendar-table{ width:100%; border-collapse:collapse; background:var(--white); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-card); border:1px solid var(--border-light); }
.calendar-table th{ background:var(--gray-900); color:var(--white); padding:1rem .6rem; font-size:1.15rem; text-transform:uppercase; text-align:center; }
.calendar-table td{ border:1px solid var(--border-light); padding:.6rem; height:8rem; vertical-align:top; text-align:center; }
.calendar-table td.today{ background:var(--primary-mist); outline:2px solid var(--primary); outline-offset:-2px; }
.calendar-table td.empty{ background:var(--gray-50); }
.calendar-table .day-number{ font-weight:800; font-size:1.3rem; }
.event-dot{ display:inline-flex; padding:.18rem .5rem; border-radius:var(--r-full); color:var(--white); font-size:1rem; font-weight:700; margin:.15rem; }
.upcoming-item{ border-left:4px solid var(--primary); padding:1rem 1.2rem; margin-bottom:1rem; background:var(--gray-25); border-radius:0 var(--r-md) var(--r-md) 0; border-top:1px solid var(--border-light); border-right:1px solid var(--border-light); border-bottom:1px solid var(--border-light); }
.event-type-badge{ display:inline-flex; padding:.25rem .7rem; border-radius:var(--r-full); color:var(--white); font-size:1.05rem; font-weight:800; margin-top:.4rem; }
.calendar-nav{ display:flex; justify-content:space-between; align-items:center; margin-top:1.2rem; }
.nav-btn{ padding:.7rem 1.4rem; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22); color:var(--white); border-radius:var(--r-full); font-weight:700; cursor:pointer; backdrop-filter:blur(6px); }
.nav-btn:hover{ background:var(--white); color:var(--primary); }
.current-month{ font-weight:800; font-size:1.35rem; letter-spacing:.04em; }
/* --- view_announcements --- */
.announcement-page{ background:var(--bg); padding:2rem 0 5rem; }
.announcement-container{ max-width:90rem; margin:0 auto; padding:0 2.4rem; }
.unread-badge{ display:inline-flex; margin-top:1rem; padding:.45rem 1rem; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.22); border-radius:var(--r-full); font-size:1.2rem; font-weight:800; backdrop-filter:blur(6px); }
.announcement-item{ background:var(--white); border:1px solid var(--border-light); border-radius:var(--r-lg); padding:1.6rem 1.8rem; margin-bottom:1.2rem; box-shadow:var(--shadow-card); transition:all var(--t-base); border-left:4px solid transparent; }
.announcement-item.unread{ border-left-color:var(--primary); background:linear-gradient(90deg, var(--primary-mist) 0%, var(--white) 6%); }
.announcement-item.urgent{ border-left-color:#dc2626; } .announcement-item.high{ border-left-color:var(--accent); }
.announcement-item:hover{ transform:translateY(-1px); box-shadow:var(--shadow-hover); }
.announcement-header{ display:flex; gap:1rem; margin-bottom:.6rem; }
.announcement-title{ font-weight:800; font-size:1.5rem; color:var(--text); display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.new-badge{ background:#dc2626; color:var(--white); padding:.18rem .6rem; border-radius:var(--r-full); font-size:1rem; font-weight:800; animation:pulse 2s infinite; }
.announcement-meta{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.4rem; }
.category-general{ background:var(--gray-100); color:var(--text-secondary); } .category-academic{ background:#dbeafe; color:#1e3a8a; } .category-event{ background:#fef3c7; color:#92400e; } .category-urgent{ background:#fee2e2; color:#991b1b; } .category-fee{ background:#d1fae5; color:#065f46; }
.priority-badge{ padding:.28rem .7rem; border-radius:var(--r-full); font-size:1.1rem; font-weight:800; color:var(--white); }
.priority-urgent{ background:#dc2626; } .priority-high{ background:var(--accent); }
.target-badge{ background:var(--primary-mist); color:var(--primary); }
.announcement-content{ font-size:1.35rem; color:var(--text-secondary); line-height:1.7; padding:.8rem 0; border-top:1px solid var(--border-light); border-bottom:1px solid var(--border-light); margin:.8rem 0; }
.announcement-footer{ display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; font-size:1.2rem; color:var(--text-muted); }
/* --- parent_messages --- */
.messages-container{ max-width:102rem; margin:0 auto; padding:0 2.4rem; }
.messages-header{ display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:1.6rem; }
.messages-header h2{ margin:0; font-size:1.9rem; font-weight:800; }
.messages-layout{ display:grid; grid-template-columns:22rem 1fr; gap:1.6rem; align-items:start; }
.messages-sidebar{ background:var(--white); border:1px solid var(--border-light); border-radius:var(--r-lg); padding:1rem; box-shadow:var(--shadow-card); position:sticky; top:1rem; }
.sidebar-item{ display:flex; align-items:center; gap:.8rem; padding:1rem 1.2rem; border-radius:var(--r-md); font-weight:600; color:var(--text-secondary); text-decoration:none !important; transition:all var(--t-fast); border:1px solid transparent; }
.sidebar-item:hover{ background:var(--gray-50); color:var(--text); border-color:var(--border-light); }
.sidebar-item.active{ background:var(--primary); color:var(--white) !important; border-color:var(--primary); box-shadow:0 4px 12px var(--primary-glow); }
.sidebar-item .badge{ margin-left:auto; background:var(--accent); color:var(--white); padding:.18rem .6rem; border-radius:var(--r-full); font-size:1.1rem; font-weight:800; }
.sidebar-item.active .badge{ background:var(--white); color:var(--primary); }
.messages-content{ background:var(--white); border:1px solid var(--border-light); border-radius:var(--r-lg); box-shadow:var(--shadow-card); overflow:hidden; }
.messages-list{ display:flex; flex-direction:column; }
.message-item{ display:flex; gap:1.2rem; padding:1.4rem 1.6rem; border-bottom:1px solid var(--border-light); cursor:pointer; transition:background var(--t-fast); }
.message-item:hover{ background:var(--gray-25); }
.message-item.unread{ background:var(--primary-mist); border-left:3px solid var(--primary); }
.message-avatar{ width:4.2rem; height:4.2rem; border-radius:50%; background:var(--primary); color:var(--white); display:inline-flex; align-items:center; justify-content:center; font-weight:800; flex-shrink:0; }
.message-details{ flex:1; min-width:0; }
.message-header-row{ display:flex; justify-content:space-between; gap:1rem; margin-bottom:.2rem; }
.message-sender{ font-weight:700; font-size:1.4rem; color:var(--text); } .message-date{ font-size:1.15rem; color:var(--text-muted); white-space:nowrap; }
.message-subject{ font-weight:600; font-size:1.3rem; color:var(--text-secondary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.message-preview{ font-size:1.25rem; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.attachment-indicator{ font-size:1.15rem; color:var(--primary); font-weight:600; margin-top:.3rem; }
/* --- student_badges --- */
.stu-badges-wrap{ background:var(--bg); padding:2rem 0 5rem; max-width:110rem; margin:0 auto; padding-left:2.4rem; padding-right:2.4rem; }
.stu-badges-header{ text-align:center; margin-bottom:1.8rem; }
.stu-badges-header-title{ font-family:var(--font-heading); font-size:2.2rem; font-weight:800; color:var(--text); }
.stu-badges-header-subtitle{ color:var(--text-muted); font-size:1.35rem; margin-top:.3rem; }
.stu-badges-progress{ background:var(--white); border:1px solid var(--border-light); border-radius:var(--r-lg); padding:1.4rem 1.6rem; margin-bottom:1.8rem; box-shadow:var(--shadow-card); }
.stu-badges-progress-text{ font-weight:700; font-size:1.3rem; margin-bottom:.6rem; text-align:center; }
.stu-badges-progress-bar{ height:1.2rem; background:var(--gray-100); border-radius:var(--r-full); overflow:hidden; border:1px solid var(--border-light); }
.stu-badges-progress-fill{ height:100%; background:linear-gradient(90deg, var(--primary), var(--accent)); color:var(--white); font-size:1rem; font-weight:800; display:flex; align-items:center; justify-content:center; transition:width .4s; }
.stu-badges-card{ background:var(--white); border:1px solid var(--border-light); border-radius:var(--r-lg); padding:1.8rem; margin-bottom:1.6rem; box-shadow:var(--shadow-card); }
.stu-badges-card h3{ font-size:1.5rem; font-weight:800; margin-bottom:1.2rem; padding-bottom:.8rem; border-bottom:1px solid var(--border-light); }
.stu-badges-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(22rem, 1fr)); gap:1.2rem; }
.stu-badge-card{ border:1.5px solid var(--border-light); border-radius:var(--r-lg); padding:1.6rem; text-align:center; transition:all var(--t-base); background:var(--white); }
.stu-badge-card.earned{ box-shadow:var(--shadow-sm); }
.stu-badge-card.earned:hover{ transform:translateY(-3px); box-shadow:var(--shadow-hover); }
.stu-badge-card.locked{ opacity:.62; background:var(--gray-50); }
.stu-badge-icon{ font-size:3rem; margin-bottom:.5rem; }
.stu-badge-name{ font-weight:800; font-size:1.35rem; margin-bottom:.3rem; }
.stu-badge-desc{ font-size:1.2rem; color:var(--text-muted); line-height:1.5; margin-bottom:.6rem; }
.stu-badge-earned-date{ font-size:1.1rem; color:#065f46; font-weight:700; }
.stu-badge-locked{ font-size:1.1rem; color:var(--text-muted); font-weight:700; }
.stu-badge-criteria{ margin-top:.6rem; padding:.4rem .7rem; background:var(--gray-50); border-radius:var(--r-full); font-size:1.1rem; color:var(--text-muted); border:1px solid var(--border-light); }
/* --- student_practice_hub --- */
.hub-wrap{ background:var(--bg); padding:2rem 0 5rem; }
.hub-wrap .container{ max-width:110rem; }
.hub-section-title{ font-family:var(--font-heading); font-size:1.7rem; font-weight:800; color:var(--text); margin:2rem 0 1.2rem; display:flex; align-items:center; gap:.6rem; }
.hub-type-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.6rem; margin-bottom:2rem; }
.hub-type-card{ padding:2.2rem 2rem; border-radius:var(--r-xl); border:2px solid var(--border-light); cursor:pointer; transition:all var(--t-base); background:var(--white); text-align:center; box-shadow:var(--shadow-card); position:relative; overflow:hidden; }
.hub-type-card::before{ content:''; position:absolute; top:0; left:0; right:0; height:4px; opacity:0; transition:opacity var(--t-base); }
.hub-type-card.jamb-card::before{ background:#2563eb; } .hub-type-card.waec-card::before{ background:#15803d; }
.hub-type-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-hover); border-color:transparent; }
.hub-type-card.selected{ border-color:var(--primary); box-shadow:0 8px 24px var(--primary-glow); transform:translateY(-2px); }
.hub-type-card.selected::before{ opacity:1; }
.hub-type-icon{ font-size:3.2rem; display:block; margin-bottom:.6rem; }
.hub-type-badge{ display:inline-flex; padding:.3rem .8rem; border-radius:var(--r-full); font-size:1.1rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; margin-bottom:.6rem; }
.jamb-card .hub-type-badge{ background:#dbeafe; color:#1e3a8a; } .waec-card .hub-type-badge{ background:#dcfce7; color:#065f46; }
.hub-type-card h3{ font-size:1.65rem; font-weight:800; margin:.4rem 0 .3rem; }
.hub-type-card p{ font-size:1.25rem; color:var(--text-muted); line-height:1.5; margin:0; }
.hub-form-card{ background:var(--white); border:1px solid var(--border-light); border-radius:var(--r-xl); box-shadow:var(--shadow-card); overflow:hidden; margin-bottom:1.6rem; display:none; }
.hub-form-card.visible{ display:block; animation:hubIn .35s ease; }
@keyframes hubIn{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none; } }
.hub-form-head{ padding:1.4rem 2rem; font-weight:800; color:var(--white); display:flex; align-items:center; gap:.7rem; }
.hub-form-head.jamb-head{ background:linear-gradient(135deg, #2563eb, #1e40af); }
.hub-form-head.waec-head{ background:linear-gradient(135deg, #15803d, #065f46); }
.hub-form-body{ padding:1.8rem 2rem; }
.hub-form-grid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:1.4rem; margin-bottom:1.2rem; }
.hub-label{ font-weight:700; font-size:1.25rem; color:var(--text); display:block; margin-bottom:.4rem; }
.hub-select{ width:100%; padding:1rem 1.2rem; border:1.5px solid var(--border); border-radius:var(--r-md); font-size:1.35rem; background:var(--white); }
.hub-select:focus{ border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-glow); outline:none; }
.hub-num-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:.6rem; }
.hub-num-btn{ padding:.85rem; border:1.5px solid var(--border); border-radius:var(--r-md); background:var(--white); font-weight:800; cursor:pointer; transition:all var(--t-fast); }
.hub-num-btn:hover{ border-color:var(--primary); color:var(--primary); }
.hub-num-btn.selected{ background:var(--primary); color:var(--white); border-color:var(--primary); box-shadow:0 4px 12px var(--primary-glow); }
.hub-avail-note{ font-size:1.2rem; font-weight:600; min-height:1.6rem; margin-bottom:.8rem; }
.hub-avail-note.good{ color:#065f46; } .hub-avail-note.bad{ color:#991b1b; }
.hub-start-btn{ width:100%; padding:1.2rem; background:var(--primary); color:var(--white); border:none; border-radius:var(--r-md); font-weight:800; font-size:1.45rem; cursor:pointer; box-shadow:0 6px 18px var(--primary-glow); transition:all var(--t-base); }
.hub-start-btn:hover{ background:var(--primary-dark); transform:translateY(-1px); }
.hub-recent-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(22rem, 1fr)); gap:1.2rem; }
.hub-recent-card{ background:var(--white); border:1px solid var(--border-light); border-radius:var(--r-lg); padding:1.4rem 1.6rem; box-shadow:var(--shadow-card); text-align:center; }
.hub-recent-type{ font-weight:800; font-size:1.1rem; letter-spacing:.08em; text-transform:uppercase; margin-bottom:.2rem; }
.hub-recent-subj{ font-weight:800; font-size:1.45rem; color:var(--text); }
.hub-recent-year{ font-size:1.2rem; color:var(--text-muted); margin-bottom:.6rem; }
.hub-recent-score{ font-family:var(--font-heading); font-size:2rem; font-weight:800; line-height:1; margin:.6rem 0; }
.hub-recent-score.good{ color:#15803d; } .hub-recent-score.avg{ color:#d97706; } .hub-recent-score.poor{ color:#dc2626; }
.hub-recent-date{ font-size:1.1rem; color:var(--text-muted); margin-top:.4rem; }
.hub-recent-retry{ display:inline-flex; margin-top:.8rem; padding:.5rem 1.2rem; background:var(--gray-900); color:var(--white) !important; border-radius:var(--r-full); font-size:1.2rem; font-weight:700; text-decoration:none !important; }
/* --- parent_view_fees --- */
.fees-container{ max-width:96rem; margin:0 auto; padding:3.2rem 2.4rem 5rem; background:var(--bg); min-height:60vh; }
.student-header{ display:flex; align-items:center; gap:1.4rem; background:var(--white); border:1px solid var(--border-light); border-radius:var(--r-lg); padding:1.6rem 1.8rem; margin-bottom:1.6rem; box-shadow:var(--shadow-card); }
.student-avatar{ width:4.8rem; height:4.8rem; border-radius:50%; background:var(--primary); color:var(--white); display:inline-flex; align-items:center; justify-content:center; font-size:2rem; flex-shrink:0; }
.student-header h3{ margin:0 0 .15rem; font-size:1.6rem; font-weight:800; }
.student-header p{ margin:0; font-size:1.25rem; color:var(--text-muted); }
.summary-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; margin-bottom:1.8rem; }
.summary-card{ background:var(--white); border:1px solid var(--border-light); border-radius:var(--r-lg); padding:1.6rem; text-align:center; box-shadow:var(--shadow-card); border-top:3px solid var(--primary); }
.summary-card.sc-paid{ border-top-color:#22c55e; } .summary-card.sc-balance{ border-top-color:#ef4444; }
.sc-label{ font-size:1.15rem; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.06em; }
.sc-val{ font-family:var(--font-heading); font-size:2.2rem; font-weight:800; color:var(--text); margin-top:.3rem; }
.fee-card{ background:var(--white); border:1px solid var(--border-light); border-radius:var(--r-lg); padding:1.8rem; margin-bottom:1.4rem; box-shadow:var(--shadow-card); transition:all var(--t-base); }
.fee-card:hover{ box-shadow:var(--shadow-hover); transform:translateY(-1px); }
.fee-card-top{ display:flex; justify-content:space-between; gap:1rem; align-items:flex-start; margin-bottom:1rem; }
.fee-card-title{ font-weight:800; font-size:1.45rem; color:var(--text); }
.fee-card-sub{ font-size:1.2rem; color:var(--text-muted); margin-top:.25rem; }
.overdue-tag{ display:inline-flex; margin-left:.6rem; padding:.18rem .6rem; background:#fee2e2; color:#991b1b; border-radius:var(--r-full); font-size:1.05rem; font-weight:800; }
.status-badge{ padding:.4rem .9rem; border-radius:var(--r-full); font-size:1.15rem; font-weight:800; color:var(--white); white-space:nowrap; }
.status-paid{ background:#22c55e; } .status-partial{ background:#f59e0b; } .status-overdue{ background:#dc2626; } .status-unpaid{ background:var(--gray-400); }
.fee-amounts{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-bottom:1rem; }
.amount-box{ background:var(--gray-25); border:1px solid var(--border-light); border-radius:var(--r-md); padding:1rem; text-align:center; }
.amount-box.ab-paid{ background:#ecfdf5; border-color:#a7f3d0; } .amount-box.ab-balance{ background:#fef2f2; border-color:#fecaca; }
.ab-label{ font-size:1.1rem; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.05em; }
.ab-val{ font-family:var(--font-heading); font-size:1.65rem; font-weight:800; color:var(--text); margin-top:.15rem; }
.progress-wrap{ margin-bottom:1.2rem; }
.progress-meta{ display:flex; justify-content:space-between; font-size:1.15rem; font-weight:600; color:var(--text-muted); margin-bottom:.35rem; }
.progress-bar{ height:.8rem; background:var(--gray-100); border-radius:var(--r-full); overflow:hidden; border:1px solid var(--border-light); }
.progress-fill{ height:100%; background:linear-gradient(90deg, var(--primary), var(--primary-light)); transition:width .4s; }
.pay-history{ margin-top:1.2rem; padding:1.2rem; background:var(--gray-25); border:1px solid var(--border-light); border-radius:var(--r-md); }
.pay-hist-table{ width:100%; border-collapse:collapse; font-size:1.25rem; background:var(--white); border-radius:var(--r-md); overflow:hidden; }
.pay-hist-table th{ background:var(--gray-50); padding:.8rem .9rem; text-align:left; font-size:1.1rem; text-transform:uppercase; color:var(--text-muted); border-bottom:1px solid var(--border-light); }
.pay-hist-table td{ padding:.8rem .9rem; border-bottom:1px solid var(--border-light); }
.ph-badge{ padding:.28rem .65rem; border-radius:var(--r-full); font-size:1.05rem; font-weight:800; color:var(--white); }
.ph-approved{ background:#22c55e; } .ph-pending{ background:#f59e0b; } .ph-rejected{ background:#dc2626; }
.btn-ghost{ background:var(--white); border:1px solid var(--border); color:var(--text); padding:.65rem 1.2rem; border-radius:var(--r-md); font-weight:700; cursor:pointer; }
.btn-ghost:hover{ border-color:var(--primary); color:var(--primary); }
.empty-state .es-icon{ font-size:4rem; margin-bottom:.8rem; opacity:.7; }
/* --- parent_dashboard / dashboard-container --- */
.dashboard-container{ max-width:110rem; margin:0 auto; padding:0 2.4rem; }
.dashboard-container .header-card{ text-align:center; }
.child-selector{ display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; margin-top:.8rem; }
.child-btn{ padding:.6rem 1.4rem; border-radius:var(--r-full); border:1.5px solid rgba(255,255,255,.4); background:rgba(255,255,255,.14); color:var(--white); font-weight:700; text-decoration:none !important; transition:all var(--t-base); backdrop-filter:blur(6px); }
.child-btn:hover{ background:var(--white); color:var(--primary); }
.child-btn.active{ background:var(--white); color:var(--primary); box-shadow:0 4px 14px rgba(0,0,0,.15); border-color:var(--white); }
.alert-box{ display:flex; gap:1rem; padding:1.2rem 1.4rem; border-radius:var(--r-md); margin-bottom:1.2rem; border:1px solid; align-items:center; }
.alert-box.danger{ background:#fef2f2; border-color:#fecaca; color:#991b1b; }
.alert-box:not(.danger){ background:#eff6ff; border-color:#bfdbfe; color:#1e40af; }
.dashboard-container .stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; margin-bottom:1.8rem; }
.dashboard-container .stat-card{ background:var(--white); border:1px solid var(--border-light); border-radius:var(--r-xl); padding:1.6rem; text-align:center; box-shadow:var(--shadow-card); position:relative; overflow:hidden; }
.dashboard-container .stat-card::before{ content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--primary); }
.dashboard-container .stat-card.danger{ border-top-color:#dc2626; } .dashboard-container .stat-card.danger::before{ background:#dc2626; }
.dashboard-container .stat-card.excellent{ border-color:#a7f3d0; } .dashboard-container .stat-card.excellent::before{ background:#22c55e; }
.dashboard-container .stat-icon{ font-size:2rem; margin-bottom:.4rem; }
.dashboard-container .stat-number{ font-family:var(--font-heading); font-size:2rem; font-weight:800; color:var(--text); }
.dashboard-container .stat-label{ font-size:1.15rem; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.05em; margin-top:.15rem; }
.dashboard-container .stat-progress{ margin-top:.8rem; }
.dashboard-container .progress-bar{ height:.6rem; background:var(--gray-100); border-radius:var(--r-full); overflow:hidden; border:none; }
.dashboard-container .progress-fill{ height:100%; transition:width .4s; }
.dashboard-container .progress-fill.excellent{ background:#22c55e; } .dashboard-container .progress-fill.danger{ background:#dc2626; } .dashboard-container .progress-fill:not(.excellent):not(.danger){ background:var(--primary); }
.dashboard-container .content-grid{ display:grid; grid-template-columns:1.2fr .8fr; gap:1.6rem; }
.dashboard-container .content-grid .card{ background:var(--white); border:1px solid var(--border-light); border-radius:var(--r-lg); padding:1.6rem; box-shadow:var(--shadow-card); }
.dashboard-container .content-grid .card h3{ font-size:1.45rem; font-weight:800; margin-bottom:1rem; padding-bottom:.8rem; border-bottom:1px solid var(--border-light); }
.exam-item{ display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.9rem 0; border-bottom:1px solid var(--border-light); }
.exam-item:last-child{ border:none; }
.exam-info .exam-title{ font-weight:700; font-size:1.35rem; color:var(--text); }
.exam-info .exam-meta{ font-size:1.15rem; color:var(--text-muted); }
.exam-score{ padding:.45rem .85rem; border-radius:var(--r-full); font-weight:800; color:var(--white); font-size:1.25rem; }
.exam-score.excellent{ background:#15803d; } .exam-score.good{ background:#2563eb; } .exam-score.fair{ background:#d97706; } .exam-score.poor{ background:#dc2626; }
.assignment-item{ padding:.9rem 0; border-bottom:1px solid var(--border-light); }
.assignment-item:last-child{ border:none; }
.assignment-item .assignment-title{ font-weight:700; font-size:1.3rem; }
.assignment-item .assignment-due{ font-size:1.2rem; color:var(--text-muted); margin-top:.15rem; }
/* =====================================================
Parent Dashboard — restyled Key Statistics
Modern gradient cards, responsive 4→2→1 columns
===================================================== */
.pd-stats-grid{
display:grid;
grid-template-columns:repeat(4, minmax(0, 1fr));
gap:1.6rem;
margin-bottom:2rem;
}
.pd-stat{
position:relative;
background:var(--white);
border:1px solid var(--border-light);
border-radius:1.6rem;
padding:1.8rem 1.6rem;
box-shadow:0 4px 16px rgba(15,23,42,.06);
overflow:hidden;
transition:transform .25s ease, box-shadow .25s ease;
}
.pd-stat:hover{ transform:translateY(-4px); box-shadow:0 14px 32px rgba(15,23,42,.10); }
.pd-stat::after{
content:'';
position:absolute;
inset:auto -3rem -3rem auto;
width:9rem;
height:9rem;
border-radius:50%;
opacity:.10;
pointer-events:none;
}
.pd-stat-icon{
width:4.6rem;
height:4.6rem;
border-radius:1.2rem;
display:inline-flex;
align-items:center;
justify-content:center;
font-size:2.2rem;
margin-bottom:1.1rem;
flex-shrink:0;
}
.pd-stat-label{
font-size:1.15rem;
font-weight:700;
color:var(--text-muted);
text-transform:uppercase;
letter-spacing:.06em;
margin-bottom:.4rem;
}
.pd-stat-value{
font-family:var(--font-heading);
font-size:2.6rem;
font-weight:800;
line-height:1.1;
color:var(--text);
word-break:break-word;
}
.pd-stat-meta{
margin-top:.9rem;
font-size:1.2rem;
color:var(--text-muted);
font-weight:600;
}
.pd-progress{
margin-top:1.1rem;
height:.55rem;
background:var(--gray-100);
border-radius:var(--r-full);
overflow:hidden;
}
.pd-progress > span{
display:block;
height:100%;
border-radius:var(--r-full);
transition:width .5s ease;
}
/* Card themes */
.pd-stat.theme-attendance::after{ background:#22c55e; }
.pd-stat.theme-attendance .pd-stat-icon{ background:rgba(34,197,94,.12); color:#15803d; }
.pd-stat.theme-attendance .pd-progress > span{ background:linear-gradient(90deg,#22c55e,#16a34a); }
.pd-stat.theme-attendance.danger::after{ background:#dc2626; }
.pd-stat.theme-attendance.danger .pd-stat-icon{ background:rgba(220,38,38,.12); color:#b91c1c; }
.pd-stat.theme-attendance.danger .pd-progress > span{ background:linear-gradient(90deg,#ef4444,#dc2626); }
.pd-stat.theme-assignments::after{ background:#3b82f6; }
.pd-stat.theme-assignments .pd-stat-icon{ background:rgba(59,130,246,.12); color:#1d4ed8; }
.pd-stat.theme-assignments .pd-progress > span{ background:linear-gradient(90deg,#3b82f6,#2563eb); }
.pd-stat.theme-exams::after{ background:#f59e0b; }
.pd-stat.theme-exams .pd-stat-icon{ background:rgba(245,158,11,.14); color:#b45309; }
.pd-stat.theme-games::after{ background:#8b5cf6; }
.pd-stat.theme-games .pd-stat-icon{ background:rgba(139,92,246,.14); color:#6d28d9; }
@media (max-width: 1100px){
.pd-stats-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:1.4rem; }
}
@media (max-width: 560px){
.pd-stats-grid{ grid-template-columns:1fr; gap:1.2rem; }
.pd-stat{ padding:1.5rem 1.4rem; }
.pd-stat-icon{ width:4.2rem; height:4.2rem; font-size:2rem; }
.pd-stat-value{ font-size:2.2rem; }
.pd-stat-label{ font-size:1.05rem; }
.pd-stat-meta{ font-size:1.1rem; }
}
@media (max-width: 991px){
.dashboard-container .content-grid{ grid-template-columns:1fr; }
}
@media (max-width: 560px){
.dashboard-container{ padding:0 1.2rem; }
.header-card{ padding:1.6rem 1.4rem; }
.header-card .header-title{ font-size:1.7rem; }
}
/* --- student_wallet_card --- */
.wc-wrap{ background:var(--bg); padding:2rem 0 5rem; }
.wc-card{ background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 68%, var(--primary-deeper) 100%); border-radius:var(--r-xl); overflow:hidden; color:var(--white); box-shadow:var(--shadow-xl); border:1px solid rgba(255,255,255,.08); position:relative; }
.wc-card::before{ content:''; position:absolute; top:-5rem; right:-3rem; width:16rem; height:16rem; border-radius:50%; background:rgba(255,255,255,.07); }
.wc-suspended-banner{ background:#dc2626; color:var(--white); text-align:center; padding:.7rem; font-weight:800; font-size:1.25rem; }
.wc-card-top{ display:flex; justify-content:space-between; align-items:center; padding:1.4rem 1.8rem; border-bottom:1px solid rgba(255,255,255,.12); position:relative; }
.wc-school{ display:flex; align-items:center; gap:.8rem; }
.wc-school img{ width:3.2rem; height:3.2rem; background:var(--white); border-radius:var(--r-sm); padding:.3rem; object-fit:contain; }
.wc-school-name{ font-weight:800; font-size:1.25rem; letter-spacing:.02em; }
.wc-card-label{ padding:.4rem .9rem; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.18); border-radius:var(--r-full); font-size:1.05rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; backdrop-filter:blur(6px); }
.wc-card-body{ padding:1.6rem 1.8rem; display:flex; flex-direction:column; gap:1.2rem; position:relative; }
.wc-card-info-row{ display:flex; align-items:center; gap:1.2rem; }
.wc-avatar{ width:5.2rem; height:5.2rem; border-radius:50%; background:rgba(255,255,255,.18); border:2px solid rgba(255,255,255,.22); display:inline-flex; align-items:center; justify-content:center; font-weight:800; font-size:1.6rem; overflow:hidden; flex-shrink:0; backdrop-filter:blur(4px); }
.wc-avatar img{ width:100%; height:100%; object-fit:cover; }
.wc-name{ font-weight:800; font-size:1.55rem; line-height:1.1; }
.wc-class{ font-size:1.2rem; color:rgba(255,255,255,.82); }
.wc-matric{ font-size:1.1rem; color:rgba(255,255,255,.66); font-family:monospace; letter-spacing:.04em; }
.wc-balance-section{ display:flex; justify-content:space-between; align-items:center; gap:1rem; background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.14); border-radius:var(--r-lg); padding:1.2rem 1.4rem; backdrop-filter:blur(8px); }
.wc-bal-lbl{ font-size:1.05rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.72); }
.wc-bal-amt{ font-family:var(--font-heading); font-size:2.4rem; font-weight:800; line-height:1; margin-top:.15rem; }
.wc-bal-ok{ color:var(--white); } .wc-bal-low{ color:#fde68a; } .wc-bal-zero{ color:#fca5a5; }
.wc-qr-wrap{ width:7.6rem; height:7.6rem; background:var(--white); border-radius:var(--r-md); padding:.5rem; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 14px rgba(0,0,0,.18); flex-shrink:0; }
.wc-qr-wrap img{ width:100%; height:100%; object-fit:contain; }
.wc-card-bottom{ display:flex; justify-content:space-between; padding:1rem 1.8rem; border-top:1px solid rgba(255,255,255,.12); background:rgba(0,0,0,.14); }
.wc-card-chip{ font-size:1.05rem; color:rgba(255,255,255,.82); }
.wc-card-chip span{ display:block; font-weight:800; color:var(--white); font-size:1.15rem; }
.wc-actions{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:1.2rem; }
.wc-action-btn{ display:flex; align-items:center; justify-content:center; gap:.6rem; padding:1rem; border-radius:var(--r-md); font-weight:800; text-decoration:none !important; border:1px solid var(--border-light); transition:all var(--t-base); background:var(--white); color:var(--text) !important; box-shadow:var(--shadow-sm); }
.wc-action-btn.print{ background:var(--primary); color:var(--white) !important; border-color:var(--primary); box-shadow:0 4px 14px var(--primary-glow); }
.wc-action-btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow-hover); }
.wc-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:1.2rem; }
.wc-stat{ background:var(--white); border:1px solid var(--border-light); border-radius:var(--r-lg); padding:1.2rem .8rem; text-align:center; box-shadow:var(--shadow-card); }
.wc-stat-val{ font-family:var(--font-heading); font-size:1.6rem; font-weight:800; }
.wc-stat-lbl{ font-size:1.05rem; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.06em; margin-top:.2rem; }
.wc-txn-section{ background:var(--white); border:1px solid var(--border-light); border-radius:var(--r-lg); padding:1.6rem; margin-top:1.4rem; box-shadow:var(--shadow-card); }
.wc-txn-section h3{ font-size:1.45rem; font-weight:800; margin-bottom:1rem; padding-bottom:.8rem; border-bottom:1px solid var(--border-light); }
.wc-txn-item{ display:flex; justify-content:space-between; gap:1rem; padding:1rem 0; border-bottom:1px solid var(--border-light); }
.wc-txn-item:last-child{ border:none; }
.wc-txn-desc{ font-weight:600; font-size:1.3rem; color:var(--text); }
.wc-txn-meta{ font-size:1.15rem; color:var(--text-muted); margin-top:.15rem; }
.wc-txn-amt{ font-weight:800; font-size:1.35rem; }
.wc-txn-amt.debit{ color:#dc2626; } .wc-txn-amt.credit{ color:#15803d; }
.wc-txn-bal{ font-size:1.15rem; color:var(--text-muted); text-align:right; }
.wc-empty{ text-align:center; padding:3rem 1.6rem; color:var(--text-muted); }
/* =====================================================
Fix 14: FOOTER DISPLAY — guarantee on all fixed pages
Footers appeared broken on portal pages because some
wrappers were missing closings (student_library diff 2,
student_study_flashcards diff 1) leaving footer nested
inside a max-width container → constrained/bleed lost.
HTML is now fixed, and this CSS guarantees footer is
always full-bleed, visible and above any wrapper
overflow, even if future pages are nested.
===================================================== */
#educo_wrapper{ overflow:visible; }
.ed_footer_wrapper{ width:100%; clear:both; position:relative; z-index:2; margin-top:0; }
@media(min-width:768px){
.ed_footer_wrapper{ width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); }
}
.ed_footer_top,.ed_footer_newsletter,.ed_footer_bottom{ position:relative; z-index:1; }
/* =====================================================
Fix 15: FLASHCARDS — hub + affiliated study page
student_study_flashcards.php (hub) used .ssf-page etc.
with minimal CSS; student_flashcard_study.php (affiliated
study/flip page, linked via subject-card) used 20+
bespoke stu-flash-* classes with zero rules in
stylenew.css → plain HTML. This supplies the full
system, flip animation and completion states, all via
theme tokens so both pages conform beautifully.
===================================================== */
.stu-flash-study-wrap{ background:var(--bg); padding:2rem 0 5rem; min-height:55vh; }
.stu-flash-spacer{ height:.8rem; }
.stu-flash-header{ max-width:72rem; margin:0 auto 1.6rem; padding:0 2.4rem; display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; }
.stu-flash-header-title{ font-family:var(--font-heading); font-size:1.85rem; font-weight:800; color:var(--text); }
.stu-flash-progress{ display:inline-flex; align-items:center; gap:.6rem; padding:.6rem 1.2rem; background:var(--primary-mist); border:1px solid rgba(var(--primary-rgb),.14); border-radius:var(--r-full); font-weight:800; color:var(--primary-dark); }
.stu-flash-progress #current-card{ color:var(--primary); }
#flashcard-area{ max-width:72rem; margin:0 auto; padding:0 2.4rem; }
.stu-flash-card-wrapper{ perspective:1200px; margin-bottom:1.4rem; }
.stu-flash-card{ position:relative; width:100%; min-height:28rem; transform-style:preserve-3d; transition:transform .6s cubic-bezier(.4,0,.2,1); cursor:pointer; }
.stu-flash-card.flipped{ transform:rotateY(180deg); }
.stu-flash-card-face{ position:absolute; inset:0; backface-visibility:hidden; background:var(--white); border:1px solid var(--border-light); border-radius:var(--r-xl); box-shadow:var(--shadow-lg); padding:2.4rem 2rem; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.stu-flash-card-back{ transform:rotateY(180deg); background:linear-gradient(135deg, var(--primary-mist) 0%, var(--white) 100%); border-color:rgba(var(--primary-rgb),.14); }
.stu-flash-label{ display:inline-flex; padding:.32rem .8rem; background:var(--gray-900); color:var(--white); border-radius:var(--r-full); font-size:1.05rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; margin-bottom:1rem; }
.stu-flash-card-back .stu-flash-label{ background:var(--primary); }
.stu-flash-content{ font-size:1.85rem; font-weight:700; color:var(--text); line-height:1.5; max-width:56rem; }
.stu-flash-hint{ margin-top:1.2rem; padding:.8rem 1.2rem; background:var(--gray-50); border:1px dashed var(--border); border-radius:var(--r-md); font-size:1.25rem; color:var(--text-muted); }
.stu-flash-flip-hint{ margin-top:1.2rem; font-size:1.2rem; color:var(--text-muted); font-weight:600; opacity:.8; }
.stu-flash-actions{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; max-width:48rem; margin:0 auto; }
.stu-flash-btn{ padding:1.1rem 1.6rem; border-radius:var(--r-md); font-weight:800; font-size:1.35rem; border:2px solid transparent; cursor:pointer; transition:all var(--t-base); text-align:center; text-decoration:none !important; display:inline-flex; align-items:center; justify-content:center; gap:.5rem; }
.stu-flash-btn-flip{ background:var(--white); color:var(--primary) !important; border-color:var(--primary); box-shadow:var(--shadow-sm); width:100%; max-width:48rem; margin:0 auto 1.2rem; display:flex; }
.stu-flash-btn-flip:hover{ background:var(--primary); color:var(--white) !important; transform:translateY(-1px); }
.stu-flash-btn-correct{ background:#15803d; color:var(--white) !important; border-color:#15803d; box-shadow:0 4px 14px rgba(21,128,61,.22); }
.stu-flash-btn-correct:hover{ background:#0f6a32; transform:translateY(-1px); }
.stu-flash-btn-wrong{ background:var(--white); color:#dc2626 !important; border-color:#fecaca; }
.stu-flash-btn-wrong:hover{ background:#fef2f2; border-color:#fca5a5; }
.stu-flash-completion{ background:var(--white); border:1px solid var(--border-light); border-radius:var(--r-xl); box-shadow:var(--shadow-xl); padding:3rem 2.4rem; text-align:center; max-width:56rem; margin:2rem auto; }
.stu-flash-completion-icon{ font-size:5rem; margin-bottom:.8rem; }
.stu-flash-completion-title{ font-family:var(--font-heading); font-size:2.2rem; font-weight:800; color:var(--text); margin-bottom:.4rem; }
.stu-flash-completion-text{ color:var(--text-muted); font-size:1.4rem; margin-bottom:1.6rem; }
.stu-flash-completion-stats{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; margin-bottom:1.8rem; }
.stu-flash-completion-stat{ background:var(--gray-25); border:1px solid var(--border-light); border-radius:var(--r-lg); padding:1.4rem 1rem; }
.stu-flash-completion-stat-num{ font-family:var(--font-heading); font-size:2.4rem; font-weight:800; color:var(--primary); line-height:1; }
.stu-flash-completion-stat-lbl{ font-size:1.15rem; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.06em; margin-top:.2rem; }
.stu-flash-completion-actions{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }
.ssf-page .flashcard-container .card{ border-top:3px solid var(--primary); }
/* =====================================================
Fix 17: PARENT PAYMENT AFFILIATES — parent_make_payment
& parent_payment_receipt (+ student affiliates polish)
parent_view_fees/parent_dashboard already fixed (Fix 13)
but their linked pages parent_make_payment.php (pay-wrap/
stu-bar/step-bar/method-grid/mc/pay-panel) and
parent_payment_receipt.php (receipt-wrapper/card) used
bespoke names with zero rules → plain HTML. Diagnosis:
page code is correct (includes header), fault is
stylenew.css naming drift (CSS has .pay-card/.step vs
page uses .pay-card/.step-bar etc.). Aliases + full
system added here so affiliates conform.
===================================================== */
/* --- parent_make_payment --- */
.pay-wrap{ background:var(--bg); padding:2rem 0 5rem; min-height:60vh; }
.pay-wrap .container{ padding-top:1rem; }
.stu-bar{ display:flex; align-items:center; gap:1.4rem; background:var(--white); border:1px solid var(--border-light); border-radius:var(--r-lg); padding:1.6rem 1.8rem; margin-bottom:1.6rem; box-shadow:var(--shadow-card); max-width:96rem; margin-left:auto; margin-right:auto; }
.stu-bar .av{ width:4.8rem; height:4.8rem; border-radius:50%; background:var(--primary); color:var(--white); display:inline-flex; align-items:center; justify-content:center; font-size:2rem; flex-shrink:0; }
.stu-bar h4{ margin:0 0 .15rem; font-size:1.55rem; font-weight:800; color:var(--text); }
.stu-bar p{ margin:0; font-size:1.25rem; color:var(--text-muted); }
.step-bar{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; max-width:96rem; margin:0 auto 1.8rem; }
.step-bar .step{ text-align:center; padding:1rem; border-radius:var(--r-md); font-weight:700; font-size:1.25rem; background:var(--white); border:1.5px solid var(--border-light); color:var(--text-muted); }
.step-bar .step.active{ background:var(--primary); color:var(--white); border-color:var(--primary); box-shadow:0 4px 12px var(--primary-glow); }
.step-bar .step.done{ background:var(--primary-mist); color:var(--primary); border-color:rgba(var(--primary-rgb),.18); }
.bal-box{ background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); color:var(--white); border-radius:var(--r-lg); padding:1.8rem 2rem; text-align:center; margin-bottom:1.6rem; box-shadow:var(--shadow-lg); position:relative; overflow:hidden; }
.bal-box::before{ content:''; position:absolute; top:-4rem; right:-2rem; width:12rem; height:12rem; border-radius:50%; background:rgba(255,255,255,.08); }
.bb-lbl{ font-size:1.1rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; opacity:.85; position:relative; }
.bb-val{ font-family:var(--font-heading); font-size:2.6rem; font-weight:800; margin-top:.2rem; position:relative; }
.method-section-label{ font-weight:800; font-size:1.35rem; margin:1.2rem 0 .8rem; color:var(--text); }
.method-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(16rem, 1fr)); gap:1rem; margin-bottom:1.4rem; }
.mc{ position:relative; display:flex; flex-direction:column; align-items:center; gap:.4rem; padding:1.6rem 1.2rem; background:var(--white); border:2px solid var(--border); border-radius:var(--r-lg); cursor:pointer; transition:all var(--t-base); text-align:center; box-shadow:var(--shadow-sm); }
.mc:hover{ border-color:var(--primary); transform:translateY(-2px); box-shadow:var(--shadow-md); }
.mc.selected{ border-color:var(--primary); background:var(--primary-mist); box-shadow:0 6px 18px var(--primary-glow); }
.mc input{ position:absolute; opacity:0; pointer-events:none; }
.mc-tick{ position:absolute; top:.6rem; right:.6rem; width:2rem; height:2rem; border-radius:50%; background:var(--primary); color:var(--white); display:inline-flex; align-items:center; justify-content:center; font-size:1.1rem; opacity:0; transform:scale(.5); transition:all var(--t-base); }
.mc.selected .mc-tick{ opacity:1; transform:scale(1); }
.mc-icon{ font-size:2.2rem; }
.mc-label{ font-weight:800; font-size:1.25rem; color:var(--text); }
.mc-hint{ font-size:1.1rem; color:var(--text-muted); font-weight:600; }
.pay-panel{ background:var(--white); border:1px solid var(--border-light); border-radius:var(--r-lg); padding:1.6rem 1.8rem; margin-top:1rem; box-shadow:var(--shadow-card); animation:payIn .3s ease; }
@keyframes payIn{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:none; } }
.notice{ display:flex; gap:.8rem; padding:1.1rem 1.4rem; border-radius:var(--r-md); font-size:1.3rem; line-height:1.6; margin-bottom:1.2rem; border:1px solid; }
.notice-secure{ background:#ecfdf5; border-color:#a7f3d0; color:#065f46; }
.notice-pending{ background:#fffbeb; border-color:#fde68a; color:#92400e; }
.hint-text{ display:block; font-size:1.15rem; color:var(--text-muted); margin-top:.35rem; }
.fee-sel-list{ display:flex; flex-direction:column; gap:1rem; }
.fee-sel-item{ display:flex; align-items:center; gap:1.2rem; padding:1.4rem 1.6rem; background:var(--white); border:1.5px solid var(--border-light); border-radius:var(--r-lg); cursor:pointer; transition:all var(--t-base); }
.fee-sel-item:hover{ border-color:var(--primary); transform:translateY(-1px); }
.fee-sel-item.fsi-sel{ border-color:var(--primary); background:var(--primary-mist); box-shadow:0 4px 14px var(--primary-glow); }
.fsi-radio{ width:2.2rem; height:2.2rem; border:2px solid var(--border); border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:1.1rem; color:var(--white); background:var(--white); flex-shrink:0; transition:all var(--t-base); }
.fee-sel-item.fsi-sel .fsi-radio{ background:var(--primary); border-color:var(--primary); }
/* --- parent_payment_receipt --- */
.receipt-wrapper{ background:var(--bg); padding:2rem 0 5rem; }
.receipt-card{ max-width:62rem; margin:0 auto; background:var(--white); border:1px solid var(--border-light); border-radius:var(--r-xl); box-shadow:var(--shadow-xl); overflow:hidden; }
.receipt-header{ text-align:center; padding:2.4rem 2rem 1.6rem; color:var(--white); position:relative; }
.receipt-header.approved{ background:linear-gradient(135deg, #15803d 0%, #065f46 100%); }
.receipt-header.pending{ background:linear-gradient(135deg, #d97706 0%, #92400e 100%); }
.receipt-header.rejected{ background:linear-gradient(135deg, #dc2626 0%, #991b1b 100%); }
.receipt-icon{ font-size:3.6rem; margin-bottom:.6rem; }
.receipt-status-title{ font-family:var(--font-heading); font-size:1.75rem; font-weight:800; }
.receipt-ref{ font-size:1.15rem; opacity:.9; margin-top:.2rem; font-family:monospace; }
.pending-info-box,.rejected-info-box{ padding:1rem 1.4rem; font-size:1.3rem; line-height:1.6; border-left:4px solid; margin:0; }
.pending-info-box{ background:#fffbeb; border-color:#f59e0b; color:#92400e; }
.rejected-info-box{ background:#fef2f2; border-color:#dc2626; color:#991b1b; }
.receipt-body{ padding:1.6rem 2rem; }
.receipt-row{ display:flex; justify-content:space-between; gap:1rem; padding:.85rem 0; border-bottom:1px solid var(--border-light); font-size:1.35rem; }
.receipt-row:last-of-type{ border:none; }
.receipt-label{ color:var(--text-muted); font-weight:600; }
.receipt-value{ color:var(--text); font-weight:700; text-align:right; word-break:break-word; }
.receipt-total{ display:flex; justify-content:space-between; align-items:center; margin-top:1rem; padding:1.1rem 1.2rem; background:var(--gray-900); color:var(--white); border-radius:var(--r-md); }
.receipt-total-label{ font-weight:700; letter-spacing:.04em; text-transform:uppercase; font-size:1.15rem; opacity:.9; }
.receipt-total-value{ font-family:var(--font-heading); font-size:2rem; font-weight:800; }
.receipt-footer{ display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; padding:1.4rem 2rem; border-top:1px solid var(--border-light); background:var(--gray-25); }
/* =====================================================
Fix 18: PRINT/BROADSHEET/CHECK AFFILIATES
print-broadsheet(→2/3), print-result1c(→2c),
edit-student-result(→2), check-upload1(→2),
print-class(→2) — all mains already beautiful via
mgmt-page/adm-btn (Fix 5) or ed_teacher_div.
Affiliates use bespoke results-container/total-summary/
section-group/bs-table which had zero rules → plain
stats/tables. Supplied here with theme tokens.
===================================================== */
.results-container{ background:var(--white); border-radius:var(--r-lg); }
.total-summary{ text-align:center; padding:2rem 1.6rem; background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); color:var(--white); border-radius:var(--r-lg); margin-bottom:1.8rem; box-shadow:var(--shadow-md); }
.total-summary h3{ color:var(--white); margin-bottom:.4rem; }
.total-summary .total-count{ color:var(--gold); font-weight:800; }
.total-summary .session-term{ color:var(--white); font-weight:700; background:rgba(255,255,255,.14); padding:.25rem .7rem; border-radius:var(--r-full); border:1px solid rgba(255,255,255,.18); }
.section-group{ background:var(--white); border:1px solid var(--border-light); border-radius:var(--r-lg); padding:1.4rem 1.6rem; margin-bottom:1.4rem; box-shadow:var(--shadow-card); }
.section-group .section-title{ font-family:var(--font-heading); font-size:1.45rem; font-weight:800; color:var(--primary); margin-bottom:1rem; padding-bottom:.7rem; border-bottom:2px solid var(--primary-mist); display:flex; align-items:center; gap:.6rem; }
.result-item{ display:flex; justify-content:space-between; align-items:center; padding:.75rem 1rem; border:1px solid var(--border-light); border-radius:var(--r-md); margin-bottom:.6rem; background:var(--gray-25); transition:all var(--t-fast); }
.result-item:hover{ background:var(--white); border-color:var(--primary); transform:translateY(-1px); }
.result-item .class-name{ font-weight:700; color:var(--text); }
.section-total{ text-align:right; font-weight:800; color:var(--primary-dark); margin-top:.6rem; padding-top:.6rem; border-top:1px dashed var(--border); }
.bs-wrap{ max-width:100%; }
.bs-table-wrap{ border-radius:var(--r-lg); overflow:hidden; }
/* =====================================================
Fix 19: STUDENT-VIEW / MULTIPIX / EDIT-INFO /
PROMOTE-REPEAT / BLOCK-STUDENT / REMOVE-STUDENT
+ affiliates (student-view2, upload-multipix2,
reg-contA, block-student2, remove-student2)
Mains use mgmt-page/admin-section (Fix 5) → already
beautiful. Affiliates used bespoke stu-view-*/pr-*/
modern-table with zero/inline #084b33 → not theme-
conformant. Diagnosis: page code correct (includes
header), fault 80% missing CSS / 20% hard-coded
colours. Full theme-conformant system added here.
===================================================== */
/* --- student-view2 --- */
.stu-view-wrap{ background:var(--bg); padding:0 0 5rem; }
.stu-view-profile-card{ background:var(--white); border:1px solid var(--border-light); border-radius:var(--r-xl); box-shadow:var(--shadow-lg); overflow:hidden; margin-bottom:1.8rem; }
.stu-view-profile-top{ display:flex; gap:2rem; align-items:center; padding:2.2rem 2.4rem; background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); color:var(--white); flex-wrap:wrap; position:relative; overflow:hidden; }
.stu-view-profile-top::before{ content:''; position:absolute; top:-4rem; right:-2rem; width:14rem; height:14rem; border-radius:50%; background:rgba(255,255,255,.07); }
.stu-view-avatar{ width:9rem; height:9rem; border-radius:50%; border:4px solid rgba(255,255,255,.9); box-shadow:0 8px 24px rgba(0,0,0,.18); object-fit:cover; flex-shrink:0; background:var(--white); position:relative; z-index:1; }
.stu-view-name-wrap h2{ margin:0 0 .3rem; color:var(--white); font-size:2rem; font-weight:800; position:relative; }
.stu-view-sub{ font-size:1.25rem; opacity:.9; position:relative; }
.stu-view-sub strong{ color:var(--gold); }
.stu-view-tags{ display:flex; gap:.6rem; flex-wrap:wrap; margin-top:.8rem; position:relative; }
.stu-view-tag{ display:inline-flex; align-items:center; gap:.5rem; padding:.45rem 1rem; border-radius:var(--r-full); font-size:1.15rem; font-weight:800; border:1px solid rgba(255,255,255,.22); backdrop-filter:blur(6px); }
.stu-view-tag-primary{ background:rgba(255,255,255,.14); color:var(--white); }
.stu-view-tag-success{ background:#22c55e; color:var(--white); border-color:#22c55e; }
.stu-view-tag-warning{ background:var(--accent); color:var(--white); border-color:var(--accent); }
.stu-view-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; margin-bottom:1.8rem; }
.stu-view-stat-card{ background:var(--white); border:1px solid var(--border-light); border-radius:var(--r-lg); padding:1.4rem 1rem; text-align:center; box-shadow:var(--shadow-card); border-top:3px solid var(--primary); transition:all var(--t-base); }
.stu-view-stat-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-hover); }
.stu-view-stat-icon{ width:4.2rem; height:4.2rem; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:1.6rem; margin-bottom:.6rem; background:var(--primary-mist); color:var(--primary); }
.stu-view-stat-icon-2{ background:#dbeafe; color:#1e40af; } .stu-view-stat-icon-3{ background:#fee2e2; color:#991b1b; } .stu-view-stat-icon-4{ background:#fef3c7; color:#92400e; }
.stu-view-stat-label{ font-size:1.1rem; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.06em; }
.stu-view-stat-value{ font-family:var(--font-heading); font-size:1.65rem; font-weight:800; color:var(--text); margin-top:.15rem; }
.stu-view-content{ display:block; }
.stu-view-info-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.6rem; }
.stu-view-info-card{ background:var(--white); border:1px solid var(--border-light); border-radius:var(--r-lg); box-shadow:var(--shadow-card); overflow:hidden; }
.stu-view-info-head{ display:flex; align-items:center; gap:.8rem; padding:1.2rem 1.6rem; background:var(--gray-50); border-bottom:1px solid var(--border-light); font-weight:800; color:var(--primary); font-size:1.35rem; }
.stu-view-info-body{ padding:1.2rem 1.6rem; display:flex; flex-direction:column; }
.stu-view-info-row{ display:flex; justify-content:space-between; gap:1rem; padding:.75rem 0; border-bottom:1px solid var(--border-light); font-size:1.3rem; }
.stu-view-info-row:last-child{ border:none; }
.stu-view-info-label{ color:var(--text-muted); font-weight:600; }
.stu-view-info-value{ color:var(--text); font-weight:700; text-align:right; word-break:break-word; }
/* --- upload-multipix2 modern-table theme conformity --- */
.modern-table-wrapper{ border-radius:var(--r-lg) !important; box-shadow:var(--shadow-card) !important; border:1px solid var(--border-light) !important; overflow:hidden; }
.modern-table thead{ background:var(--primary) !important; }
.modern-table thead th{ background:var(--primary) !important; color:var(--white) !important; }
.page-header{ background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%) !important; border:1px solid rgba(255,255,255,.08) !important; }
.page-header h3{ color:var(--white) !important; }
.serial-badge{ background:var(--primary) !important; }
.portal-badge{ background:var(--primary-mist) !important; color:var(--primary) !important; border:1px solid rgba(var(--primary-rgb),.15) !important; }
.upload-label{ background:var(--primary) !important; }
.modern-select{ border-color:var(--border) !important; }
.modern-select:focus{ border-color:var(--primary) !important; box-shadow:0 0 0 3px var(--primary-glow) !important; }
/* --- promote-repeat pr-* (section 72) --- */
.pr-toast{ position:fixed; top:1.6rem; right:1.6rem; z-index:99999; display:flex; align-items:center; gap:.8rem; padding:1.1rem 1.6rem; border-radius:var(--r-md); background:var(--gray-900); color:var(--white); box-shadow:var(--shadow-xl); transform:translateX(120%); transition:transform var(--t-base); font-weight:600; max-width:36rem; }
.pr-toast.show{ transform:translateX(0); }
.pr-toast.success{ background:#065f46; } .pr-toast.error{ background:#991b1b; }
.pr-toast-close{ background:none; border:none; color:var(--white); font-size:1.6rem; cursor:pointer; opacity:.7; }
.pr-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.55); backdrop-filter:blur(4px); z-index:9998; display:flex; align-items:center; justify-content:center; padding:2rem; }
.pr-modal{ background:var(--white); border-radius:var(--r-xl); box-shadow:var(--shadow-2xl); max-width:84rem; width:100%; max-height:90vh; display:flex; flex-direction:column; overflow:hidden; }
.pr-modal-sm{ max-width:44rem; }
.pr-modal-header{ display:flex; justify-content:space-between; align-items:center; padding:1.6rem 2rem; border-bottom:1px solid var(--border-light); font-weight:800; }
.pr-modal-header.promote{ background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); color:var(--white); }
.pr-modal-header.repeat{ background:linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%); color:var(--white); }
.pr-modal-header.custom{ background:linear-gradient(135deg, var(--gray-900) 0%, #334155 100%); color:var(--white); }
.pr-modal-title{ display:flex; align-items:center; gap:.6rem; font-size:1.45rem; }
.pr-modal-badge{ padding:.3rem .8rem; border-radius:var(--r-full); font-size:1.05rem; font-weight:800; color:var(--white); }
.pr-modal-badge.promote{ background:var(--primary-light); } .pr-modal-badge.repeat{ background:#f59e0b; } .pr-modal-badge.custom{ background:var(--accent); }
.pr-modal-close{ background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.18); color:var(--white); width:3.2rem; height:3.2rem; border-radius:50%; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
.pr-modal-body{ padding:1.6rem 2rem; overflow:auto; flex:1; }
.pr-modal-footer{ display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1.2rem 2rem; border-top:1px solid var(--border-light); background:var(--gray-25); flex-wrap:wrap; }
.pr-grid-actions{ display:flex; gap:.6rem; }
.pr-grid-btn{ padding:.6rem 1.2rem; border-radius:var(--r-md); font-weight:700; font-size:1.25rem; border:1px solid transparent; cursor:pointer; transition:all var(--t-base); display:inline-flex; align-items:center; gap:.4rem; }
.pr-grid-btn.promote{ background:var(--primary); color:var(--white); }
.pr-grid-btn.repeat{ background:var(--accent); color:var(--white); }
.pr-grid-btn.custom{ background:var(--gray-900); color:var(--white); }
.pr-grid-btn:hover{ transform:translateY(-1px); box-shadow:var(--shadow-sm); }
.pr-class-info{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; padding:1rem; background:var(--gray-50); border-radius:var(--r-md); margin-bottom:1.2rem; border:1px solid var(--border-light); }
.pr-class-pill{ padding:.45rem 1rem; border-radius:var(--r-full); font-weight:800; font-size:1.2rem; border:1px solid; }
.pr-class-pill.from{ background:#fee2e2; color:#991b1b; border-color:#fecaca; }
.pr-class-pill.to{ background:#dcfce7; color:#065f46; border-color:#a7f3d0; }
.pr-arrow{ font-size:1.6rem; color:var(--text-muted); }
.pr-select-wrap{ margin-bottom:1.2rem; }
.pr-select-wrap label{ font-weight:700; font-size:1.2rem; color:var(--text); display:block; margin-bottom:.4rem; }
.pr-select{ width:100%; padding:.9rem 1.2rem; border:1.5px solid var(--border); border-radius:var(--r-md); font-size:1.35rem; background:var(--white); }
.pr-select:focus{ border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-glow); outline:none; }
.pr-table-wrap{ border:1px solid var(--border-light); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-card); }
.pr-table{ width:100%; border-collapse:collapse; font-size:1.3rem; background:var(--white); }
.pr-table th{ background:var(--gray-50); padding:1rem .8rem; font-size:1.1rem; text-transform:uppercase; color:var(--text-muted); border-bottom:2px solid var(--border); text-align:left; }
.pr-table td{ padding:.9rem .8rem; border-bottom:1px solid var(--border-light); }
.pr-table tr:last-child td{ border:none; }
.pr-table tr:hover td{ background:var(--primary-mist); }
.pr-check-th{ width:3.6rem; text-align:center; } .pr-check-td{ text-align:center; }
.pr-checkbox{ width:1.6rem; height:1.6rem; accent-color:var(--primary); }
.pr-pic{ width:4.2rem; }
.pr-pic img{ width:4.2rem; height:4.2rem; border-radius:50%; object-fit:cover; border:2px solid var(--border-light); }
.pr-num{ color:var(--text-muted); font-weight:600; text-align:center; }
.pr-portal{ font-weight:700; color:var(--primary); font-family:monospace; }
.pr-name small{ color:var(--text-muted); font-weight:400; }
.pr-gender{ text-align:center; font-weight:700; }
.pr-count-badge{ padding:.4rem .9rem; border-radius:var(--r-full); background:var(--primary); color:var(--white); font-weight:800; min-width:2.4rem; text-align:center; display:inline-flex; align-items:center; justify-content:center; }
.pr-count-badge.selected{ background:#22c55e; }
.pr-btn{ padding:.85rem 1.6rem; border-radius:var(--r-md); font-weight:800; border:1px solid transparent; cursor:pointer; transition:all var(--t-base); }
.pr-btn-cancel{ background:var(--white); border-color:var(--border); color:var(--text); }
.pr-btn-promote{ background:var(--primary); color:var(--white); }
.pr-btn-repeat{ background:var(--accent); color:var(--white); }
.pr-btn-danger{ background:#dc2626; color:var(--white); }
.pr-btn:disabled{ opacity:.5; cursor:not-allowed; }
.pr-empty{ text-align:center; padding:3rem 1.6rem; color:var(--text-muted); }
.pr-empty i{ font-size:3.6rem; opacity:.4; display:block; margin-bottom:.8rem; }
.pr-spinner{ width:2rem; height:2rem; border:2px solid var(--border-light); border-top-color:var(--primary); border-radius:50%; display:inline-block; animation:spin .7s linear infinite; }
.pr-confirm-body{ display:flex; gap:1.2rem; align-items:flex-start; text-align:left; }
.pr-confirm-icon{ width:4.8rem; height:4.8rem; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:2rem; flex-shrink:0; }
.pr-confirm-icon.promote{ background:var(--primary-mist); color:var(--primary); }
.pr-confirm-icon.repeat{ background:#fef3c7; color:#92400e; }
.pr-confirm-text{ font-size:1.35rem; line-height:1.6; color:var(--text-secondary); }
/* =====================================================
Fix 20: CBT & PRACTICE QUESTIONS — teacher_cbt_questions,
teacher_create_exam, teacher_upload_questions_csv,
admin_practice_questions (+ allow-exam already Fix 5)
All 4 use 15-39 bespoke cbt-*/pq-* classes with zero
rules → plain cards/forms/tables. Diagnosis: pages
correctly include header (CSS loads), fault is
stylenew.css Section "cbt" missing. Full system added
here with theme tokens so all conform beautifully.
===================================================== */
.cbt-container{ max-width:110rem; margin:0 auto; padding:0 2.4rem; }
.cbt-card{ background:var(--white); border:1px solid var(--border-light); border-radius:var(--r-xl); padding:2rem 2.4rem; margin-bottom:1.8rem; box-shadow:var(--shadow-card); position:relative; overflow:hidden; }
.cbt-card::before{ content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg, var(--primary), var(--accent)); }
.cbt-card h3{ font-family:var(--font-heading); font-size:1.65rem; font-weight:800; color:var(--text); margin:0 0 1.4rem; padding-bottom:.8rem; border-bottom:1px solid var(--border-light); }
.cbt-toolbar{ display:flex; justify-content:flex-end; margin-bottom:1.2rem; }
.options-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.2rem; }
.filter-section{ display:grid; grid-template-columns:repeat(auto-fit, minmax(18rem, 1fr)); gap:1.2rem; margin-bottom:1.4rem; }
.filter-group{ display:flex; flex-direction:column; gap:.4rem; }
.filter-group label{ font-weight:700; font-size:1.2rem; color:var(--text); }
.image-upload-section{ margin-top:.8rem; padding:1rem; background:var(--gray-25); border:1px dashed var(--border); border-radius:var(--r-md); }
.file-input{ display:block; width:100%; padding:.8rem; border:1px solid var(--border-light); border-radius:var(--r-sm); background:var(--white); }
.help-text{ font-size:1.15rem; color:var(--text-muted); margin-top:.3rem; }
.image-preview{ max-width:100%; border-radius:var(--r-md); margin-top:.6rem; border:1px solid var(--border-light); display:none; }
.image-preview.is-shown{ display:block; }
.spinner{ width:2rem; height:2rem; border:2px solid var(--border-light); border-top-color:var(--primary); border-radius:50%; animation:spin .7s linear infinite; display:inline-block; }
.modal-loading{ text-align:center; padding:3rem; color:var(--text-muted); }
.question-item{ background:var(--white); border:1px solid var(--border-light); border-radius:var(--r-lg); padding:1.6rem 1.8rem; margin-bottom:1.4rem; box-shadow:var(--shadow-card); transition:all var(--t-base); }
.question-item:hover{ box-shadow:var(--shadow-hover); transform:translateY(-1px); }
.question-header{ display:flex; justify-content:space-between; gap:1rem; align-items:center; flex-wrap:wrap; margin-bottom:1rem; }
.question-meta{ display:flex; gap:.6rem; flex-wrap:wrap; font-size:1.15rem; }
.question-meta span{ padding:.28rem .7rem; background:var(--gray-50); border:1px solid var(--border-light); border-radius:var(--r-full); font-weight:600; color:var(--text-secondary); }
.question-actions{ display:flex; gap:.6rem; flex-wrap:wrap; }
.radio-group{ display:flex; gap:1rem; flex-wrap:wrap; }
.radio-group label{ display:flex; align-items:center; gap:.4rem; padding:.6rem 1rem; border:1px solid var(--border-light); border-radius:var(--r-full); background:var(--white); cursor:pointer; font-weight:600; transition:all var(--t-base); }
.radio-group label:hover{ border-color:var(--primary); background:var(--primary-mist); }
.radio-group input{ accent-color:var(--primary); }
.sd-add{ color:var(--accent) !important; font-weight:700; }
.cbt-modal{ position:fixed; inset:0; background:rgba(0,0,0,.55); display:none; align-items:center; justify-content:center; z-index:9999; padding:2rem; }
.cbt-modal.is-open{ display:flex; }
.cbt-modal .modal-content{ background:var(--white); border-radius:var(--r-xl); max-width:72rem; width:100%; max-height:90vh; overflow:auto; box-shadow:var(--shadow-2xl); }
.available-questions-good{ color:#065f46; font-weight:700; font-size:1.25rem; display:block; margin-top:.4rem; background:#ecfdf5; padding:.4rem .8rem; border-radius:var(--r-md); border:1px solid #a7f3d0; }
.available-questions-warn{ color:#92400e; font-weight:700; font-size:1.25rem; display:block; margin-top:.4rem; background:#fffbeb; padding:.4rem .8rem; border-radius:var(--r-md); border:1px solid #fde68a; }
.class-dropdown{ background:var(--white); border:1px solid var(--border); border-radius:var(--r-md); box-shadow:var(--shadow-lg); max-height:22rem; overflow-y:auto; position:absolute; z-index:999; width:100%; }
.cd-item{ padding:.85rem 1.2rem; cursor:pointer; border-bottom:1px solid var(--border-light); transition:background var(--t-fast); }
.cd-item:hover{ background:var(--primary-mist); color:var(--primary); }
.ec-label{ font-size:1.05rem; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.06em; }
.empty-state-icon{ font-size:4rem; opacity:.3; text-align:center; display:block; margin-bottom:.8rem; }
.exam-actions{ display:flex; gap:.6rem; flex-wrap:wrap; margin-top:.8rem; }
.exam-code-banner{ margin:.4rem 0; padding:.6rem .9rem; background:var(--gray-900); color:var(--white); border-radius:var(--r-md); font-size:1.15rem; font-family:monospace; }
.exam-code-banner .ec-label{ color:var(--gold); }
.exam-meta-spaced{ margin-top:.4rem; }
.info-box{ background:var(--primary-mist); border:1px solid rgba(var(--primary-rgb),.14); border-left:4px solid var(--primary); border-radius:var(--r-md); padding:1.1rem 1.4rem; font-size:1.3rem; color:var(--primary-dark); margin-bottom:1.4rem; }
/* --- teacher_upload CSV extras --- */
.csv3{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin-bottom:1.2rem; }
.pq-code{ display:inline-flex; padding:.2rem .6rem; background:var(--gray-100); border:1px solid var(--border); border-radius:4px; font-family:monospace; font-size:1.15rem; }
.pq-file-input-hidden{ position:absolute; opacity:0; pointer-events:none; width:0; height:0; }
.pq-img-z{ display:flex; flex-direction:column; align-items:center; gap:.4rem; padding:2rem; border:2px dashed var(--border); border-radius:var(--r-lg); background:var(--gray-25); cursor:pointer; transition:all var(--t-base); text-align:center; }
.pq-img-z:hover{ border-color:var(--primary); background:var(--primary-mist); }
.pq-img-z.has-file{ border-color:var(--primary); background:#ecfdf5; }
.pq-img-icon{ font-size:2.4rem; color:var(--primary); }
.pq-img-text{ font-size:1.25rem; color:var(--text-muted); font-weight:600; }
.pq-inline-flex{ display:inline-flex !important; }
.pq-mb-16{ margin-bottom:1.6rem; }
/* --- admin_practice remaining pq-* --- */
.pq-ans{ display:inline-flex; padding:.25rem .65rem; background:var(--primary); color:var(--white); border-radius:var(--r-full); font-weight:800; font-size:1.15rem; min-width:2rem; justify-content:center; }
.pq-qt{ font-size:1.35rem; color:var(--text-secondary); line-height:1.6; max-width:48rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pq-ta{ width:100%; min-height:8rem; padding:1rem 1.2rem; border:1.5px solid var(--border); border-radius:var(--r-md); font-size:1.35rem; resize:vertical; }
.pq-ta:focus{ border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-glow); outline:none; }
.pq-stat-val{ font-family:var(--font-heading); font-size:2rem; font-weight:800; color:var(--text); }
.pq-pag{ display:flex; gap:.4rem; justify-content:center; margin-top:1.4rem; flex-wrap:wrap; }
.pq-pag .pq-pg{ padding:.6rem 1.1rem; border:1px solid var(--border-light); border-radius:var(--r-md); background:var(--white); font-weight:700; text-decoration:none !important; color:var(--text); transition:all var(--t-base); }
.pq-pag .pq-pg.active{ background:var(--primary); color:var(--white); border-color:var(--primary); box-shadow:0 4px 12px var(--primary-glow); }
.pq-sc-toolbar{ display:flex; flex-wrap:wrap; gap:.4rem; padding:.6rem; background:var(--gray-50); border:1px solid var(--border-light); border-radius:var(--r-md); margin-bottom:.6rem; align-items:center; }
.pq-sc-group{ font-size:1.05rem; font-weight:700; color:var(--text-muted); margin-right:.4rem; }
.pq-sc-btn{ padding:.35rem .6rem; border:1px solid var(--border-light); background:var(--white); border-radius:4px; cursor:pointer; font-size:1.2rem; transition:all var(--t-fast); }
.pq-sc-btn:hover{ background:var(--primary); color:var(--white); border-color:var(--primary); }
.pq-sc-div{ width:1px; height:1.6rem; background:var(--border); margin:0 .4rem; }
.hm-row{ transition:background var(--t-fast); }
.hm-row:hover{ background:var(--primary-mist); }
.cbt-card .filter-section{ margin-bottom:0; }
/* =====================================================
Fix 21: TEACHER ATTENDANCE / FLASHCARDS / GAME /
ASSIGNMENT / LIBRARY / ADMIN-STAFF / MESSAGES
+ affiliates (print_attendance_pdf, assignment
submissions, game questions, library view)
All 7 mains used 40+ bespoke att-*/flashcard-*/game-*
with zero rules → plain. Diagnosis: pages include
header (CSS loads), fault is stylenew.css missing
section. Full system added here with theme tokens.
===================================================== */
/* --- teacher_mark_attendance --- */
.attendance-container{ max-width:110rem; margin:0 auto; padding:0 2.4rem; }
.att-filter-card{ background:var(--white); border:1px solid var(--border-light); border-radius:var(--r-lg); padding:1.8rem 2rem; margin-bottom:1.6rem; box-shadow:var(--shadow-card); }
.att-filter-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; }
.att-filter-group{ display:flex; flex-direction:column; gap:.4rem; }
.att-filter-group label{ font-weight:700; font-size:1.2rem; color:var(--text); }
.att-filter-group select,.att-filter-group input{ padding:.9rem 1.2rem; border:1.5px solid var(--border); border-radius:var(--r-md); font-size:1.35rem; background:var(--white); }
.att-filter-group select:focus,.att-filter-group input:focus{ border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-glow); outline:none; }
.att-date-hint{ font-size:1.15rem; color:var(--text-muted); margin-top:.3rem; }
.att-empty{ text-align:center; padding:4rem 2rem; background:var(--white); border:1px dashed var(--border); border-radius:var(--r-xl); color:var(--text-muted); }
.att-empty .icon{ width:5rem; height:5rem; border-radius:50%; background:var(--gray-100); display:inline-flex; align-items:center; justify-content:center; font-size:2.2rem; margin:0 auto 1rem; color:var(--text-muted); }
.att-class-banner{ display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); color:var(--white); border-radius:var(--r-lg); padding:1.4rem 1.8rem; margin-bottom:1.4rem; box-shadow:var(--shadow-md); }
.att-class-info h4{ margin:0 0 .15rem; color:var(--white); font-size:1.5rem; } .att-class-info p{ margin:0; opacity:.85; font-size:1.25rem; }
.att-quick-actions{ display:flex; gap:.6rem; flex-wrap:wrap; }
.att-btn{ padding:.75rem 1.4rem; border-radius:var(--r-md); font-weight:700; font-size:1.25rem; border:1px solid transparent; cursor:pointer; transition:all var(--t-base); display:inline-flex; align-items:center; gap:.4rem; }
.att-btn-success{ background:#22c55e; color:var(--white); border-color:#22c55e; } .att-btn-danger{ background:#dc2626; color:var(--white); border-color:#dc2626; } .att-btn-print{ background:var(--white); color:var(--primary); border-color:var(--border-light); }
.att-btn:hover{ transform:translateY(-1px); box-shadow:var(--shadow-sm); }
.att-table-card{ background:var(--white); border:1px solid var(--border-light); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-card); margin-bottom:1.4rem; }
.att-table-header{ display:flex; justify-content:space-between; align-items:center; padding:1.2rem 1.6rem; background:var(--gray-50); border-bottom:1px solid var(--border-light); }
.att-table-header h3{ margin:0; font-size:1.45rem; font-weight:800; color:var(--text); display:flex; align-items:center; gap:.6rem; }
.att-table-responsive{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.att-table{ width:100%; border-collapse:collapse; font-size:1.35rem; background:var(--white); }
.att-table th{ background:var(--gray-900); color:var(--white); padding:1rem .8rem; font-size:1.15rem; text-transform:uppercase; letter-spacing:.04em; text-align:left; white-space:nowrap; }
.att-table td{ padding:1rem .8rem; border-bottom:1px solid var(--border-light); vertical-align:middle; }
.att-table tr:last-child td{ border:none; } .att-table tr:hover td{ background:var(--primary-mist); }
.att-row-num{ color:var(--text-muted); font-weight:700; text-align:center; }
.att-student-cell{ display:flex; align-items:center; gap:1rem; }
.att-student-pix{ width:4rem; height:4rem; border-radius:50%; object-fit:cover; border:2px solid var(--border-light); flex-shrink:0; }
.att-muted-sm{ font-size:1.15rem; color:var(--text-muted); }
.status-selector{ display:flex; gap:.4rem; flex-wrap:wrap; }
.status-btn{ display:inline-flex; align-items:center; gap:.3rem; padding:.45rem .8rem; border:1.5px solid var(--border); border-radius:var(--r-full); font-size:1.15rem; font-weight:700; cursor:pointer; background:var(--white); transition:all var(--t-fast); }
.status-btn input{ position:absolute; opacity:0; pointer-events:none; }
.status-btn.present.active{ background:#22c55e; color:var(--white); border-color:#22c55e; } .status-btn.absent.active{ background:#dc2626; color:var(--white); border-color:#dc2626; } .status-btn.late.active{ background:#f59e0b; color:var(--white); border-color:#f59e0b; } .status-btn.excused.active{ background:#3b82f6; color:var(--white); border-color:#3b82f6; }
.remarks-input{ width:100%; padding:.6rem .9rem; border:1px solid var(--border-light); border-radius:var(--r-md); font-size:1.25rem; }
.remarks-input:focus{ border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-glow); outline:none; }
.att-save-wrap{ text-align:center; margin:1.6rem 0; }
.att-save-btn{ padding:1.1rem 3rem; background:var(--primary); color:var(--white); border:none; border-radius:var(--r-md); font-weight:800; font-size:1.45rem; cursor:pointer; box-shadow:0 6px 18px var(--primary-glow); transition:all var(--t-base); }
.att-save-btn:hover{ background:var(--primary-dark); transform:translateY(-1px); }
.att-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; margin-top:1.6rem; }
.att-stat-card{ background:var(--white); border:1px solid var(--border-light); border-radius:var(--r-lg); padding:1.4rem 1rem; text-align:center; box-shadow:var(--shadow-card); border-top:3px solid var(--primary); }
.att-stat-card.green{ border-top-color:#22c55e; } .att-stat-card.red{ border-top-color:#dc2626; } .att-stat-card.yellow{ border-top-color:#f59e0b; } .att-stat-card.blue{ border-top-color:#3b82f6; }
.att-stat-num{ font-family:var(--font-heading); font-size:2.2rem; font-weight:800; color:var(--text); }
.att-stat-label{ font-size:1.1rem; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.06em; }
.att-print-modal{ position:fixed; inset:0; background:rgba(0,0,0,.55); display:none; align-items:center; justify-content:center; z-index:9999; padding:2rem; }
.att-print-modal.is-open{ display:flex; }
.att-print-modal-inner{ background:var(--white); border-radius:var(--r-xl); padding:2rem 2.4rem; max-width:44rem; width:100%; box-shadow:var(--shadow-2xl); }
.att-print-modal-title{ font-weight:800; font-size:1.6rem; margin:0 0 1.2rem; display:flex; align-items:center; gap:.6rem; }
.att-print-icon{ color:var(--primary); }
.att-print-field{ margin-bottom:1.2rem; }
.att-print-field-last{ margin-bottom:1.6rem; }
.att-print-label{ font-weight:700; font-size:1.2rem; color:var(--text); display:block; margin-bottom:.4rem; }
.att-print-input{ width:100%; padding:.9rem 1.2rem; border:1.5px solid var(--border); border-radius:var(--r-md); font-size:1.35rem; }
.att-print-input:focus{ border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-glow); outline:none; }
.att-print-actions{ display:flex; gap:.8rem; justify-content:flex-end; }
.att-print-btn-cancel{ padding:.8rem 1.6rem; background:var(--white); border:1px solid var(--border); border-radius:var(--r-md); font-weight:700; cursor:pointer; }
.att-print-btn-go{ padding:.8rem 1.6rem; background:var(--primary); color:var(--white); border:1px solid var(--primary); border-radius:var(--r-md); font-weight:800; cursor:pointer; box-shadow:0 4px 12px var(--primary-glow); }
/* --- teacher_create_flashcards / assignment / game shared --- */
.flashcard-container{ max-width:110rem; margin:0 auto; padding:0 2.4rem; }
.flashcard-container .card{ background:var(--white); border:1px solid var(--border-light); border-radius:var(--r-xl); padding:2rem 2.4rem; margin-bottom:1.8rem; box-shadow:var(--shadow-card); }
.flashcard-container .card h3{ font-size:1.65rem; font-weight:800; margin-bottom:1.2rem; padding-bottom:.8rem; border-bottom:1px solid var(--border-light); }
.filter-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin-bottom:1.4rem; }
.flashcard-item{ background:var(--white); border:1px solid var(--border-light); border-radius:var(--r-lg); padding:1.6rem; margin-bottom:1.2rem; box-shadow:var(--shadow-card); transition:all var(--t-base); }
.flashcard-item:hover{ box-shadow:var(--shadow-hover); transform:translateY(-1px); }
.flashcard-header{ display:flex; justify-content:space-between; gap:1rem; align-items:center; margin-bottom:1rem; flex-wrap:wrap; }
.flashcard-meta{ display:flex; gap:.5rem; flex-wrap:wrap; }
.flashcard-content{ margin-bottom:1rem; }
.flashcard-label{ font-weight:800; font-size:1.2rem; color:var(--primary); text-transform:uppercase; letter-spacing:.06em; margin-bottom:.3rem; }
.flashcard-text{ font-size:1.4rem; color:var(--text-secondary); line-height:1.6; }
.flashcard-meta-bottom{ font-size:1.15rem; color:var(--text-muted); border-top:1px solid var(--border-light); padding-top:.6rem; margin-top:.6rem; }
.form-row-3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:1.2rem; }
.hint-box{ background:var(--primary-mist); border:1px solid rgba(var(--primary-rgb),.14); border-left:4px solid var(--primary); border-radius:var(--r-md); padding:1rem 1.2rem; font-size:1.25rem; color:var(--primary-dark); margin-top:1rem; }
.section-spacer{ height:1.6rem; }
.game-container{ max-width:110rem; margin:0 auto; padding:0 2.4rem; }
.game-container .card{ background:var(--white); border:1px solid var(--border-light); border-radius:var(--r-xl); padding:2rem 2.4rem; margin-bottom:1.8rem; box-shadow:var(--shadow-card); }
.game-container .card h3{ font-size:1.65rem; font-weight:800; margin-bottom:1.2rem; }
.game-type-selector{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
.game-type-card{ border:2px solid var(--border-light); border-radius:var(--r-lg); padding:1.6rem 1rem; text-align:center; cursor:pointer; transition:all var(--t-base); background:var(--white); }
.game-type-card:hover{ border-color:var(--primary); background:var(--primary-mist); }
.game-type-card.selected{ border-color:var(--primary); background:var(--primary); color:var(--white); box-shadow:0 6px 18px var(--primary-glow); }
.type-icon{ width:4.2rem; height:4.2rem; border-radius:50%; background:var(--primary-mist); color:var(--primary); display:inline-flex; align-items:center; justify-content:center; font-size:1.8rem; margin:0 auto .6rem; }
.game-type-card.selected .type-icon{ background:var(--white); color:var(--primary); }
.type-name{ font-weight:800; font-size:1.3rem; }
.game-type-desc{ font-size:1.15rem; color:var(--text-muted); margin-top:.2rem; }
.game-type-card.selected .game-type-desc{ color:rgba(255,255,255,.85); }
.game-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(26rem, 1fr)); gap:1.4rem; }
.game-card{ background:var(--white); border:1px solid var(--border-light); border-radius:var(--r-lg); padding:1.6rem; box-shadow:var(--shadow-card); transition:all var(--t-base); }
.game-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-hover); }
.game-card .game-icon{ font-size:2.6rem; margin-bottom:.4rem; }
.game-card .game-title{ font-weight:800; font-size:1.45rem; margin-bottom:.4rem; }
.game-card .game-meta{ display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:.6rem; }
.game-card .game-stats{ font-size:1.2rem; color:var(--text-muted); margin-bottom:.8rem; }
.game-card .game-actions{ display:flex; gap:.6rem; flex-wrap:wrap; }
.assignment-container{ max-width:110rem; margin:0 auto; padding:0 2.4rem; }
.assignment-container .card{ background:var(--white); border:1px solid var(--border-light); border-radius:var(--r-xl); padding:2rem 2.4rem; margin-bottom:1.8rem; box-shadow:var(--shadow-card); }
.assignment-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(30rem, 1fr)); gap:1.4rem; }
.submission-stats{ font-size:1.15rem; color:var(--text-muted); margin-top:.6rem; padding:.6rem .8rem; background:var(--gray-50); border-radius:var(--r-md); border:1px solid var(--border-light); }
/* --- upload_library_material --- */
.file-upload-area{ border:2px dashed var(--border); border-radius:var(--r-lg); padding:2.4rem; text-align:center; background:var(--gray-25); cursor:pointer; transition:all var(--t-base); }
.file-upload-area:hover{ border-color:var(--primary); background:var(--primary-mist); }
.file-upload-area.dragover{ border-color:var(--primary); background:var(--primary-mist); transform:scale(1.01); }
.upload-icon{ font-size:3rem; color:var(--primary); margin-bottom:.6rem; }
/* --- admin-manage-staff --- */
.create-class-chk,.role-class-chk,.role-subj-chk{ accent-color:var(--primary); width:1.6rem; height:1.6rem; }
.ms-edit-btn{ padding:.45rem .9rem; background:var(--white); border:1px solid var(--border); border-radius:var(--r-md); font-weight:700; font-size:1.2rem; cursor:pointer; transition:all var(--t-base); }
.ms-edit-btn:hover{ background:var(--primary); color:var(--white); border-color:var(--primary); }
.section-hdr-classes,.section-hdr-subjects{ font-weight:800; font-size:1.35rem; color:var(--primary); margin:1.2rem 0 .6rem; padding-bottom:.4rem; border-bottom:2px solid var(--primary-mist); }
/* --- teacher_messages --- */
.filter-bar{ display:flex; gap:.8rem; align-items:center; flex-wrap:wrap; padding:1rem 1.2rem; background:var(--white); border:1px solid var(--border-light); border-radius:var(--r-lg); margin-bottom:1.4rem; }
.sidebar-icon{ width:2rem; text-align:center; color:var(--primary); }
.sidebar-label{ font-weight:600; }
.empty-icon{ font-size:4rem; opacity:.35; text-align:center; display:block; margin-bottom:.8rem; color:var(--text-muted); }
/* =====================================================
Fix 22: GRID OFFSETS — admin_visitors/pta pages use
col-lg-10/col-md-10/col-lg-offset-1 etc. which were
never defined in stylenew.css (only 12/9/8/7/6…), so
visitor/PTA cards were not centered → plain. Diagnosis:
CSS incomplete, page code correct (uses standard
Bootstrap grid). Added here with theme tokens.
===================================================== */
.col-lg-10{ width:83.3333%; }
.col-lg-11{ width:91.6667%; }
.col-md-10{ width:83.3333%; }
.col-lg-offset-1{ margin-left:8.3333%; }
.col-md-offset-1{ margin-left:8.3333%; }
.col-md-offset-2{ margin-left:16.6667%; }
.text-muted{ color:var(--text-muted) !important; }
/* =====================================================
Fix 23: FEE / STORE / MARKETPLACE — admin_fee_structure
(fee-container/fee-card), admin_store_dashboard
(sd-wrap/sd-stats/sd-card/sd-tabs), store_scanner
(pos-wrap/pos-header/scan-zone/qi/cart) &
admin_marketplace (mkt-page/mkt-hero/mkt-table)
All 4 mains + affiliates used 30-74 bespoke classes
with zero rules → plain cards/tables/POS. Diagnosis:
pages include header (CSS loads), fault is stylenew.css
missing marketplace/store sections. Full system added
with theme tokens so all conform.
===================================================== */
/* --- admin_fee_structure --- */
.fee-container{ max-width:110rem; margin:0 auto; padding:0 2.4rem; }
.fee-stats-bar{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; margin-bottom:1.6rem; }
.fee-stats-bar .fsb-item{ background:var(--white); border:1px solid var(--border-light); border-radius:var(--r-lg); padding:1.4rem 1rem; text-align:center; box-shadow:var(--shadow-card); border-top:3px solid var(--primary); }
.fee-stats-bar .fsb-val{ font-family:var(--font-heading); font-size:1.8rem; font-weight:800; color:var(--text); }
.fee-stats-bar .fsb-label{ font-size:1.05rem; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.05em; }
.fee-card{ background:var(--white); border:1px solid var(--border-light); border-radius:var(--r-xl); padding:2rem 2.4rem; margin-bottom:1.8rem; box-shadow:var(--shadow-card); position:relative; overflow:hidden; }
.fee-card::before{ content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg, var(--primary), var(--accent)); }
.fee-card-hdr{ display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; margin-bottom:1.4rem; padding-bottom:1rem; border-bottom:1px solid var(--border-light); }
.fee-card-hdr h3{ margin:0; font-size:1.55rem; font-weight:800; color:var(--text); }
.fch-icon{ width:4.2rem; height:4.2rem; border-radius:var(--r-md); background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); color:var(--white); display:inline-flex; align-items:center; justify-content:center; font-size:1.8rem; box-shadow:0 4px 12px var(--primary-glow); flex-shrink:0; }
.fch-toggle{
display:inline-flex;
align-items:center;
gap:.5rem;
padding:.7rem 1.4rem;
background:var(--white);
border:1.5px solid var(--border);
border-radius:var(--r-full);
color:var(--text-secondary);
font-family:var(--font-heading);
font-weight:700;
font-size:1.25rem;
cursor:pointer;
transition:all var(--t-base);
box-shadow:var(--shadow-xs);
}
.fch-toggle:hover{
background:var(--primary);
color:var(--white);
border-color:var(--primary);
transform:translateY(-1px);
box-shadow:0 6px 14px var(--primary-glow);
}
.fch-left{ display:flex; align-items:center; gap:1.2rem; }
.fch-sub{ font-size:1.3rem; color:var(--text-muted); margin:.2rem 0 0; line-height:1.5; max-width:55rem; }
.fee-table-wrap{ border:1px solid var(--border-light); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-card); }
.fee-table{ width:100%; border-collapse:collapse; font-size:1.35rem; background:var(--white); }
.fee-table th{ background:var(--gray-50); padding:1rem .8rem; font-size:1.1rem; text-transform:uppercase; color:var(--text-muted); border-bottom:2px solid var(--border); text-align:left; white-space:nowrap; }
.fee-table td{ padding:1rem .8rem; border-bottom:1px solid var(--border-light); }
.fee-table tr:last-child td{ border:none; } .fee-table tr:hover td{ background:var(--primary-mist); }
/* =====================================================
Premium fee-item cards + selector (admin_fee_structure)
- Beautiful card layout for "Manage Fee Items"
- Pretty chip-style selector with smooth selected state
- Polished edit/delete icon buttons
===================================================== */
.fee-items-list{
display:grid;
grid-template-columns:repeat(auto-fill, minmax(28rem, 1fr));
gap:1.2rem;
margin-top:1.6rem;
}
.fee-item-row{
display:flex;
align-items:center;
gap:1.2rem;
padding:1.4rem 1.6rem;
background:linear-gradient(135deg, var(--white) 0%, color-mix(in srgb, var(--primary) 3%, var(--white)) 100%);
border:1px solid var(--border-light);
border-left:4px solid var(--primary);
border-radius:var(--r-lg);
box-shadow:var(--shadow-xs);
transition:all var(--t-base);
position:relative;
overflow:hidden;
}
.fee-item-row::before{
content:'';
position:absolute;
top:0; right:0; bottom:0;
width:0;
background:linear-gradient(135deg, var(--primary-mist) 0%, transparent 100%);
transition:width var(--t-base);
pointer-events:none;
}
.fee-item-row:hover{
border-color:var(--primary);
box-shadow:0 8px 22px rgba(var(--primary-rgb),.10);
transform:translateY(-2px);
}
.fee-item-row:hover::before{ width:100%; }
.fee-item-row .fir-info{
flex:1;
min-width:0;
display:flex;
flex-direction:column;
gap:.3rem;
position:relative;
z-index:1;
}
.fee-item-row .fee-item-name{
font-family:var(--font-heading);
font-weight:700;
font-size:1.5rem;
color:var(--text);
letter-spacing:-.005em;
display:flex;
align-items:center;
gap:.6rem;
}
.fee-item-row .fee-item-name::before{
content:'\f15b';
font-family:FontAwesome;
color:var(--primary);
font-size:1.2rem;
opacity:.7;
}
.fee-item-row .fee-item-desc{
color:var(--text-muted);
font-size:1.25rem;
line-height:1.5;
padding-left:1.8rem;
}
.fee-item-row .fir-actions{
display:flex;
gap:.5rem;
flex-shrink:0;
position:relative;
z-index:1;
}
.btn-icon{
width:3.6rem;
height:3.6rem;
display:inline-flex;
align-items:center;
justify-content:center;
background:var(--white);
border:1.5px solid var(--border-light);
border-radius:var(--r-md);
color:var(--primary);
font-size:1.4rem;
cursor:pointer;
transition:all var(--t-base);
box-shadow:var(--shadow-xs);
padding:0;
line-height:1;
}
.btn-icon:hover{
background:var(--primary);
color:var(--white) !important;
border-color:var(--primary);
transform:translateY(-2px);
box-shadow:0 6px 16px var(--primary-glow);
}
.btn-icon-danger{
color:#dc2626;
border-color:#fecaca;
background:#fef2f2;
}
.btn-icon-danger:hover{
background:#dc2626 !important;
color:var(--white) !important;
border-color:#dc2626;
box-shadow:0 6px 16px rgba(220,38,38,.28);
}
.fee-list-empty{
text-align:center;
padding:4rem 2rem;
background:linear-gradient(135deg, var(--gray-25) 0%, var(--white) 100%);
border:2px dashed var(--border);
border-radius:var(--r-lg);
color:var(--text-muted);
font-style:normal;
font-size:1.4rem;
}
.fee-list-empty::before{
content:'\f0d6';
font-family:FontAwesome;
display:block;
font-size:4rem;
color:var(--primary);
opacity:.25;
margin-bottom:1rem;
}
.fee-no-items{
text-align:center;
padding:2.4rem 1.6rem;
background:var(--gray-25);
border:1.5px dashed var(--border);
border-radius:var(--r-md);
color:var(--text-muted);
font-style:normal;
font-size:1.3rem;
}
.fee-no-items::before{
content:'\f071';
font-family:FontAwesome;
margin-right:.5rem;
color:var(--accent);
}
/* ── Premium fee-item selector (clickable cards w/ checkbox + tick) ── */
.fee-item-selector{
display:grid;
grid-template-columns:repeat(auto-fill, minmax(28rem, 1fr));
gap:1.2rem;
margin-top:1.2rem;
}
.fee-item-choice{
display:flex !important;
align-items:center;
gap:1.2rem;
padding:1.4rem 1.6rem !important;
background:var(--white);
border:2px solid var(--border-light);
border-radius:var(--r-lg);
cursor:pointer;
transition:all var(--t-base);
font-size:1.35rem;
color:var(--text-secondary);
position:relative;
overflow:hidden;
box-shadow:var(--shadow-xs);
}
.fee-item-choice:hover{
border-color:var(--primary);
background:var(--primary-mist);
transform:translateY(-2px);
box-shadow:0 8px 20px rgba(var(--primary-rgb),.10);
}
.fee-item-choice.fic-selected{
border-color:var(--primary);
background:linear-gradient(135deg, var(--primary-mist) 0%, color-mix(in srgb, var(--primary) 8%, var(--white)) 100%);
box-shadow:0 8px 22px var(--primary-glow), inset 0 0 0 1px var(--primary);
}
.fee-item-choice .fic-check{
width:2.2rem;
height:2.2rem;
border-radius:50%;
background:var(--gray-100);
display:inline-flex;
align-items:center;
justify-content:center;
flex-shrink:0;
transition:all var(--t-base);
}
.fee-item-choice .fee-item-chk{
width:1.4rem;
height:1.4rem;
margin:0;
accent-color:var(--primary);
cursor:pointer;
}
.fee-item-choice .fic-info{
flex:1;
min-width:0;
display:flex;
flex-direction:column;
gap:.3rem;
}
.fee-item-choice .fic-name{
font-family:var(--font-heading);
font-weight:700;
font-size:1.4rem;
color:var(--text);
letter-spacing:-.005em;
}
.fee-item-choice .fic-desc{
color:var(--text-muted);
font-size:1.2rem;
line-height:1.5;
}
.fee-item-choice .fic-tick{
width:3rem;
height:3rem;
border-radius:50%;
background:var(--gray-100);
color:var(--gray-400);
display:inline-flex;
align-items:center;
justify-content:center;
font-size:1.4rem;
font-weight:800;
flex-shrink:0;
transition:all var(--t-base);
opacity:.3;
transform:scale(.85);
}
.fee-item-choice.fic-selected .fic-tick{
background:var(--primary);
color:var(--white);
opacity:1;
transform:scale(1);
box-shadow:0 6px 16px var(--primary-glow);
}
.fee-item-choice.fic-selected .fic-check{
background:var(--primary);
}
.fee-item-choice.fic-selected .fic-check::after{
content:'\f00c';
font-family:FontAwesome;
color:var(--white);
font-size:1.1rem;
}
/* --- admin_store_dashboard (sd-*) --- */
.sd-wrap{ max-width:110rem; margin:0 auto; padding:0 2.4rem; }
.sd-stats-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(20rem, 1fr)); gap:1.4rem; margin-bottom:1.8rem; }
.sd-stat{ background:var(--white); border:1px solid var(--border-light); border-radius:var(--r-lg); padding:2rem 1.8rem; text-align:center; box-shadow:var(--shadow-card); border-top:3px solid var(--primary); transition:all var(--t-base); }
.sd-stat:hover{ transform:translateY(-3px); box-shadow:var(--shadow-hover); }
.sd-stat.orange{ border-top-color:var(--accent); } .sd-stat.green{ border-top-color:#22c55e; } .sd-stat.blue{ border-top-color:#3b82f6; } .sd-stat.purple{ border-top-color:#8b5cf6; }
.sd-stat h3{ font-family:var(--font-heading); font-size:2.4rem; font-weight:800; margin:0 0 .4rem; color:var(--text); line-height:1.1; letter-spacing:-.01em; }
.sd-stat p{ font-family:var(--font-heading); font-size:1.2rem; color:var(--text-muted); margin:0; font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
.sd-card{ background:var(--white); border:1px solid var(--border-light); border-radius:var(--r-xl); padding:1.8rem; margin-bottom:1.6rem; box-shadow:var(--shadow-card); }
.sd-tabs{ display:flex; gap:.6rem; flex-wrap:wrap; border-bottom:2px solid var(--border-light); padding-bottom:.6rem; margin-bottom:1.4rem; }
.sd-tab{ padding:.75rem 1.4rem; border-radius:var(--r-md); background:var(--white); border:1.5px solid var(--border-light); font-weight:700; cursor:pointer; transition:all var(--t-base); }
.sd-tab:hover{ border-color:var(--primary); color:var(--primary); }
.sd-tab.active{ background:var(--primary); color:var(--white); border-color:var(--primary); box-shadow:0 4px 12px var(--primary-glow); }
.sd-table{ width:100%; border-collapse:collapse; font-size:1.3rem; background:var(--white); }
.sd-table th{ background:var(--gray-50); padding:.9rem .7rem; font-size:1.05rem; text-transform:uppercase; color:var(--text-muted); border-bottom:2px solid var(--border); }
.sd-table td{ padding:.85rem .7rem; border-bottom:1px solid var(--border-light); }
.sd-search{ padding:.7rem 1rem; border:1.5px solid var(--border); border-radius:var(--r-md); font-size:1.3rem; min-width:20rem; }
.sd-search:focus{ border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-glow); outline:none; }
.sd-btn{ padding:.6rem 1.1rem; border-radius:var(--r-md); font-weight:700; font-size:1.2rem; border:1px solid transparent; cursor:pointer; transition:all var(--t-base); display:inline-flex; align-items:center; gap:.4rem; text-decoration:none !important; }
.sd-btn-green{ background:#22c55e; color:var(--white); } .sd-btn-orange{ background:var(--accent); color:var(--white); } .sd-btn-blue{ background:#3b82f6; color:var(--white); } .sd-btn-red{ background:#dc2626; color:var(--white); } .sd-btn-gray{ background:var(--gray-100); color:var(--text); border-color:var(--border); }
.sd-btn:hover{ transform:translateY(-1px); box-shadow:var(--shadow-md); opacity:.92; }
.sd-btn-green:hover,.sd-btn-orange:hover,.sd-btn-blue:hover,.sd-btn-red:hover{ color:var(--white); }
.sd-btn-gray:hover{ color:var(--text); }
/* --- admin_store_dashboard extras --- */
.sd-tab-content{ display:none; }
.sd-tab-content.active{ display:block; animation:sdFadeIn .25s ease; }
@keyframes sdFadeIn{ from{opacity:0;transform:translateY(4px);} to{opacity:1;transform:none;} }
.sd-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.6rem; margin-bottom:1.4rem; }
@media (max-width:900px){ .sd-row{ grid-template-columns:1fr; } }
@media (max-width:768px){
.hp-hero-cta{ flex-direction:row !important; flex-wrap:nowrap !important; align-items:stretch !important; gap:.6rem !important; width:100% !important; max-width:100% !important; }
.hp-hero-cta .hp-btn{ flex:1 1 0 !important; width:auto !important; min-width:0 !important; justify-content:center !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; padding:.95rem .7rem !important; font-size:1.02rem !important; min-height:auto !important; }
.hp-hero-trust{ display:grid !important; grid-template-columns:repeat(3, minmax(0,1fr)) !important; gap:.5rem !important; padding:1.2rem 0 0 0 !important; }
.hp-hero-trust .hp-trust-item{ flex-direction:column !important; text-align:center !important; padding:.7rem .3rem !important; gap:.35rem !important; align-items:center !important; justify-content:center !important; }
.hp-hero-trust .hp-trust-item i{ font-size:1.2rem !important; }
.hp-hero-trust .hp-trust-item strong{ font-size:1.15rem !important; line-height:1.1 !important; }
.hp-hero-trust .hp-trust-item span{ font-size:.82rem !important; }
}
@media (max-width:400px){
.hp-hero-cta{ gap:.45rem !important; }
.hp-hero-cta .hp-btn{ padding:.8rem .5rem !important; font-size:.92rem !important; gap:.35rem !important; }
.hp-hero-trust{ gap:.35rem !important; }
.hp-hero-trust .hp-trust-item{ padding:.5rem .2rem !important; }
.hp-hero-trust .hp-trust-item strong{ font-size:1rem !important; }
.hp-hero-trust .hp-trust-item span{ font-size:.76rem !important; }
}
.sd-col2{ min-width:0; }
.sd-col2 h4{ font-family:var(--font-heading); font-size:1.5rem; font-weight:700; color:var(--text); margin:0 0 1.2rem; display:flex; align-items:center; gap:.6rem; }
.sd-lbl{ display:block; font-family:var(--font-heading); font-size:1.25rem; font-weight:700; color:var(--text-secondary); margin-bottom:.5rem; text-transform:uppercase; letter-spacing:.04em; }
.sd-inp,.sd-sel{ width:100%; padding:.9rem 1.2rem; border:1.5px solid var(--border); border-radius:var(--r-md); font-family:var(--font-body); font-size:1.4rem; color:var(--text); background:var(--white); transition:border-color var(--t-base), box-shadow var(--t-base); }
.sd-inp:focus,.sd-sel:focus{ border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-glow); outline:none; }
.sd-modal{ position:fixed; inset:0; background:rgba(0,0,0,.55); display:none; align-items:center; justify-content:center; z-index:9999; padding:2rem; backdrop-filter:blur(2px); }
.sd-modal.open{ display:flex; animation:sdFadeIn .2s ease; }
.sd-modal-box{ background:var(--white); border-radius:var(--r-xl); box-shadow:var(--shadow-2xl); max-width:48rem; width:100%; max-height:90vh; overflow:auto; padding:2.4rem; position:relative; }
.sd-modal-close{ position:absolute; top:1rem; right:1rem; background:transparent; border:none; color:var(--text-muted); font-size:2rem; width:3.2rem; height:3.2rem; border-radius:50%; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; line-height:1; }
.sd-modal-close:hover{ background:var(--gray-100); color:var(--text); }
.sd-modal-box h5{ font-family:var(--font-heading); font-size:1.6rem; font-weight:800; color:var(--text); margin:0 0 1.4rem; padding-right:3rem; }
.sd-err,.sd-ok{ display:flex; align-items:center; gap:1rem; padding:1.4rem 1.8rem; border-radius:var(--r-md); font-size:1.4rem; font-weight:500; margin-bottom:1.6rem; border:1px solid; }
.sd-err{ background:#fef2f2; color:#991b1b; border-color:#fecaca; }
.sd-ok{ background:#ecfdf5; color:#065f46; border-color:#a7f3d0; }
/* Bx badges (active/suspended/purchase/topup/etc.) */
.bx{ display:inline-block; padding:.3rem .8rem; border-radius:var(--r-full); font-family:var(--font-heading); font-size:1.15rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; border:1px solid transparent; line-height:1.2; }
.bx-g{ background:#dcfce7; color:#166534; border-color:#bbf7d0; }
.bx-r{ background:#fee2e2; color:#991b1b; border-color:#fecaca; }
.bx-o{ background:#fff7ed; color:#9a3412; border-color:#fed7aa; }
.bx-b{ background:#dbeafe; color:#1e40af; border-color:#bfdbfe; }
/* Wallet balance chips */
.bal-chip{ display:inline-flex; align-items:center; padding:.35rem .9rem; border-radius:var(--r-full); font-family:var(--font-heading); font-size:1.25rem; font-weight:800; letter-spacing:.02em; border:1px solid transparent; white-space:nowrap; }
.bal-ok{ background:#dcfce7; color:#166534; border-color:#bbf7d0; }
.bal-low{ background:#fff7ed; color:#9a3412; border-color:#fed7aa; }
.bal-zero{ background:#fee2e2; color:#991b1b; border-color:#fecaca; }
/* ── Student browser (admin_store_dashboard tab 5) ── */
.stu-filter-bar{ display:flex; flex-wrap:wrap; gap:.8rem; align-items:center; padding:1.2rem; background:var(--white); border:1px solid var(--border-light); border-radius:var(--r-lg); margin-bottom:1.6rem; box-shadow:var(--shadow-sm); }
.stu-class-btn{ padding:.65rem 1.2rem; border:1.5px solid var(--border-light); border-radius:var(--r-full); background:var(--white); font-family:var(--font-heading); font-size:1.25rem; font-weight:700; color:var(--text-secondary); cursor:pointer; transition:all var(--t-fast); }
.stu-class-btn:hover{ border-color:var(--primary); color:var(--primary); }
.stu-class-btn.stu-active{ background:var(--primary); color:var(--white); border-color:var(--primary); box-shadow:0 4px 12px var(--primary-glow); }
.stu-search{ flex:1 1 22rem; padding:.85rem 1.2rem; border:1.5px solid var(--border); border-radius:var(--r-md); font-size:1.35rem; min-width:18rem; }
.stu-search:focus{ border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-glow); outline:none; }
.stu-count-info{ font-family:var(--font-heading); font-size:1.25rem; font-weight:700; color:var(--text-secondary); margin-left:auto; }
.stu-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(28rem, 1fr)); gap:1.4rem; }
.stu-card{ background:var(--white); border:1px solid var(--border-light); border-radius:var(--r-xl); padding:1.6rem; box-shadow:var(--shadow-card); transition:all var(--t-base); display:flex; flex-direction:column; gap:1rem; }
.stu-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-hover); border-color:var(--primary); }
.stu-card-top{ display:flex; align-items:center; gap:1rem; }
.stu-av{ width:5.2rem; height:5.2rem; border-radius:50%; background:linear-gradient(135deg,var(--primary),var(--primary-dark)); color:var(--white); display:inline-flex; align-items:center; justify-content:center; font-family:var(--font-heading); font-size:1.6rem; font-weight:800; flex-shrink:0; overflow:hidden; box-shadow:0 4px 12px rgba(0,0,0,.18); }
.stu-av img{ width:100%; height:100%; object-fit:cover; display:block; }
.stu-name{ font-family:var(--font-heading); font-size:1.45rem; font-weight:700; color:var(--text); margin:0; line-height:1.2; }
.stu-meta{ font-size:1.2rem; color:var(--text-muted); margin:.2rem 0 0; font-weight:600; }
.stu-bal-row{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.8rem 1rem; background:var(--bg); border-radius:var(--r-md); border:1px solid var(--border-light); }
.stu-matric{ font-family:'JetBrains Mono','SF Mono',Menlo,monospace; font-size:1.15rem; color:var(--text-secondary); background:transparent; padding:0; }
.stu-actions{ display:flex; gap:.6rem; flex-wrap:wrap; }
.stu-act-btn{ flex:1 1 auto; min-width:7rem; padding:.75rem 1rem; border-radius:var(--r-md); font-family:var(--font-heading); font-size:1.2rem; font-weight:700; text-align:center; text-decoration:none !important; border:1px solid transparent; display:inline-flex; align-items:center; justify-content:center; gap:.4rem; cursor:pointer; transition:all var(--t-fast); color:var(--white); }
.stu-act-scanner{ background:#0891b2; } .stu-act-scanner:hover{ background:#155e75; transform:translateY(-1px); color:var(--white); }
.stu-act-topup{ background:#22c55e; border:none; } .stu-act-topup:hover{ background:#15803d; transform:translateY(-1px); color:var(--white); }
.stu-act-hist{ background:var(--accent); flex:0 0 auto; min-width:auto; padding:.75rem 1rem; } .stu-act-hist:hover{ background:var(--accent-dark); transform:translateY(-1px); color:var(--white); }
/* ── admin_store_dashboard extras (round 2) ── */
.sd-toolbar{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; margin-bottom:1.4rem; }
.sd-toolbar-right{ display:flex; gap:.8rem; flex-wrap:wrap; align-items:center; }
.sd-count{ font-family:var(--font-heading); font-size:1.25rem; font-weight:700; color:var(--text-secondary); }
.sd-field{ margin-bottom:1rem; }
.sd-btn-ml{ margin-left:.6rem; }
.sd-btn-xs{ padding:.4rem .85rem !important; font-size:1.1rem !important; }
.sd-actions-cell{ white-space:nowrap; display:flex; gap:.4rem; flex-wrap:wrap; align-items:center; }
.sd-tx-avatar{ width:3.4rem; height:3.4rem; border-radius:50%; object-fit:cover; border:2px solid var(--accent); flex-shrink:0; }
.sd-tx-avatar-letter{ display:inline-flex; align-items:center; justify-content:center; width:3.4rem; height:3.4rem; border-radius:50%; background:var(--accent); color:var(--white); font-family:var(--font-heading); font-size:1.3rem; font-weight:800; flex-shrink:0; }
.sd-code{ font-family:'JetBrains Mono','SF Mono',Menlo,monospace; font-size:1.2rem; color:var(--text-secondary); background:var(--bg); padding:.2rem .6rem; border-radius:6px; }
.sd-money{ font-family:var(--font-heading); font-size:1.3rem; font-weight:700; color:var(--text); }
.sd-money-bold{ font-family:var(--font-heading); font-size:1.3rem; font-weight:800; color:var(--text); }
.sd-money-muted{ font-family:var(--font-heading); font-size:1.3rem; color:var(--text-secondary); }
.sd-money-loaded{ font-weight:700; color:#15803d; }
.sd-money-spent{ font-weight:700; color:#dc2626; }
.sd-tx-time{ white-space:nowrap; font-family:'JetBrains Mono','SF Mono',Menlo,monospace; font-size:1.2rem; color:var(--text-secondary); }
.sd-tx-desc{ max-width:22rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:1.25rem; color:var(--text); }
.sd-tx-ref{ font-family:'JetBrains Mono','SF Mono',Menlo,monospace; font-size:1.15rem; color:var(--text-secondary); }
.sd-tx-cashier{ font-size:1.25rem; color:var(--text); }
.sd-items-scroll{ max-height:38rem; overflow-y:auto; border:1px solid var(--border-light); border-radius:var(--r-md); }
.sd-items-scroll .sd-table th{ position:sticky; top:0; z-index:1; background:var(--gray-50); }
.sd-bulk-note{ background:#fffbeb; border:1px solid #fde68a; }
.sd-bulk-note p{ font-size:1.3rem; color:#78350f; margin:0; line-height:1.6; }
.sd-bulk-note code{ background:rgba(120,53,15,.12); padding:.15rem .5rem; border-radius:4px; font-size:1.2rem; }
.sd-bulk-form{ margin-top:1.4rem; display:flex; gap:.8rem; flex-wrap:wrap; align-items:flex-end; }
.sd-file{ padding:.4rem !important; max-width:26rem; height:auto !important; }
@media (max-width:900px){
.sd-tx-desc{ max-width:14rem; }
.sd-actions-cell{ flex-direction:column; align-items:flex-start; }
}
/* --- store_scanner (pos-*) --- */
.pos-wrap{ background:var(--bg); padding:2rem 0 5rem; min-height:60vh; }
.pos-header{ display:flex; justify-content:space-between; align-items:center; gap:1.4rem; flex-wrap:wrap; background:var(--white); border:1px solid var(--border-light); border-radius:var(--r-xl); padding:1.6rem 2rem; margin-bottom:1.6rem; box-shadow:var(--shadow-card); }
.pos-header h2{ margin:0; font-size:1.75rem; font-weight:800; color:var(--text); }
.pos-header h2 span{ color:var(--primary); }
.pos-stats{ display:flex; gap:1.4rem; flex-wrap:wrap; }
.pos-stat{ text-align:center; min-width:8rem; }
.pos-stat strong{ display:block; font-size:1.6rem; font-weight:800; color:var(--text); }
.pos-stat{ font-size:1.1rem; color:var(--text-muted); font-weight:600; }
.pos-body{ display:grid; grid-template-columns:1.4fr .8fr; gap:1.6rem; }
.pos-left,.pos-right{ background:var(--white); border:1px solid var(--border-light); border-radius:var(--r-xl); padding:1.6rem 1.8rem; box-shadow:var(--shadow-card); }
.scan-zone{ border:2px dashed var(--border); border-radius:var(--r-lg); padding:1.4rem; text-align:center; background:var(--gray-25); transition:all var(--t-base); margin-bottom:1.4rem; }
.scan-zone.scanning{ border-color:var(--primary); background:var(--primary-mist); }
.scan-zone.success{ border-color:#22c55e; background:#ecfdf5; }
.scan-zone.error{ border-color:#dc2626; background:#fef2f2; }
.scan-label{ font-weight:800; font-size:1.25rem; color:var(--text); margin-bottom:.6rem; }
.scan-input-row{ display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; }
.scan-input{ flex:1 1 20rem; padding:1rem 1.2rem; border:2px solid var(--border); border-radius:var(--r-md); font-size:1.4rem; font-weight:600; text-align:center; letter-spacing:.04em; }
.scan-input:focus{ border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-glow); outline:none; }
.scan-btn,.cam-btn{ padding:.9rem 1.4rem; border-radius:var(--r-md); font-weight:800; border:1px solid var(--primary); background:var(--primary); color:var(--white); cursor:pointer; transition:all var(--t-base); }
.scan-btn:hover,.cam-btn:hover{ background:var(--primary-dark); transform:translateY(-1px); }
.scan-hint{ font-size:1.15rem; color:var(--text-muted); margin-top:.6rem; }
.student-card{ display:flex; gap:1.2rem; align-items:center; padding:1.2rem; background:var(--gray-25); border:1px solid var(--border-light); border-radius:var(--r-lg); margin-bottom:1.4rem; opacity:0; transform:translateY(8px); transition:all var(--t-base); }
.student-card.visible{ opacity:1; transform:none; background:var(--white); box-shadow:var(--shadow-sm); border-color:var(--primary); }
.sc-avatar{ width:5rem; height:5rem; border-radius:50%; background:var(--primary); color:var(--white); display:inline-flex; align-items:center; justify-content:center; font-weight:800; font-size:1.6rem; flex-shrink:0; overflow:hidden; }
.sc-info{ flex:1; }
.sc-name{ font-weight:800; font-size:1.45rem; margin:0; }
.sc-meta{ font-size:1.15rem; color:var(--text-muted); }
.sc-balance-wrap{ display:flex; gap:1.2rem; margin-top:.4rem; }
.sc-balance{ font-family:var(--font-heading); font-size:1.65rem; font-weight:800; }
.sc-balance.zero{ color:#dc2626; } .sc-balance.low{ color:#d97706; }
.qi-section h4{ font-size:1.35rem; font-weight:800; margin-bottom:.8rem; }
.qi-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(14rem, 1fr)); gap:.8rem; }
.qi-btn{ padding:1rem; border:1.5px solid var(--border-light); border-radius:var(--r-md); background:var(--white); cursor:pointer; transition:all var(--t-base); text-align:center; position:relative; }
.qi-btn:hover{ border-color:var(--primary); background:var(--primary-mist); transform:translateY(-1px); }
.qi-btn.selected{ border-color:var(--primary); background:var(--primary); color:var(--white); }
.qi-name{ font-weight:700; font-size:1.25rem; } .qi-price{ font-size:1.15rem; color:var(--text-muted); margin-top:.15rem; }
.qi-count{ position:absolute; top:.4rem; right:.4rem; background:var(--accent); color:var(--white); width:1.8rem; height:1.8rem; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:1rem; font-weight:800; }
.cart-section h4{ font-size:1.35rem; font-weight:800; margin-bottom:.8rem; }
.cart-empty{ text-align:center; padding:2rem; color:var(--text-muted); border:1px dashed var(--border); border-radius:var(--r-md); }
.cart-item{ display:flex; justify-content:space-between; align-items:center; padding:.7rem 0; border-bottom:1px solid var(--border-light); font-size:1.25rem; }
.cart-item-name{ font-weight:600; } .cart-item-qty{ color:var(--text-muted); } .cart-item-price{ font-weight:800; color:var(--primary); }
.cart-item-del{ background:none; border:none; color:#dc2626; font-size:1.6rem; cursor:pointer; padding:0 .4rem; }
.cart-custom-row{ display:flex; gap:.6rem; margin-top:.8rem; }
.cart-custom-inp{ flex:1; padding:.7rem .9rem; border:1px solid var(--border-light); border-radius:var(--r-md); font-size:1.25rem; }
.cart-custom-btn{ padding:.7rem 1.2rem; background:var(--primary); color:var(--white); border:none; border-radius:var(--r-md); font-weight:700; cursor:pointer; }
.charge-section{ margin-top:1.4rem; padding-top:1.2rem; border-top:2px solid var(--border-light); }
.charge-total-row{ display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem; }
.charge-total-lbl{ font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.06em; font-size:1.15rem; }
.charge-total-amt{ font-family:var(--font-heading); font-size:2rem; font-weight:800; color:var(--primary); }
.charge-btn{ width:100%; padding:1.2rem; background:var(--primary); color:var(--white); border:none; border-radius:var(--r-md); font-weight:800; font-size:1.45rem; cursor:pointer; transition:all var(--t-base); box-shadow:0 6px 18px var(--primary-glow); }
.charge-btn:disabled{ opacity:.6; cursor:not-allowed; }
.charge-btn:hover:not(:disabled){ background:var(--primary-dark); transform:translateY(-1px); }
.charge-clear{ width:100%; margin-top:.6rem; padding:.7rem; background:var(--white); border:1px solid var(--border); border-radius:var(--r-md); font-weight:600; cursor:pointer; }
.pos-right-header h3{ font-size:1.35rem; font-weight:800; margin:0 0 .2rem; }
.pos-right-header p{ font-size:1.15rem; color:var(--text-muted); margin:0 0 1rem; }
.txn-list{ display:flex; flex-direction:column; gap:.6rem; max-height:60vh; overflow-y:auto; }
.txn-item{ padding:1rem; background:var(--gray-25); border:1px solid var(--border-light); border-radius:var(--r-md); transition:all var(--t-base); }
.txn-item:hover{ background:var(--white); border-color:var(--primary); }
.txn-row1{ display:flex; justify-content:space-between; font-weight:700; font-size:1.25rem; }
.txn-name{ color:var(--text); } .txn-amt{ color:#dc2626; }
.txn-row2{ display:flex; justify-content:space-between; font-size:1.1rem; color:var(--text-muted); margin-top:.15rem; }
/* --- admin_marketplace --- */
.mkt-page{ background:var(--bg); padding:2rem 0 5rem; }
.mkt-hero{ background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); color:var(--white); border-radius:var(--r-xl); padding:2rem 2.4rem; margin-bottom:1.8rem; box-shadow:var(--shadow-lg); position:relative; overflow:hidden; }
.mkt-hero::before{ content:''; position:absolute; top:-4rem; right:-2rem; width:14rem; height:14rem; border-radius:50%; background:rgba(255,255,255,.06); }
.mkt-hero-top{ display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; position:relative; }
.mkt-hero-icon{ width:4.2rem; height:4.2rem; border-radius:50%; background:rgba(255,255,255,.14); display:inline-flex; align-items:center; justify-content:center; font-size:1.8rem; }
.mkt-hero-text h3{ margin:0 0 .2rem; color:var(--white); font-size:1.65rem; font-weight:800; }
.mkt-hero-text p{ margin:0; opacity:.85; font-size:1.25rem; }
.mkt-filters{ display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; margin-top:1.2rem; position:relative; }
.mkt-filters-label{ font-weight:700; font-size:1.15rem; opacity:.9; }
.mkt-filter{ padding:.45rem 1rem; border-radius:var(--r-full); background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.18); color:var(--white); font-weight:700; font-size:1.2rem; text-decoration:none !important; transition:all var(--t-base); }
.mkt-filter:hover{ background:var(--white); color:var(--primary); }
.mkt-filter.active{ background:var(--white); color:var(--primary); box-shadow:0 4px 12px rgba(0,0,0,.15); }
.mkt-table-wrap{ border:1px solid var(--border-light); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-card); background:var(--white); }
.mkt-admin-table{ width:100%; border-collapse:collapse; font-size:1.3rem; background:var(--white); }
.mkt-admin-table th{ background:var(--gray-50); padding:1rem .8rem; font-size:1.05rem; text-transform:uppercase; color:var(--text-muted); border-bottom:2px solid var(--border); text-align:left; }
.mkt-admin-table td{ padding:1rem .8rem; border-bottom:1px solid var(--border-light); vertical-align:middle; }
.mkt-admin-table tr:last-child td{ border:none; } .mkt-admin-table tr:hover td{ background:var(--primary-mist); }
.mkt-tbl-avatar{ width:4.2rem; height:4.2rem; border-radius:var(--r-md); object-fit:cover; border:1px solid var(--border-light); }
.mkt-price{ color:var(--primary); } .mkt-old-price{ color:var(--text-muted); text-decoration:line-through; font-size:1.15rem; }
.mkt-tbl-featured{ display:inline-flex; gap:.3rem; align-items:center; padding:.2rem .6rem; background:#fef3c7; color:#92400e; border-radius:var(--r-full); font-size:1.05rem; font-weight:800; margin-top:.3rem; }
.mkt-tbl-actions{ display:flex; gap:.4rem; }
.mkt-tbl-btn{ padding:.45rem .8rem; border-radius:var(--r-md); font-weight:700; font-size:1.15rem; border:1px solid var(--border); background:var(--white); color:var(--text); text-decoration:none !important; transition:all var(--t-base); display:inline-flex; align-items:center; gap:.3rem; cursor:pointer; }
.mkt-tbl-btn:hover{ border-color:var(--primary); color:var(--primary); background:var(--primary-mist); }
.mkt-tbl-danger{ color:#dc2626; border-color:#fecaca; } .mkt-tbl-danger:hover{ background:#fef2f2; border-color:#fca5a5; }
/* =====================================================
Fix 24: NOTIFICATION / ANNOUNCEMENT / EVENTS / GALLERY
+ affiliates (notification_settings, create_announcement,
message templates, class dropdown, calendar view)
6 mains used 9+ bespoke .notification-container/
.templates-section/.ann-class-group etc. with zero
rules → plain cards/forms. Diagnosis: pages include
header (CSS loads), fault is stylenew.css missing
notification/announcement section. Full system added.
===================================================== */
.notification-container{ max-width:96rem; margin:0 auto; padding:0 2.4rem; }
.notification-container .card{ background:var(--white); border:1px solid var(--border-light); border-radius:var(--r-xl); padding:2rem 2.4rem; margin-bottom:1.6rem; box-shadow:var(--shadow-card); }
.templates-section{ background:var(--gray-50); border:1px dashed var(--border); border-radius:var(--r-lg); padding:1.4rem 1.6rem; margin-bottom:1.6rem; }
.template-item{ padding:1rem 1.2rem; background:var(--white); border:1px solid var(--border-light); border-radius:var(--r-md); margin-bottom:.8rem; cursor:pointer; transition:all var(--t-base); }
.template-item:hover{ border-color:var(--primary); background:var(--primary-mist); transform:translateY(-1px); }
.template-name{ font-weight:800; font-size:1.35rem; color:var(--primary); }
.template-preview{ font-size:1.15rem; color:var(--text-muted); margin-top:.2rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.notification-textarea{ min-height:12rem; resize:vertical; }
.char-count,.character-count{ font-size:1.15rem; color:var(--text-muted); text-align:right; margin-top:.3rem; }
.notification-note{ font-size:1.15rem; color:var(--text-muted); font-style:italic; }
.settings-container{ max-width:96rem; margin:0 auto; padding:0 2.4rem; }
.settings-container .card{ background:var(--white); border:1px solid var(--border-light); border-radius:var(--r-xl); padding:2rem 2.4rem; box-shadow:var(--shadow-card); }
.section-heading{ font-family:var(--font-heading); font-size:1.45rem; font-weight:800; color:var(--primary); margin:1.6rem 0 1rem; padding-bottom:.6rem; border-bottom:2px solid var(--primary-mist); display:flex; align-items:center; gap:.6rem; }
.checkbox-group{ display:flex; align-items:center; gap:.8rem; padding:.8rem 0; }
.checkbox-group input[type="checkbox"]{ width:1.8rem; height:1.8rem; accent-color:var(--primary); }
.checkbox-group label{ font-weight:700; color:var(--text); cursor:pointer; }
.announcement-container{ max-width:96rem; margin:0 auto; padding:0 2.4rem; }
.announcement-toolbar{ height:1.2rem; }
.announcement-flex{ display:flex; justify-content:space-between; gap:1rem; align-items:flex-start; flex-wrap:wrap; }
.expired-badge{ background:#fee2e2; color:#991b1b; padding:.2rem .6rem; border-radius:var(--r-full); font-size:1.05rem; font-weight:800; border:1px solid #fecaca; }
.ann-class-group{ display:none; }
.ann-class-group.is-open{ display:block; }
.calendar-header{ display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; padding:1.4rem 1.6rem; background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); color:var(--white); border-radius:var(--r-lg); margin-bottom:1.4rem; box-shadow:var(--shadow-md); }
.calendar-title{ font-weight:800; font-size:1.5rem; display:flex; align-items:center; gap:.6rem; }
.calendar-nav{ display:flex; gap:.8rem; align-items:center; }
.color-selector{ display:flex; gap:.6rem; flex-wrap:wrap; margin-top:.4rem; }
.color-option{ width:3.2rem; height:3.2rem; border-radius:50%; cursor:pointer; border:3px solid var(--white); box-shadow:0 2px 8px rgba(0,0,0,.15); transition:all var(--t-base); }
.color-option:hover{ transform:scale(1.08); }
.color-option.selected{ box-shadow:0 0 0 3px var(--primary), 0 4px 12px rgba(0,0,0,.15); transform:scale(1.1); }
.class-dropdown{ background:var(--white); border:1px solid var(--border); border-radius:var(--r-md); box-shadow:var(--shadow-lg); max-height:22rem; overflow-y:auto; position:absolute; z-index:999; width:100%; }
.cd-item{ padding:.85rem 1.2rem; cursor:pointer; border-bottom:1px solid var(--border-light); transition:background var(--t-fast); }
.cd-item:hover{ background:var(--primary-mist); color:var(--primary); }
/* =====================================================
Fix 25: SCHOOL SETTINGS / MANAGE CLASSES EXTRA /
RESULT TEMPLATE — 3 heavy admin config pages
admin_school_settings (93 ss-* missing),
admin_manage_classes (13 pq-* extra),
admin_result_template (35 rt-* missing).
All 3 correctly include header.inc.php (CSS loads) —
fault is stylenew.css never shipped their sections.
Each is a single-page TAB app; affiliates are its
tabs (no separate PHP files) → fixing main fixes all.
Full theme-conformant systems added here.
===================================================== */
/* --- admin_school_settings (ss-*) --- */
.ss-dash-sidebar{ width:26rem; background:var(--white); border-right:1px solid var(--border-light); min-height:60vh; padding:1.6rem 0; }
.ss-dash-sidebar-head{ display:flex; align-items:center; gap:1rem; padding:0 1.6rem 1.2rem; border-bottom:1px solid var(--border-light); font-weight:800; color:var(--primary); }
.ss-dash-nav{ display:flex; flex-direction:column; gap:.2rem; padding:.8rem 0; }
.ss-dash-nav a{ display:flex; align-items:center; gap:.8rem; padding:.9rem 1.6rem; color:var(--text-secondary); font-weight:600; text-decoration:none !important; border-left:3px solid transparent; transition:all var(--t-fast); }
.ss-dash-nav a:hover,.ss-dash-nav a.active{ background:var(--primary-mist); color:var(--primary); border-left-color:var(--primary); }
.ss-dash-main{ flex:1; padding:2rem 2.4rem; background:var(--bg); }
.ss-dash-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:999; display:none; }
.ss-dash-backdrop.show{ display:block; }
.ss-card{ background:var(--white); border:1px solid var(--border-light); border-radius:var(--r-lg); padding:1.8rem 2rem; margin-bottom:1.6rem; box-shadow:var(--shadow-card); }
.ss-stats-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(18rem, 1fr)); gap:1.2rem; margin-bottom:1.6rem; }
.ss-stat-card{ background:var(--white); border:1px solid var(--border-light); border-radius:var(--r-lg); padding:1.4rem; text-align:center; box-shadow:var(--shadow-card); border-top:3px solid var(--primary); }
.ss-stat-primary{ border-top-color:var(--primary); } .ss-stat-success{ border-top-color:#22c55e; }
.ss-stat-icon{ width:4rem; height:4rem; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:1.6rem; margin:0 auto .6rem; background:var(--primary-mist); color:var(--primary); }
.ss-file-input{ display:block; width:100%; padding:.7rem; border:1px dashed var(--border); border-radius:var(--r-md); background:var(--gray-25); }
.ss-help-faint{ font-size:1.15rem; color:var(--text-muted); }
/* Tiny placeholder rules — full versions are in Fix 29 below. The new rules
override these because they appear later in the cascade, so we keep the
old names alive as no-ops for any element that might reference them. */
.ss-theme-preset{ display:flex; flex-direction:column; gap:.6rem; padding:1rem; border:1.5px solid var(--border-light); border-radius:var(--r-md); cursor:pointer; transition:all var(--t-base); background:var(--white); text-align:center; font-family:inherit; }
.ss-theme-preset:hover{ border-color:var(--primary); transform:translateY(-2px); box-shadow:var(--shadow-sm); }
.ss-btn-ghost{ background:var(--white); border:1px solid var(--border); color:var(--text); padding:.6rem 1.2rem; border-radius:var(--r-md); font-weight:700; cursor:pointer; }
.ss-btn-ghost:hover{ border-color:var(--primary); color:var(--primary); }
.ss-preview-img{ max-width:100%; border-radius:var(--r-md); border:1px solid var(--border-light); }
/* Gallery admin grid — the proper full rules live further down in Fix 29. */
.ss-toast-container{ position:fixed; top:1.6rem; right:1.6rem; z-index:99999; display:flex; flex-direction:column; gap:.6rem; }
/* --- admin_manage_classes extra pq-* --- */
.pq-confirm-icon{ width:3.6rem; height:3.6rem; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:1.6rem; background:var(--primary-mist); color:var(--primary); }
.pq-confirm-title{ font-weight:800; font-size:1.45rem; margin-bottom:.4rem; }
.pq-inp-color{ width:4rem; height:3.2rem; padding:.2rem; border:1px solid var(--border); border-radius:var(--r-sm); }
.preset-btn{ padding:.5rem 1rem; border:1px solid var(--border-light); border-radius:var(--r-full); background:var(--white); font-weight:600; cursor:pointer; transition:all var(--t-base); }
.preset-btn:hover{ border-color:var(--primary); color:var(--primary); background:var(--primary-mist); }
.sess-status-cell{ text-align:center; }
.subj-group-count{ background:var(--gray-100); padding:.2rem .6rem; border-radius:var(--r-full); font-size:1.1rem; font-weight:700; }
/* --- admin_result_template rt-* --- */
.rt-wrap{ max-width:110rem; margin:0 auto; padding:0 2.4rem; }
.rt-card{ background:var(--white); border:1px solid var(--border-light); border-radius:var(--r-xl); padding:2rem 2.4rem; margin-bottom:1.8rem; box-shadow:var(--shadow-card); }
.rt-card-header{ display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:1.2rem; padding-bottom:.8rem; border-bottom:1px solid var(--border-light); }
.rt-card-header h3{ margin:0; font-size:1.5rem; font-weight:800; color:var(--text); }
.rt-table-wrap{ border:1px solid var(--border-light); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-card); overflow-x:auto; }
.rt-table{ width:100%; border-collapse:collapse; font-size:1.3rem; background:var(--white); }
.rt-table th{ background:var(--gray-50); padding:1rem .9rem; font-size:1.05rem; text-transform:uppercase; color:var(--text-muted); border-bottom:2px solid var(--border); text-align:left; white-space:nowrap; }
.rt-table td{ padding:1rem .9rem; border-bottom:1px solid var(--border-light); }
.rt-table tr:last-child td{ border:none; } .rt-table tr:hover td{ background:var(--primary-mist); }
.rt-intro{ display:flex; gap:1.2rem; padding:1.4rem 1.6rem; background:var(--primary-mist); border:1px solid rgba(var(--primary-rgb),.14); border-left:4px solid var(--primary); border-radius:var(--r-md); margin-bottom:1.4rem; }
.rt-intro-icon{ width:3.6rem; height:3.6rem; border-radius:50%; background:var(--white); color:var(--primary); display:inline-flex; align-items:center; justify-content:center; font-size:1.6rem; flex-shrink:0; box-shadow:var(--shadow-sm); }
.rt-filter-bar{ display:flex; gap:.8rem; flex-wrap:wrap; align-items:center; padding:1rem 1.2rem; background:var(--white); border:1px solid var(--border-light); border-radius:var(--r-lg); margin-bottom:1.4rem; }
.rt-preview-card{ border:2px dashed var(--border); border-radius:var(--r-lg); padding:1.6rem; background:var(--gray-25); text-align:center; }
.rt-toggle{ position:relative; width:4.6rem; height:2.6rem; flex-shrink:0; cursor:pointer; display:inline-block; }
.rt-toggle input{ position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; z-index:2; }
.rt-toggle-slider{ position:absolute; inset:0; background:#cbd5e1; border-radius:2.6rem; transition:background .25s ease; }
.rt-toggle-slider::before{ content:''; position:absolute; width:2rem; height:2rem; left:.3rem; top:50%; transform:translateY(-50%); background:#fff; border-radius:50%; transition:transform .25s cubic-bezier(.4,0,.2,1); box-shadow:0 1px 3px rgba(0,0,0,.25); }
.rt-toggle input:checked + .rt-toggle-slider{ background:var(--primary); }
.rt-toggle input:checked + .rt-toggle-slider::before{ transform:translateY(-50%) translateX(2rem); }
.rt-toggle input:focus-visible + .rt-toggle-slider{ box-shadow:0 0 0 3px var(--primary-glow); }
.rt-toggle:hover .rt-toggle-slider::before{ box-shadow:0 2px 5px rgba(0,0,0,.3); }
.rt-delete-cb{ width:1.8rem !important; height:1.8rem !important; accent-color:#ef4444; cursor:pointer; border-radius:4px; }
.rt-alert{ padding:1rem 1.4rem; border-radius:var(--r-md); font-weight:600; margin-bottom:1rem; border:1px solid; }
.rt-alert-success{ background:#ecfdf5; border-color:#a7f3d0; color:#065f46; } .rt-alert-error{ background:#fef2f2; border-color:#fecaca; color:#991b1b; }
.rt-btn{ padding:.7rem 1.4rem; border-radius:var(--r-md); font-weight:800; border:1px solid transparent; cursor:pointer; transition:all var(--t-base); display:inline-flex; align-items:center; gap:.4rem; }
.rt-btn-primary{ background:var(--primary); color:var(--white); border-color:var(--primary); box-shadow:0 4px 12px var(--primary-glow); }
.rt-btn-primary:hover{ background:var(--primary-dark); transform:translateY(-1px); }
.inactive-row{ opacity:.6; background:var(--gray-50); }
.full{ grid-column:1/-1; }
/* =====================================================
Fix 26: ADMIN SCHOOL SETTINGS — layout distortion
.ss-dash was defined in stylenew.css as a link-card
grid (repeat auto-fill), but admin_school_settings.php
uses it as a flex layout: sidebar + main. This caused
sidebar/main to render as tiny grid cells → distorted.
Also missing: drawer toggle, backdrop, hidden cards,
active link state, and form input styling.
This fully overrides the broken rules.
===================================================== */
.ss-wrap{ background:var(--bg) !important; padding:2rem 0 5rem !important; }
.ss-wrap .container{ max-width:1280px; margin:0 auto; padding-left:2.4rem; padding-right:2.4rem; }
.ss-dash{
display:flex !important;
grid-template-columns:none !important;
gap:0 !important;
margin-bottom:2.4rem !important;
background:var(--white);
border:1px solid var(--border-light);
border-radius:var(--r-xl);
box-shadow:var(--shadow-card);
overflow:hidden;
align-items:stretch;
min-height:62vh;
}
.ss-dash-sidebar{
width:28rem !important;
min-width:26rem !important;
background:var(--white) !important;
border-right:1px solid var(--border-light) !important;
padding:0 !important;
display:flex !important;
flex-direction:column !important;
position:sticky !important;
top:1rem;
align-self:flex-start;
flex-shrink:0;
overflow:visible;
}
.ss-dash-sidebar-head{
display:flex !important; align-items:center; gap:.9rem;
padding:1.6rem 1.6rem 1.2rem !important;
border-bottom:1px solid var(--border-light) !important;
font-weight:800 !important; color:var(--text) !important;
font-size:1.3rem; letter-spacing:.04em; text-transform:uppercase;
}
.ss-dash-sidebar-head i{ color:var(--primary); }
.ss-dash-close{ display:none !important; margin-left:auto; background:none; border:none; font-size:1.5rem; color:var(--text-muted); cursor:pointer; width:3rem; height:3rem; border-radius:50%; }
.ss-dash-close:hover{ background:var(--gray-100); color:var(--text); }
.ss-dash-nav{ display:flex !important; flex-direction:column !important; gap:0 !important; padding:.8rem 0 !important; }
.ss-dash-nav a, .ss-dash-link{
display:flex !important; align-items:center; gap:1rem !important;
padding:1rem 1.6rem !important; color:var(--text-secondary) !important;
font-weight:600 !important; font-size:1.32rem !important;
text-decoration:none !important; border-left:3px solid transparent !important;
border-radius:0 !important; background:transparent !important;
transform:none !important; box-shadow:none !important;
transition:all var(--t-fast) !important; border-top:none !important; border-right:none !important; border-bottom:none !important;
}
.ss-dash-nav a:hover, .ss-dash-link:hover{
background:var(--primary-mist) !important; color:var(--primary) !important; border-left-color:var(--primary) !important;
transform:none !important; box-shadow:none !important;
}
.ss-dash-nav a.is-active, .ss-dash-link.is-active, .ss-dash-nav a.active{
background:var(--primary-mist) !important; color:var(--primary) !important; border-left-color:var(--primary) !important; font-weight:700 !important;
}
.ss-dash-link i, .ss-dash-nav a i{
width:3.2rem !important; height:3.2rem !important;
display:inline-flex !important; align-items:center; justify-content:center;
background:var(--gray-50) !important; color:var(--text-muted) !important;
border-radius:var(--r-sm) !important; font-size:1.4rem !important; flex-shrink:0 !important;
}
.ss-dash-link.is-active i, .ss-dash-nav a.is-active i{ background:var(--primary) !important; color:var(--white) !important; }
.ss-dash-main{ flex:1 !important; padding:2.4rem !important; background:var(--bg) !important; min-width:0; overflow:hidden; }
.ss-dash-main .ss-card:last-child{ margin-bottom:0; }
.ss-card-hidden{ display:none !important; }
.ss-dash-mobile-toggle{ display:none; align-items:center; gap:.8rem; width:100%; padding:1.2rem 1.6rem; background:var(--white); border:1px solid var(--border-light); border-radius:var(--r-lg); font-weight:700; color:var(--text); cursor:pointer; margin-bottom:1.2rem; box-shadow:var(--shadow-sm); }
.ss-dash-mobile-toggle i{ color:var(--primary); }
.ss-dash-backdrop{ position:fixed !important; inset:0 !important; background:rgba(0,0,0,.42) !important; z-index:999 !important; display:none !important; backdrop-filter:blur(2px); }
.ss-dash-backdrop.is-visible, .ss-dash-backdrop.show{ display:block !important; }
.ss-row{ display:grid !important; grid-template-columns:repeat(2,1fr) !important; gap:1.4rem !important; margin-bottom:1.4rem !important; }
.ss-row.three{ grid-template-columns:repeat(3,1fr) !important; }
.ss-fg{ margin-bottom:1.4rem !important; }
.ss-fg.full{ grid-column:1/-1 !important; }
.ss-fg label{ display:block; font-weight:600; font-size:1.28rem; color:var(--text); margin-bottom:.5rem; }
.ss-fg input[type="text"], .ss-fg input[type="email"], .ss-fg input[type="url"], .ss-fg input[type="number"], .ss-fg input[type="time"], .ss-fg select, .ss-fg textarea{
width:100%; padding:1.05rem 1.3rem; border:1.8px solid var(--border) !important; border-radius:var(--r-sm) !important;
background:var(--white) !important; color:var(--text) !important; font-size:1.38rem !important; font-family:var(--font-body);
outline:none; transition:border-color var(--t-base), box-shadow var(--t-base); line-height:1.4; height:auto;
}
.ss-fg textarea{ min-height:8rem; resize:vertical; }
.ss-fg input:focus, .ss-fg select:focus, .ss-fg textarea:focus{ border-color:var(--primary) !important; box-shadow:0 0 0 4px var(--primary-glow) !important; }
.ss-ta-60{ min-height:6rem !important; } .ss-ta-80{ min-height:8rem !important; } .ss-ta-100{ min-height:10rem !important; } .ss-ta-120{ min-height:12rem !important; } .ss-ta-150{ min-height:15rem !important; }
.ss-help, p.ss-help{ font-size:1.22rem !important; color:var(--text-muted) !important; font-weight:400 !important; line-height:1.6; margin:.4rem 0 1rem !important; }
.ss-help-strong{ font-size:1.22rem; color:var(--text-secondary); background:var(--gray-25); border-left:3px solid var(--primary); padding:.8rem 1rem; border-radius:0 var(--r-sm) var(--r-sm) 0; margin-bottom:1.2rem; line-height:1.6; }
.ss-icon-blue{ color:var(--primary); } .ss-icon-orange{ color:var(--accent); }
.ss-card h4{ display:flex !important; align-items:center !important; gap:1.2rem !important; font-size:1.75rem !important; }
.ss-section-icon-pill{ flex-shrink:0; }
.ss-save-bar{ position:sticky !important; bottom:0; z-index:2; background:var(--white) !important; padding:1.4rem 1.6rem !important; border-top:1px solid var(--border-light) !important; margin:1.8rem -2rem -1.8rem !important; display:flex !important; justify-content:flex-end !important; gap:.8rem !important; box-shadow:0 -4px 14px rgba(0,0,0,.05) !important; border-radius:0 0 var(--r-lg) var(--r-lg) !important; }
.ss-stats-grid{ display:grid !important; grid-template-columns:repeat(auto-fit, minmax(22rem, 1fr)) !important; gap:1.4rem !important; margin-bottom:1.8rem !important; }
.ss-stat-card{ padding:1.8rem 1.4rem !important; }
.ss-stat-card h3{ font-size:2.4rem !important; font-weight:800 !important; color:var(--text) !important; margin:.2rem 0 !important; }
.ss-stat-card p{ font-size:1.2rem; color:var(--text-muted); font-weight:600; margin:0; }
.ss-slider-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(16rem, 1fr)); gap:1.2rem; }
.ss-slider-cell{ background:var(--gray-25); border:1px solid var(--border-light); border-radius:var(--r-md); padding:1rem; text-align:center; }
.ss-slider-cell img{ width:100%; height:11rem; object-fit:cover; border-radius:var(--r-sm); border:1px solid var(--border-light); margin-bottom:.6rem; }
.ss-slider-cell label{ font-weight:700; font-size:1.2rem; display:block; margin-bottom:.4rem; }
.ss-preview-img{ max-width:220px !important; max-height:140px; object-fit:cover; border-radius:var(--r-sm); border:1px solid var(--border-light); display:block; margin-bottom:.6rem; background:var(--white); padding:.3rem; }
.ss-favicon{ width:4.8rem; height:4.8rem; object-fit:contain; background:var(--white); border:1px solid var(--border-light); border-radius:var(--r-sm); padding:.4rem; }
.ss-filename{ display:block; font-family:monospace; font-size:1.15rem; color:var(--text-muted); word-break:break-all; margin-top:.3rem; }
.ss-file-input{ display:block; width:100%; padding:.8rem; border:1.6px dashed var(--border) !important; border-radius:var(--r-md) !important; background:var(--gray-25) !important; font-size:1.25rem; cursor:pointer; }
.ss-theme-groups{ display:flex; flex-direction:column; gap:2rem; }
.ss-theme-group-title{ display:flex; align-items:center; gap:.8rem; font-weight:800; font-size:1.35rem; color:var(--text); margin-bottom:1rem; }
.ss-theme-group-dot{ width:.9rem; height:.9rem; border-radius:50%; background:var(--primary); }
.ss-theme-group-count{ margin-left:auto; font-size:1.15rem; color:var(--text-muted); background:var(--gray-100); padding:.2rem .7rem; border-radius:var(--r-full); }
@media(max-width:991px){
.stu-list-grid-2{ grid-template-columns:1fr; }
.stu-history-stats-grid{ grid-template-columns:1fr 1fr; }
.stats-grid{ grid-template-columns:1fr 1fr; }
}
@media(max-width:991px){
.ss-dash{ flex-direction:column !important; border:none !important; box-shadow:none !important; background:transparent !important; overflow:visible !important; }
.ss-dash-mobile-toggle{ display:flex !important; }
.ss-dash-close{ display:inline-flex !important; }
.ss-dash-sidebar{
position:fixed !important; top:0 !important; left:0 !important; bottom:0 !important;
width:30rem !important; max-width:84vw !important; z-index:1000 !important;
transform:translateX(-100%); transition:transform .32s cubic-bezier(.4,0,.2,1) !important;
border-right:1px solid var(--border-light) !important; border-radius:0 !important;
max-height:100vh !important; overflow-y:auto !important;
}
.ss-dash.is-drawer-open .ss-dash-sidebar{ transform:translateX(0) !important; }
.ss-dash-main{ padding:0 !important; background:transparent !important; }
.ss-row, .ss-row.three{ grid-template-columns:1fr !important; }
.ss-save-bar{ margin:1.4rem -1.4rem -1.4rem !important; }
}
/* =====================================================
Fix 27 (REDESIGNED): ADMIN MANAGE CLASSES
Modern, consistent admin page system. Every rule maps
1-to-1 to a class used in admin_manage_classes.php.
The original "fix" was minimal — proper padding, type
scale, button states, modal headers, filter bars, and
per-section spacing are added here so the page actually
looks like a polished admin console.
===================================================== */
.pq-wrap{ background:var(--bg) !important; padding:2.4rem 0 5rem !important; min-height:60vh; }
.pq-wrap .container{ max-width:1280px; margin:0 auto; padding-left:2.4rem; padding-right:2.4rem; }
/* ── Page card shell ── */
.pq-card{ background:var(--white) !important; border:1px solid var(--border-light) !important; border-radius:var(--r-xl) !important; box-shadow:var(--shadow-card) !important; padding:0 !important; overflow:hidden !important; }
.pq-cb{ display:block !important; border:none !important; background:transparent !important; padding:0 !important; }
.pq-cb > .pq-tabs{ border-left:none !important; border-right:none !important; border-top:none !important; border-radius:0 !important; padding:1.2rem 1.6rem !important; }
/* ── Tab bar ── */
.pq-tabs{ display:flex !important; gap:.6rem !important; background:var(--bg-alt) !important; border:1px solid var(--border-light) !important; padding:1rem 1.2rem !important; border-radius:var(--r-xl) var(--r-xl) 0 0 !important; flex-wrap:wrap !important; overflow:visible !important; }
@media (max-width: 900px){
.pq-tabs{ overflow-x:auto !important; -webkit-overflow-scrolling:touch !important; flex-wrap:nowrap !important; }
}
.pq-tab{ display:inline-flex !important; align-items:center !important; gap:.7rem !important; padding:1rem 1.8rem !important; font-weight:700 !important; font-size:1.35rem !important; color:var(--text-secondary) !important; border:1.5px solid var(--border-light) !important; cursor:pointer !important; white-space:nowrap !important; background:var(--white) !important; transition:all var(--t-fast) !important; font-family:var(--font-heading) !important; flex-shrink:0 !important; border-radius:var(--r-md) !important; box-shadow:var(--shadow-sm) !important; position:relative; }
.pq-tab i{ font-size:1.3rem; opacity:.75; color:var(--text-muted); transition:all var(--t-fast); }
.pq-tab:hover{ color:var(--primary) !important; border-color:var(--primary) !important; background:var(--white) !important; transform:translateY(-1px); box-shadow:var(--shadow-md) !important; }
.pq-tab:hover i{ color:var(--primary) !important; opacity:1; }
.pq-tab.active{ color:#fff !important; border-color:var(--primary) !important; background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%) !important; box-shadow:0 6px 16px var(--primary-glow) !important; }
.pq-tab.active i{ color:#fff !important; opacity:1; }
.pq-tab .pq-badge{ background:var(--gray-100) !important; color:var(--text-secondary) !important; padding:.25rem .7rem !important; font-size:1.1rem !important; font-family:var(--font-body) !important; font-weight:700; border-radius:var(--r-full) !important; min-width:2rem; text-align:center; transition:all var(--t-fast); }
.pq-tab.active .pq-badge{ background:rgba(255,255,255,.22) !important; color:#fff !important; }
/* ── Tab panels ── */
.pq-tp{ display:none !important; padding:2.4rem 2.6rem !important; }
.pq-tp.active{ display:block !important; animation:pqFadeIn .25s ease; }
@keyframes pqFadeIn{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:translateY(0); } }
/* ── Checkboxes — uniform styled look across the whole page ── */
.pq-wrap input[type="checkbox"],
.pq-m input[type="checkbox"],
.pq-form-section input[type="checkbox"],
.pq-t input[type="checkbox"],
#subj-bulk-bar input[type="checkbox"],
.dup-target-cb,
.batch-dup-target-cb,
.subj-check,
.subj-grp-check-all{
appearance:none !important;
-webkit-appearance:none !important;
width:2rem !important;
height:2rem !important;
min-width:2rem !important;
border:2px solid var(--border) !important;
border-radius:5px !important;
background:var(--white) !important;
cursor:pointer !important;
position:relative !important;
vertical-align:middle !important;
margin:0 !important;
padding:0 !important;
flex-shrink:0 !important;
transition:all var(--t-fast) !important;
box-shadow:var(--shadow-sm) !important;
}
.pq-wrap input[type="checkbox"]:hover,
.pq-m input[type="checkbox"]:hover,
.pq-form-section input[type="checkbox"]:hover,
.pq-t input[type="checkbox"]:hover{
border-color:var(--primary) !important;
background:var(--primary-mist) !important;
}
.pq-wrap input[type="checkbox"]:focus-visible,
.pq-m input[type="checkbox"]:focus-visible,
.pq-form-section input[type="checkbox"]:focus-visible{
outline:none !important;
box-shadow:0 0 0 3px var(--primary-glow) !important;
border-color:var(--primary) !important;
}
.pq-wrap input[type="checkbox"]:checked,
.pq-m input[type="checkbox"]:checked,
.pq-form-section input[type="checkbox"]:checked,
.pq-t input[type="checkbox"]:checked{
background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%) !important;
border-color:var(--primary) !important;
box-shadow:0 2px 6px var(--primary-glow) !important;
}
.pq-wrap input[type="checkbox"]:checked::after,
.pq-m input[type="checkbox"]:checked::after,
.pq-form-section input[type="checkbox"]:checked::after,
.pq-t input[type="checkbox"]:checked::after{
content:'' !important;
position:absolute !important;
left:.5rem !important;
top:.15rem !important;
width:.55rem !important;
height:1rem !important;
border:solid #fff !important;
border-width:0 2.5px 2.5px 0 !important;
transform:rotate(45deg) !important;
}
/* Special-context tints: green for "active session", orange for "special subject" */
#new-sess-active:checked, .esess_active:checked{ background:linear-gradient(135deg,#10b981 0%,#059669 100%) !important; border-color:#059669 !important; box-shadow:0 2px 6px rgba(16,185,129,.3) !important; }
#new-subj-special:checked, #es_special:checked{ background:linear-gradient(135deg,#f97316 0%,#ea580c 100%) !important; border-color:#ea580c !important; box-shadow:0 2px 6px rgba(249,115,22,.3) !important; }
.dup-target-cb:checked, .batch-dup-target-cb:checked{ background:linear-gradient(135deg,#10b981 0%,#059669 100%) !important; border-color:#059669 !important; box-shadow:0 2px 6px rgba(16,185,129,.3) !important; }
.subj-check:checked, .subj-grp-check-all:checked{ background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%) !important; border-color:var(--primary) !important; }
/* Label rows containing checkboxes — keep nice alignment */
.pq-field label.pq-lbl:has(input[type="checkbox"]),
.pq-mb label:has(input[type="checkbox"]){
display:flex !important;
align-items:center !important;
gap:.8rem !important;
cursor:pointer !important;
font-weight:600 !important;
color:var(--text) !important;
font-size:1.3rem !important;
padding:.4rem 0 !important;
}
/* ── Section heading strip ── */
.pq-section-heading{ display:flex !important; align-items:center !important; gap:.9rem !important; font-size:1.5rem !important; font-weight:800 !important; color:var(--text) !important; padding:1.2rem 1.6rem !important; background:var(--bg-alt) !important; border:1px solid var(--border-light) !important; border-left:4px solid var(--primary) !important; border-radius:var(--r-md) !important; margin:0 0 1.6rem !important; font-family:var(--font-heading) !important; letter-spacing:-.005em; }
.pq-section-heading i{ color:var(--primary); font-size:1.4rem; }
.pq-section-heading.pq-inline{ margin:0 !important; display:inline-flex !important; }
.pq-section-heading > .pq-badge{ margin-left:auto; }
/* ── Pending / queue banner (yellow tint) ── */
.pq-section-heading[style*="background:#fef3c7"]{ background:#fef3c7 !important; border-color:#fcd34d !important; border-left-color:#f59e0b !important; color:#92400e; }
.pq-section-heading[style*="background:#fef3c7"] i{ color:#d97706; }
/* ── Form section (the "add new" panel) ── */
.pq-form-section{ display:flex !important; flex-wrap:wrap !important; gap:1.4rem !important; align-items:flex-end !important; background:var(--white) !important; border:1.5px solid var(--border-light) !important; border-radius:var(--r-lg) !important; padding:2rem !important; margin-bottom:2rem !important; box-shadow:var(--shadow-sm) !important; }
.pq-form-section .fg{ display:flex !important; gap:1.4rem !important; flex-wrap:wrap !important; flex:1 1 100% !important; width:100%; align-items:flex-end !important; }
.pq-form-section .fg .pq-field{ flex:1 1 20rem !important; min-width:0 !important; margin-bottom:0 !important; }
.pq-form-section > .pq-field{ flex:1 1 20rem !important; min-width:0 !important; margin-bottom:0 !important; }
/* ── Field (label + input stack) ── */
.pq-field{ display:flex; flex-direction:column; gap:.4rem; min-width:0; }
.pq-lbl{ display:block !important; font-family:var(--font-heading) !important; font-weight:700 !important; font-size:1.3rem !important; color:var(--text) !important; margin-bottom:0 !important; }
.pq-helper{ font-weight:500; color:var(--text-muted); font-size:1.15rem; margin-left:.3rem; }
/* pq-lbl that wraps a checkbox — render as horizontal row */
.pq-lbl.pq-check-label,
.pq-lbl:has(> input[type="checkbox"]){
display:inline-flex !important;
align-items:center !important;
gap:.9rem !important;
flex-direction:row !important;
cursor:pointer !important;
font-weight:600 !important;
padding:.6rem 0 !important;
color:var(--text) !important;
line-height:1.4 !important;
}
.pq-lbl.pq-check-label input[type="checkbox"],
.pq-lbl:has(> input[type="checkbox"]) input[type="checkbox"]{
flex-shrink:0 !important;
margin-top:0 !important;
}
.pq-lbl.pq-check-label > span,
.pq-lbl:has(> input[type="checkbox"]) > span{
display:inline-block !important;
flex:1 !important;
}
/* pq-field containing only a checkbox-label — give it a sane width */
.pq-field:has(> .pq-lbl:only-child:has(input[type="checkbox"])),
.pq-field.pq-check-field{
flex:0 1 auto !important;
min-width:0 !important;
align-self:flex-end !important;
}
/* ── Inputs & selects ── */
.pq-inp, .pq-sel, .pq-form-section input:not([type="color"]), .pq-form-section select{ width:100% !important; padding:1.05rem 1.3rem !important; font-family:var(--font-body) !important; font-size:1.38rem !important; font-weight:500; color:var(--text) !important; background:var(--white) !important; border:1.8px solid var(--border) !important; border-radius:var(--r-sm) !important; outline:none !important; line-height:1.4 !important; height:auto !important; box-shadow:none !important; transition:border-color var(--t-base), box-shadow var(--t-base); }
.pq-inp:focus, .pq-sel:focus, .pq-form-section input:focus:not([type="color"]), .pq-form-section select:focus{ border-color:var(--primary) !important; box-shadow:0 0 0 4px var(--primary-glow) !important; }
.pq-inp::placeholder{ color:var(--text-muted); opacity:.65; }
.pq-inp-color{
width:5.2rem !important;
height:4.2rem !important;
min-width:5.2rem !important;
max-width:5.2rem !important;
padding:.3rem !important;
border:2px solid var(--border) !important;
border-radius:var(--r-md) !important;
background:var(--white) !important;
cursor:pointer !important;
transition:all var(--t-fast) !important;
box-shadow:var(--shadow-sm) !important;
overflow:hidden !important;
}
.pq-inp-color:hover{
border-color:var(--primary) !important;
transform:translateY(-1px);
box-shadow:var(--shadow-md) !important;
}
.pq-inp-color:focus{
outline:none !important;
border-color:var(--primary) !important;
box-shadow:0 0 0 3px var(--primary-glow) !important;
}
.pq-inp-color::-webkit-color-swatch-wrapper{ padding:0 !important; border-radius:6px !important; }
.pq-inp-color::-webkit-color-swatch{ border:none !important; border-radius:6px !important; }
.pq-inp-color::-moz-color-swatch{ border:none !important; border-radius:6px !important; }
.pq-inp-narrow{ width:auto !important; min-width:10rem !important; max-width:14rem !important; flex:0 1 auto !important; }
.pq-order-field{ flex:0 1 12rem !important; min-width:10rem !important; }
.pq-dup-target-row{ display:flex !important; align-items:center !important; gap:.9rem !important; padding:.6rem 0 !important; cursor:pointer !important; font-size:1.3rem !important; border-bottom:1px solid #f1f5f9 !important; flex-direction:row !important; }
.pq-dup-target-row:hover{ background:var(--bg-alt); }
.pq-color-field{ flex:0 0 auto !important; min-width:14rem !important; }
.pq-color-wrap{ display:flex !important; align-items:center !important; gap:.8rem !important; }
.pq-color-hex{ font-family:'JetBrains Mono','SF Mono',Menlo,monospace !important; font-size:1.3rem !important; font-weight:700 !important; color:var(--text-secondary) !important; background:var(--bg-alt) !important; padding:.55rem 1rem !important; border-radius:var(--r-sm) !important; border:1.5px solid var(--border-light) !important; letter-spacing:.04em; }
.pq-color-chip{ display:inline-flex !important; align-items:center !important; gap:.7rem !important; padding:.3rem .8rem .3rem .3rem !important; background:var(--bg-alt) !important; border:1.5px solid var(--border-light) !important; border-radius:var(--r-full) !important; }
.pq-color-chip-swatch{ display:inline-block !important; width:2.2rem !important; height:2.2rem !important; min-width:2.2rem !important; border-radius:50% !important; border:2px solid #fff !important; box-shadow:var(--shadow-sm) !important; }
.pq-color-chip-hex{ font-family:'JetBrains Mono','SF Mono',Menlo,monospace !important; font-size:1.2rem !important; font-weight:700 !important; color:var(--text-secondary) !important; letter-spacing:.04em; }
/* ── Buttons (generic .pq-btn + colour variants) ── */
.pq-btn{ display:inline-flex !important; align-items:center !important; gap:.6rem !important; padding:1rem 1.8rem !important; font-family:var(--font-heading) !important; font-weight:700 !important; font-size:1.35rem !important; border-radius:var(--r-sm) !important; border:1.5px solid transparent !important; cursor:pointer !important; transition:all var(--t-base) !important; text-decoration:none !important; white-space:nowrap !important; line-height:1.2 !important; height:auto !important; }
.pq-btn i{ font-size:1.25rem; }
.pq-btn:hover{ transform:translateY(-1px); box-shadow:var(--shadow-sm); }
.pq-btn:active{ transform:translateY(0); }
.pq-btn-sm{ padding:.65rem 1.2rem !important; font-size:1.2rem !important; gap:.4rem; }
.pq-btn-or{ background:var(--accent) !important; color:var(--white) !important; border-color:var(--accent) !important; }
.pq-btn-or:hover{ background:var(--accent-dark) !important; border-color:var(--accent-dark) !important; }
.pq-btn-gr{ background:var(--primary) !important; color:var(--white) !important; border-color:var(--primary) !important; }
.pq-btn-gr:hover{ background:var(--primary-dark) !important; border-color:var(--primary-dark) !important; }
.pq-btn-bl{ background:#2563eb !important; color:var(--white) !important; border-color:#2563eb !important; }
.pq-btn-bl:hover{ background:#1e40af !important; border-color:#1e40af !important; }
.pq-btn-rd{ background:#dc2626 !important; color:var(--white) !important; border-color:#dc2626 !important; }
.pq-btn-rd:hover{ background:#b91c1c !important; border-color:#b91c1c !important; }
.pq-btn-gy{ background:var(--gray-100) !important; color:var(--text) !important; border-color:var(--border) !important; }
.pq-btn-gy:hover{ background:var(--gray-200) !important; border-color:var(--text-muted) !important; }
.pq-btn-ghost{ background:transparent !important; color:var(--primary) !important; border-color:var(--primary) !important; }
.pq-btn-ghost:hover{ background:var(--primary-mist) !important; }
/* ── Badges ── */
.pq-badge{ display:inline-flex !important; align-items:center !important; padding:.25rem .7rem !important; font-family:var(--font-body) !important; font-size:1.2rem !important; font-weight:700 !important; border-radius:var(--r-full) !important; background:var(--gray-100) !important; color:var(--text-muted) !important; white-space:nowrap; }
.pq-badge.bj{ background:var(--primary-mist) !important; color:var(--primary) !important; }
.pq-badge.ba{ background:#fef3c7 !important; color:#92400e !important; }
.pq-badge.bp{ background:#dbeafe !important; color:#1e40af !important; }
.pq-badge.bgr{ background:#dcfce7 !important; color:#166534 !important; }
.pq-badge.brd{ background:#fee2e2 !important; color:#991b1b !important; }
/* ── Tables ── */
.pq-table-scroll{ border:1px solid var(--border-light) !important; border-radius:var(--r-lg) !important; overflow-x:auto !important; -webkit-overflow-scrolling:touch !important; background:var(--white) !important; box-shadow:var(--shadow-sm) !important; margin-bottom:2rem !important; }
.pq-t{ width:100% !important; border-collapse:collapse !important; font-size:1.35rem !important; background:var(--white) !important; margin:0 !important; }
.pq-t thead th{ background:var(--bg-alt) !important; color:var(--text-secondary) !important; font-family:var(--font-heading) !important; font-weight:700 !important; font-size:1.15rem !important; text-transform:uppercase !important; letter-spacing:.06em !important; padding:1.2rem 1.4rem !important; text-align:left !important; border-bottom:2px solid var(--border) !important; white-space:nowrap !important; }
.pq-t tbody td{ padding:1.2rem 1.4rem !important; border-bottom:1px solid var(--border-light) !important; color:var(--text-secondary) !important; vertical-align:middle !important; }
.pq-t tbody tr:last-child td{ border-bottom:none !important; }
.pq-t tbody tr:hover td{ background:var(--green-50) !important; }
.pq-row-num{ color:var(--text-muted) !important; font-size:1.25rem !important; font-weight:700 !important; text-align:center !important; width:5rem; }
.pq-actions-cell{ display:flex !important; gap:.6rem !important; flex-wrap:wrap !important; align-items:center !important; }
.pq-no-results{ text-align:center !important; padding:3.5rem 1.6rem !important; color:var(--text-muted) !important; font-style:italic !important; font-size:1.4rem !important; background:var(--bg-alt) !important; }
/* ── Subject group block (per class) ── */
.subj-group{ background:var(--white); border:1px solid var(--border-light); border-radius:var(--r-lg); padding:1.4rem 1.6rem; margin-bottom:2rem; box-shadow:var(--shadow-sm); }
.subj-group > div:first-child{ margin-bottom:1.2rem; padding-bottom:1rem; border-bottom:1px solid var(--border-light); }
.subj-group .pq-badge{ font-size:1.15rem; }
.subj-group .pq-table-scroll{ margin-bottom:0; box-shadow:none; border:1px solid var(--border-light); }
.subj-group-count{ font-weight:700; }
/* ── Info / hint banner ── */
.pq-info{ display:flex; align-items:flex-start; gap:.8rem; background:var(--primary-mist); color:var(--primary-dark); border:1px solid var(--green-200); border-left:4px solid var(--primary); border-radius:var(--r-md); padding:1.1rem 1.4rem; font-size:1.3rem; line-height:1.6; margin-bottom:1.4rem; }
.pq-info i{ color:var(--primary); margin-top:.2rem; }
/* ── Filter row (grade keys / psychomotor) ── */
.pq-form-section .pq-sel,
.pq-form-section > select{ min-width:14rem; }
.pq-filter-row{
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
flex-wrap:wrap !important;
gap:1.4rem !important;
margin-bottom:1.6rem !important;
padding:1.4rem 1.8rem !important;
background:var(--white) !important;
border:1.5px solid var(--border-light) !important;
border-radius:var(--r-md) !important;
box-shadow:var(--shadow-sm) !important;
}
.pq-filter-row .pq-filter-left{ display:flex !important; align-items:center !important; gap:1rem !important; flex-wrap:wrap !important; flex:1 1 auto !important; min-width:0; }
.pq-filter-row .pq-filter-right{ display:flex !important; align-items:center !important; gap:.8rem !important; flex-wrap:wrap !important; flex-shrink:0; }
.pq-filter-row .pq-filter-label{
font-family:var(--font-heading) !important;
font-size:1.3rem !important;
font-weight:700 !important;
color:var(--text) !important;
display:inline-flex !important;
align-items:center !important;
gap:.6rem !important;
}
.pq-filter-row .pq-filter-label i{ color:var(--primary); font-size:1.2rem; }
.pq-filter-row select.pq-sel{
width:auto !important;
min-width:18rem !important;
max-width:26rem !important;
padding:.85rem 1.2rem !important;
font-size:1.3rem !important;
}
/* ── Bulk-action bar (subjects) ── */
#subj-bulk-bar{ display:flex; background:linear-gradient(135deg,#eff6ff 0%,#dbeafe 100%) !important; border:1px solid #93c5fd !important; border-radius:var(--r-md) !important; padding:1.2rem 1.6rem !important; margin-bottom:1.4rem !important; align-items:center !important; justify-content:space-between !important; flex-wrap:wrap !important; gap:1rem; }
#subj-bulk-bar span{ font-size:1.3rem !important; font-weight:700 !important; color:#1e40af !important; }
/* ── Modals (proper centered overlay) ── */
.pq-mo{ position:fixed !important; inset:0 !important; background:rgba(15,23,42,.55) !important; display:none !important; align-items:center !important; justify-content:center !important; z-index:9999 !important; padding:2rem !important; backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); opacity:0; transition:opacity var(--t-base); }
.pq-mo.open{ display:flex !important; opacity:1; }
.pq-m{ background:var(--white) !important; border-radius:var(--r-xl) !important; box-shadow:var(--shadow-2xl) !important; max-width:54rem !important; width:100% !important; max-height:90vh !important; overflow:hidden !important; display:flex !important; flex-direction:column !important; transform:scale(.96); transition:transform var(--t-base); }
.pq-mo.open .pq-m{ transform:scale(1); }
.pq-mh{ display:flex !important; align-items:center !important; justify-content:space-between !important; padding:1.6rem 2rem !important; border-bottom:1px solid var(--border-light) !important; font-family:var(--font-heading) !important; font-weight:700 !important; font-size:1.55rem !important; color:var(--text) !important; flex-shrink:0; background:var(--white); }
.pq-mh i{ color:var(--primary); margin-right:.6rem; }
.pq-mh--warning{ background:#fffbeb !important; border-bottom-color:#fde68a !important; color:#92400e; }
.pq-mh--warning i{ color:#f59e0b; }
.pq-mh--danger{ background:linear-gradient(135deg,#fef2f2 0%,#fee2e2 100%) !important; border-bottom-color:#fca5a5 !important; color:#991b1b; }
.pq-mh--danger i{ color:#dc2626; }
.pq-m--danger{ border-top:4px solid #dc2626; }
.pq-confirm-icon{ width:3.6rem; height:3.6rem; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:1.6rem; background:var(--primary-mist); color:var(--primary); }
.pq-confirm-title{ font-weight:800; font-size:1.45rem; margin-bottom:.4rem; }
.pq-confirm-msg{ font-size:1.3rem; color:var(--text-secondary); line-height:1.6; }
.pq-confirm-yes{ /* same look as pq-btn-rd, defined above */ }
.pq-mc{ background:none !important; border:none !important; font-size:2.2rem !important; color:var(--text-muted) !important; cursor:pointer !important; line-height:1 !important; width:3.2rem !important; height:3.2rem !important; border-radius:50% !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; transition:all var(--t-fast); }
.pq-mc:hover{ background:var(--gray-100) !important; color:var(--text) !important; }
.pq-mb{ padding:2rem !important; overflow-y:auto; flex:1; }
.pq-form-actions-tight{ display:flex !important; gap:.8rem !important; flex-wrap:wrap !important; align-items:center !important; justify-content:flex-end !important; padding-top:1.4rem; margin-top:1.4rem; border-top:1px solid var(--border-light); }
/* ── Toast notification (page-level) ── */
#pq-toast{ position:fixed; top:2rem; right:2rem; z-index:99999; display:flex; align-items:center; gap:1rem; min-width:30rem; max-width:44rem; padding:1.2rem 1.6rem; background:var(--white); border-radius:var(--r-md); box-shadow:var(--shadow-xl); border-left:5px solid var(--primary); font-size:1.4rem; transform:translateX(120%); transition:transform .3s cubic-bezier(.34,1.56,.64,1); }
#pq-toast.show{ transform:translateX(0); }
#pq-toast.success{ border-left-color:#22c55e; color:#166534; }
#pq-toast.error{ border-left-color:#ef4444; color:#991b1b; }
#pq-toast.info{ border-left-color:#3b82f6; color:#1e3a8a; }
#pq-toast-msg{ flex:1; }
#pq-toast-close{ background:transparent; border:none; color:inherit; font-size:1.8rem; cursor:pointer; line-height:1; opacity:.7; }
#pq-toast-close:hover{ opacity:1; }
/* ── Spinner ── */
#pq-spinner{ position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); width:4rem; height:4rem; border:4px solid var(--gray-200); border-top-color:var(--primary); border-radius:50%; z-index:99998; display:none; animation:pqSpin .8s linear infinite; }
#pq-spinner.show{ display:block; }
@keyframes pqSpin{ to{ transform:translate(-50%,-50%) rotate(360deg); } }
/* ── Custom checkboxes (per-class) ── */
.pq-t input[type="checkbox"]{ width:1.8rem !important; height:1.8rem !important; accent-color:var(--primary) !important; cursor:pointer; }
/* =====================================================
Fix 28: GENERATE ID CARDS — .card collision
css/idcard_templates.css defines .card as 204×323
printable card globally. Admin page also uses .card
for normal admin panels → they render as tiny flex
cards. This scoped reset restores admin cards.
Also fixes stats-grid / table layout distortion.
===================================================== */
.idcard-container{ max-width:1280px !important; margin:0 auto !important; padding:2rem 2.4rem 5rem !important; background:var(--bg) !important; min-height:60vh; }
.idcard-container .card{
width:auto !important; height:auto !important; min-height:0 !important;
display:block !important; position:static !important; overflow:visible !important;
flex-direction:unset !important; flex:none !important;
background:var(--white) !important; color:var(--text) !important;
border:1px solid var(--border-light) !important; border-radius:var(--r-lg) !important;
box-shadow:var(--shadow-card) !important; font-family:var(--font-body) !important;
padding:1.8rem 2rem !important; margin-bottom:1.8rem !important;
}
.idcard-container .card::before, .idcard-container .card::after{ display:none !important; content:none !important; }
.idcard-container .card-accent-primary{ border-left:4px solid var(--primary) !important; }
.idcard-container .page-header{ display:none !important; }
.idcard-container .stats-grid{ display:grid !important; grid-template-columns:repeat(3,1fr) !important; gap:1.4rem !important; margin:1.6rem 0 2rem !important; }
.idcard-container .stat-card{ background:var(--white) !important; border:1px solid var(--border-light) !important; border-radius:var(--r-lg) !important; padding:1.6rem !important; text-align:center !important; box-shadow:var(--shadow-card) !important; border-left:none !important; border-top:3px solid var(--primary) !important; }
.idcard-container .stat-card.generated{ border-top-color:#22c55e !important; }
.idcard-container .stat-card.pending{ border-top-color:#f59e0b !important; }
.idcard-container .stat-icon{ font-size:2.4rem !important; margin-bottom:.4rem !important; }
.idcard-container .stat-number{ font-family:var(--font-heading) !important; font-size:2.6rem !important; font-weight:800 !important; color:var(--text) !important; line-height:1 !important; }
.idcard-container .stat-label{ font-size:1.15rem !important; font-weight:700 !important; color:var(--text-muted) !important; text-transform:uppercase !important; letter-spacing:.05em !important; }
.idcard-container .table-responsive{ border:1px solid var(--border-light) !important; border-radius:var(--r-lg) !important; overflow-x:auto !important; background:var(--white) !important; box-shadow:var(--shadow-card) !important; }
.idcard-container .students-table{ width:100% !important; border-collapse:collapse !important; font-size:1.35rem !important; background:var(--white) !important; }
.idcard-container .students-table th{ background:var(--gray-50) !important; font-weight:700 !important; font-size:1.15rem !important; text-transform:uppercase !important; letter-spacing:.04em !important; color:var(--text-secondary) !important; padding:1rem 1.2rem !important; text-align:left !important; border-bottom:2px solid var(--border) !important; white-space:nowrap !important; }
.idcard-container .students-table td{ padding:1rem 1.2rem !important; border-bottom:1px solid var(--border-light) !important; vertical-align:middle !important; }
.idcard-container .students-table tr:last-child td{ border-bottom:none !important; }
.idcard-container .students-table tr:hover td{ background:var(--gray-25) !important; }
.idcard-container .student-photo img{ width:4rem; height:4rem; border-radius:50%; object-fit:cover; }
.idcard-container .no-photo{ width:4rem; height:4rem; border-radius:50%; background:var(--primary); color:var(--white); display:inline-flex; align-items:center; justify-content:center; font-weight:800; }
.idcard-container .form-row{ display:flex !important; gap:1.4rem !important; flex-wrap:wrap !important; align-items:flex-end !important; }
.idcard-container .form-group{ flex:1 1 22rem !important; }
@media(max-width:767px){
.mgmt-page{ padding:2rem 0 3.5rem; }
.admin-section{ padding:2rem 1.6rem; }
.admin-section-title{ font-size:1.65rem; }
.adm-btn{ width:100%; }
.admin-section div[style*="display: flex"] .adm-btn{ width:auto; }
.stu-enter-exam-wrap{ padding:1.6rem 1.2rem 3rem; }
.stu-enter-exam-wrap .stu-entry-card{ padding:2rem 1.6rem; }
.exam-header{ padding:1.6rem; }
.exam-body{ padding:1.6rem; }
.question-card{ padding:1.6rem; }
.exam-container{ margin:0 1.2rem; }
.dir-hero{ padding:2.8rem 1.6rem; margin:0 0 1.6rem; }
.dir-toolbar{ padding:1.2rem; }
.dir-grid{ grid-template-columns:1fr; }
.stu-history-stats-grid{ grid-template-columns:1fr; }
.stats-grid{ grid-template-columns:1fr 1fr; }
table.calendar td{ height:7rem; padding:.4rem; }
.pq-tp{ padding:1.4rem !important; }
.pq-tabs{ padding:0 .4rem !important; }
.pq-tab{ padding:1rem 1rem !important; font-size:1.2rem !important; }
.idcard-container{ padding:1.2rem 1.4rem 3rem !important; }
.idcard-container .stats-grid{ grid-template-columns:1fr !important; }
.ss-theme-grid{ grid-template-columns:repeat(auto-fill, minmax(14rem, 1fr)) !important; }
.ss-mockup-nav, .ss-mockup-hero-inner{ flex-direction:column !important; align-items:stretch !important; }
.ss-suggest-schemes{ flex-direction:column !important; }
}
/* =====================================================
Fix 29: ADMIN SCHOOL SETTINGS — missing theme picker
/ mockup / suggest / toast / modal markup styles.
admin_school_settings.php renders a colour picker, a
live mini-site preview, a smart-colour-match helper,
toast notifications and a presets popup — all of
which were built but never received CSS. The page
comment at the top of the file claims "All toast/gallery
styles are now in stylenew.css" but they were never
copied across. This block restores the full visual
system: every rule maps 1-to-1 to a class used in
admin_school_settings.php and the modals in
admin_generate_id_cards.php.
===================================================== */
/* ---- Section heading parts ---- */
.ss-h4-text{ display:inline-flex; flex-direction:column; gap:.2rem; min-width:0; }
.ss-h4-sub{ display:block; font-size:1.25rem; font-weight:500; color:var(--text-muted); font-family:var(--font-body); letter-spacing:0; text-transform:none; margin-top:.2rem; line-height:1.4; }
.ss-help-muted{ display:inline; font-weight:400; color:var(--text-muted); font-size:1.15rem; margin-left:.4rem; }
/* ---- Theme & Brand colour picker ----
Generous, polished card design. Each cell is a
self-contained preview + controls block with clear
breathing room. Min card width 22rem so 3 fit per
row on a 1280px page; on smaller widths it wraps. */
.ss-theme-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(22rem, 1fr)); gap:1.4rem; }
.ss-theme-group{ display:flex; flex-direction:column; gap:1.2rem; margin-bottom:1.4rem; }
.ss-theme-group:last-child{ margin-bottom:0; }
.ss-theme-group-title{ display:flex; align-items:center; gap:.8rem; font-weight:800; font-size:1.5rem; color:var(--text); padding:0 0 .2rem 0; background:transparent; border:none; border-bottom:none; }
.ss-theme-group-dot{ width:.9rem; height:.9rem; border-radius:50%; background:var(--primary); box-shadow:0 0 0 4px var(--primary-mist); }
.ss-theme-group-count{ margin-left:auto; font-size:1.2rem; color:var(--text-muted); background:var(--gray-50); border:1px solid var(--border-light); padding:.3rem .9rem; border-radius:var(--r-full); font-weight:600; }
.ss-theme-presets-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(18rem, 1fr)); gap:1.2rem; }
.ss-theme-cell{ background:var(--white); border:1px solid var(--border-light); border-radius:var(--r-lg); padding:0; display:flex; flex-direction:column; overflow:hidden; transition:border-color var(--t-base), box-shadow var(--t-base), transform var(--t-base); }
.ss-theme-cell:hover{ border-color:var(--primary); box-shadow:var(--shadow-md); transform:translateY(-2px); }
.ss-theme-cell.is-seed{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(var(--accent-rgb),.18); }
.ss-theme-swatch{ position:relative; height:7.5rem; display:flex; align-items:flex-end; justify-content:space-between; padding:1rem 1.2rem; box-shadow:inset 0 -1px 0 rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.18); }
.ss-theme-tag{ display:inline-flex; align-items:center; padding:.3rem .7rem; font-size:1.05rem; font-weight:800; letter-spacing:.1em; border-radius:var(--r-sm); text-transform:uppercase; backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); }
.ss-theme-contrast{ font-size:1.5rem; font-weight:800; opacity:.9; display:inline-flex; align-items:center; gap:.4rem; }
.ss-theme-contrast i{ font-size:1.3rem; }
.ss-theme-meta{ padding:1.2rem 1.4rem 1.4rem; display:flex; flex-direction:column; gap:.7rem; min-width:0; background:var(--white); }
.ss-theme-label{ font-weight:800; font-size:1.4rem; color:var(--text); display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin:0; }
.ss-theme-help{ font-size:1.2rem; color:var(--text-muted); line-height:1.5; }
.ss-theme-inputs{ display:flex; gap:.6rem; align-items:stretch; }
.ss-theme-color{ width:5rem; height:4.4rem; padding:0; border:1.5px solid var(--border); border-radius:var(--r-md); background:var(--white); cursor:pointer; flex-shrink:0; overflow:hidden; transition:border-color var(--t-base), box-shadow var(--t-base); }
.ss-theme-color:hover{ border-color:var(--primary); }
.ss-theme-color:focus{ border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-glow); outline:none; }
.ss-theme-color::-webkit-color-swatch-wrapper{ padding:4px; }
.ss-theme-color::-webkit-color-swatch{ border:none; border-radius:6px; }
.ss-theme-color::-moz-color-swatch{ border:none; border-radius:6px; }
.ss-theme-hex{ flex:1; min-width:0; padding:1rem 1.2rem; border:1.5px solid var(--border); border-radius:var(--r-md); font-family:'JetBrains Mono','SF Mono',Menlo,monospace; font-size:1.35rem; font-weight:600; color:var(--text); background:var(--white); height:4.4rem; line-height:1.2; box-sizing:border-box; transition:border-color var(--t-base), box-shadow var(--t-base); }
.ss-theme-hex:focus{ border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-glow); outline:none; }
.ss-theme-default{ font-size:1.15rem; color:var(--text-muted); display:flex; align-items:center; gap:.4rem; }
.ss-theme-default code{ font-family:'JetBrains Mono','SF Mono',Menlo,monospace; background:var(--gray-50); border:1px solid var(--border-light); padding:.15rem .55rem; border-radius:4px; font-size:1.15rem; color:var(--text-secondary); }
/* Group heading also appears in the live mockup; keep it minimal there. */
/* ---- Live mini-site preview (mock browser) ---- */
.ss-theme-preview{ margin-top:2rem; }
.ss-theme-preview-label{ display:flex; align-items:center; gap:.6rem; font-weight:700; color:var(--text-secondary); margin-bottom:.6rem; font-size:1.25rem; }
.ss-preview-live-dot{ width:.7rem; height:.7rem; border-radius:50%; background:var(--primary); box-shadow:0 0 0 0 rgba(var(--primary-rgb),.5); animation:ssLiveDot 1.8s ease-in-out infinite; }
@keyframes ssLiveDot{ 0%,100%{box-shadow:0 0 0 0 rgba(var(--primary-rgb),.55)} 70%{box-shadow:0 0 0 8px rgba(var(--primary-rgb),0)} }
.ss-mockup{ background:var(--white); border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden; box-shadow:var(--shadow-md); }
.ss-mockup-bar{ display:flex; align-items:center; gap:.5rem; padding:.6rem 1rem; background:var(--gray-100); border-bottom:1px solid var(--border); }
.ss-mockup-dot{ width:.9rem; height:.9rem; border-radius:50%; }
.ss-mockup-dot-r{ background:#ef4444; }
.ss-mockup-dot-a{ background:#f59e0b; }
.ss-mockup-dot-g{ background:#22c55e; }
.ss-mockup-url{ margin-left:.6rem; font-size:1.15rem; color:var(--text-muted); font-family:monospace; }
.ss-mockup-nav{ display:flex; align-items:center; justify-content:space-between; padding:.9rem 1.2rem; border-bottom:1px solid var(--border-light); background:var(--white); }
.ss-mockup-logo{ color:var(--primary); font-size:1.5rem; }
.ss-mockup-links{ display:flex; gap:.4rem; }
.ss-mockup-links i{ display:block; width:2.2rem; height:.5rem; background:var(--gray-200); border-radius:2px; }
.ss-mockup-cta{ padding:.4rem 1rem; background:var(--primary); color:#fff; border-radius:var(--r-sm); font-size:1.15rem; font-weight:700; }
.ss-mockup-hero{ padding:2.4rem 1.6rem; background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); color:#fff; text-align:center; }
.ss-mockup-hero h6{ font-family:var(--font-heading); font-size:1.8rem; color:#fff; margin:0 0 .4rem; }
.ss-mockup-hero p{ color:rgba(255,255,255,.85); font-size:1.2rem; margin:0 0 1rem; }
.ss-mockup-hero-btns{ display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; }
.ss-mockup-btn{ display:inline-block; padding:.45rem 1.1rem; border-radius:var(--r-sm); font-size:1.2rem; font-weight:700; }
.ss-mockup-btn-solid{ background:#fff; color:var(--primary); }
.ss-mockup-btn-ghost{ background:transparent; color:#fff; border:1px solid rgba(255,255,255,.6); }
.ss-mockup-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem; padding:1.2rem; background:var(--gray-50); }
.ss-mockup-card{ height:5rem; background:var(--white); border:1px solid var(--border-light); border-radius:var(--r-sm); }
.ss-mockup-footer{ padding:.8rem 1.2rem; text-align:center; background:var(--primary-deeper); color:#fff; font-size:1.15rem; }
.ss-mockup-footer i{ color:var(--accent); margin-right:.3rem; }
/* ---- Smart Colour Match (suggest) ---- */
.ss-suggest{ background:var(--gray-25); border:1.5px solid var(--border-light); border-radius:var(--r-lg); padding:1.6rem; margin-top:1.6rem; }
.ss-suggest-head{ display:flex; align-items:flex-start; gap:1rem; margin-bottom:1.2rem; }
.ss-suggest-head > i{ font-size:2rem; color:var(--primary); margin-top:.3rem; }
.ss-suggest-head h5{ font-size:1.5rem; margin:0 0 .3rem; color:var(--text); }
.ss-suggest-head h5 small{ font-weight:500; color:var(--text-muted); font-size:1.2rem; margin-left:.4rem; }
.ss-suggest-head p{ font-size:1.25rem; color:var(--text-secondary); margin:0; line-height:1.5; }
.ss-suggest-controls{ display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between; margin-bottom:1.2rem; }
.ss-suggest-schemes{ display:flex; gap:.4rem; flex-wrap:wrap; }
.ss-suggest-scheme{ display:inline-flex; align-items:center; gap:.5rem; padding:.55rem 1rem; background:var(--white); border:1px solid var(--border); border-radius:var(--r-full); font-size:1.2rem; font-weight:700; color:var(--text-secondary); cursor:pointer; transition:all var(--t-fast); font-family:inherit; }
.ss-suggest-scheme:hover{ border-color:var(--primary); color:var(--primary); }
.ss-suggest-scheme.is-on{ background:var(--primary); color:#fff; border-color:var(--primary); }
.ss-suggest-scheme.is-on i{ color:#fff; }
.ss-suggest-actions{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
.ss-suggest-live{ display:inline-flex; align-items:center; gap:.6rem; font-size:1.2rem; font-weight:600; color:var(--text-secondary); cursor:pointer; user-select:none; }
.ss-suggest-live input{ position:absolute; opacity:0; pointer-events:none; }
.ss-suggest-live-switch{ position:relative; display:inline-block; width:3.4rem; height:1.9rem; background:var(--gray-300); border-radius:999px; transition:background var(--t-fast); }
.ss-suggest-live-switch::after{ content:''; position:absolute; top:.15rem; left:.15rem; width:1.6rem; height:1.6rem; background:#fff; border-radius:50%; box-shadow:0 1px 3px rgba(0,0,0,.2); transition:transform var(--t-fast); }
.ss-suggest-live input:checked + .ss-suggest-live-switch{ background:var(--primary); }
.ss-suggest-live input:checked + .ss-suggest-live-switch::after{ transform:translateX(1.5rem); }
.ss-suggest-result{ display:flex; flex-wrap:wrap; gap:.6rem; min-height:0; margin-top:.8rem; }
.ss-suggest-chip{ display:inline-flex; align-items:center; gap:.6rem; padding:.45rem .8rem .45rem .45rem; background:var(--white); border:1.5px solid var(--border-light); border-radius:var(--r-full); cursor:pointer; font-family:inherit; font-size:1.2rem; transition:all var(--t-fast); }
.ss-suggest-chip:hover{ border-color:var(--primary); transform:translateY(-1px); box-shadow:var(--shadow-sm); }
.ss-suggest-chip .dot{ display:inline-block; width:1.8rem; height:1.8rem; border-radius:50%; border:1px solid rgba(0,0,0,.08); flex-shrink:0; }
.ss-suggest-chip .lbl{ display:inline-flex; align-items:center; gap:.4rem; }
.ss-suggest-chip .lbl b{ font-weight:800; color:var(--text); }
.ss-suggest-chip .lbl code{ font-family:monospace; font-size:1.1rem; color:var(--text-muted); }
.ss-suggest-chip.is-seed{ border-color:var(--accent); background:#fffbeb; }
.ss-suggest-msg{ margin:.6rem 0 0; font-size:1.2rem; color:var(--text-muted); }
.ss-suggest-msg.is-warn{ color:#b91c1c; }
/* ---- Theme presets popup ---- */
.ss-theme-preset{ display:flex; flex-direction:column; gap:.6rem; padding:1rem; border:1.5px solid var(--border-light); border-radius:var(--r-md); background:var(--white); cursor:pointer; transition:all var(--t-base); font-family:inherit; text-align:center; }
.ss-theme-preset:hover{ border-color:var(--primary); transform:translateY(-2px); box-shadow:var(--shadow-sm); }
.ss-theme-preset-name{ font-size:1.2rem; font-weight:800; color:var(--text); }
.ss-theme-preset-strip{ display:flex; height:2.2rem; border-radius:var(--r-sm); overflow:hidden; }
.ss-theme-preset-strip > span{ flex:1; }
/* ---- Toast notifications (used by ssToast() in admin pages) ---- */
.ss-toast{ display:flex; align-items:center; gap:.8rem; min-width:28rem; max-width:42rem; padding:1.2rem 1.4rem; background:var(--white); border-radius:var(--r-md); box-shadow:var(--shadow-xl); border-left:5px solid var(--primary); color:var(--text); font-size:1.4rem; position:relative; overflow:hidden; animation:ssToastIn .25s cubic-bezier(.34,1.56,.64,1); }
@keyframes ssToastIn{ from{opacity:0; transform:translateX(20px) scale(.95)} to{opacity:1; transform:translateX(0) scale(1)} }
.ss-toast .icon{ font-size:1.6rem; flex-shrink:0; }
.ss-toast .msg{ flex:1; min-width:0; line-height:1.4; }
.ss-toast .close{ background:transparent; border:none; color:var(--text-muted); font-size:1.4rem; cursor:pointer; padding:.2rem .4rem; line-height:1; border-radius:4px; flex-shrink:0; }
.ss-toast .close:hover{ background:var(--gray-100); color:var(--text); }
.ss-toast .progress{ position:absolute; left:0; bottom:0; height:3px; background:currentColor; opacity:.6; width:100%; transform-origin:left; animation:ssToastProgress linear forwards; }
.ss-toast.no-progress .progress{ display:none; }
.ss-toast.hiding{ animation:ssToastOut .36s ease forwards; }
@keyframes ssToastOut{ to{opacity:0; transform:translateX(20px) scale(.95)} }
.ss-toast.paused .progress{ animation-play-state:paused; }
.ss-toast-success{ border-left-color:#22c55e; color:#166534; }
.ss-toast-success .icon{ color:#22c55e; }
.ss-toast-success .progress{ color:#22c55e; }
.ss-toast-error{ border-left-color:#ef4444; color:#991b1b; }
.ss-toast-error .icon{ color:#ef4444; }
.ss-toast-error .progress{ color:#ef4444; }
.ss-toast-warning{ border-left-color:#f59e0b; color:#92400e; }
.ss-toast-warning .icon{ color:#f59e0b; }
.ss-toast-warning .progress{ color:#f59e0b; }
.ss-toast-info{ border-left-color:#3b82f6; color:#1e3a8a; }
.ss-toast-info .icon{ color:#3b82f6; }
.ss-toast-info .progress{ color:#3b82f6; }
@keyframes ssToastProgress{ from{transform:scaleX(1)} to{transform:scaleX(0)} }
/* ---- Gallery admin grid (used by admin_school_settings) ---- */
.gallery-admin-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(14rem, 1fr)); gap:1rem; }
.gallery-admin-empty{ grid-column:1/-1; text-align:center; padding:3rem 1.4rem; color:var(--text-muted); background:var(--gray-50); border:1px dashed var(--border); border-radius:var(--r-md); }
.gallery-admin-item{ position:relative; background:var(--white); border:1px solid var(--border-light); border-radius:var(--r-md); overflow:hidden; box-shadow:var(--shadow-card); }
.gallery-admin-item img{ display:block; width:100%; aspect-ratio:1/1; object-fit:cover; background:var(--gray-100); }
.gallery-admin-info{ display:flex; align-items:center; justify-content:space-between; padding:.5rem .7rem; font-size:1.2rem; color:var(--text-muted); }
.btn-gallery-del{ background:transparent; border:1px solid var(--border); color:var(--text-secondary); padding:.3rem .7rem; border-radius:var(--r-sm); font-size:1.1rem; cursor:pointer; font-family:inherit; }
.btn-gallery-del:hover{ background:#fee2e2; color:#991b1b; border-color:#fecaca; }
/* =====================================================
Fix 30: ID-CARD MODAL INFRASTRUCTURE
admin_generate_id_cards.php opens two modals
(template picker, student signature pad) using
.idc-modal-overlay / .idc-modal / .idc-modal-header
/ .idc-modal-body / .idc-modal-footer / .idc-modal-close
/ .idc-cancel-btn / .idc-dl-btn. None of these are
defined anywhere in the project, so the modals appear
as unstyled blocks of text. This block restores the
proper centred-overlay modal pattern. The body class
.idc-ov-open prevents background scroll while a
modal is open.
===================================================== */
.idc-modal-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.55); display:none; align-items:center; justify-content:center; z-index:9999; padding:2rem; backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); opacity:0; transition:opacity var(--t-base); }
.idc-modal-overlay.open{ display:flex; opacity:1; }
.idc-modal{ background:var(--white); border-radius:var(--r-xl); box-shadow:var(--shadow-2xl); max-width:56rem; width:100%; max-height:90vh; display:flex; flex-direction:column; overflow:hidden; transform:scale(.96); transition:transform var(--t-base); }
.idc-modal-overlay.open .idc-modal{ transform:scale(1); }
.idc-modal-header{ display:flex; align-items:center; justify-content:space-between; padding:1.4rem 2rem; border-bottom:1px solid var(--border-light); }
.idc-modal-header h3{ font-family:var(--font-heading); font-size:1.65rem; font-weight:800; color:var(--text); margin:0; }
.idc-modal-close{ background:transparent; border:none; color:var(--text-muted); font-size:2rem; line-height:1; cursor:pointer; width:3.2rem; height:3.2rem; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; }
.idc-modal-close:hover{ background:var(--gray-100); color:var(--text); }
.idc-modal-body{ padding:1.2rem; flex:1; }
.idc-modal-footer{ display:flex; gap:.8rem; justify-content:flex-end; padding:.8rem 1.2rem; border-top:1px solid var(--border-light); background:var(--gray-25); }
.idc-cancel-btn{ padding:.8rem 1.6rem; background:var(--white); border:1px solid var(--border); border-radius:var(--r-md); color:var(--text); font-weight:700; font-family:inherit; font-size:1.3rem; cursor:pointer; transition:all var(--t-fast); }
.idc-cancel-btn:hover{ background:var(--gray-100); border-color:var(--text-muted); }
.idc-dl-btn{ padding:.8rem 1.8rem; background:var(--primary); border:1px solid var(--primary); border-radius:var(--r-md); color:#fff; font-weight:800; font-family:inherit; font-size:1.3rem; cursor:pointer; box-shadow:0 4px 12px var(--primary-glow); transition:all var(--t-fast); }
.idc-dl-btn:hover{ background:var(--primary-dark); border-color:var(--primary-dark); transform:translateY(-1px); }
body.idc-ov-open{ overflow:hidden; }
/* ---- Template picker cards (stpl-*) — they get their preview colours
from the per-tpl-id rules already in admin_generate_id_cards.php,
so this just supplies the card chrome + typography. ---- */
.stpl-card{ cursor:pointer; transition:transform .15s,box-shadow .15s,border-color .15s; position:relative; background:#fff; border:1.5px solid var(--border-light); border-radius:1.2rem; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 2px 8px rgba(0,0,0,.06); }
.stpl-card:hover{ transform:translateY(-4px); box-shadow:0 14px 32px rgba(0,0,0,.18); border-color:var(--primary); }
.stpl-card.selected{ border-color:var(--primary) !important; box-shadow:0 0 0 3px rgba(var(--primary-rgb),.25),0 8px 22px rgba(var(--primary-rgb),.18) !important; background:#f0fdf5; }
.stpl-card-num{ position:absolute; top:.8rem; left:.8rem; z-index:3; display:inline-flex; align-items:center; justify-content:center; min-width:3rem; height:2.4rem; padding:0 .8rem; background:rgba(4,31,18,.82); color:#fff; font-weight:800; font-size:1.1rem; letter-spacing:.04em; border-radius:999px; }
.stpl-card-body{ padding:1rem 1.2rem 1.1rem; display:flex; flex-direction:column; gap:.4rem; }
.stpl-card-name{ font-family:var(--font-heading); font-size:1.4rem; font-weight:700; color:var(--text); margin:0; letter-spacing:-.01em; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.stpl-card-desc{ font-size:1.15rem; color:var(--text-secondary); margin:0; line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
/* =====================================================
Fix 13: ADMIN MANAGE CLASSES — form/field/filter
consistency. Targets the 4 distorted areas:
• psychomotor tab form fields
• gradekeys tab "Filter by Class:" row
• sessions tab Session Year + Active checkbox
• subjects tab Special (Yes/No) checkbox label
===================================================== */
/* Label with inline helper text — wrap nicely */
.pq-lbl{ line-height:1.4 !important; }
.pq-lbl .pq-helper{ display:inline !important; font-weight:500 !important; color:var(--text-muted) !important; font-size:1.15rem !important; margin-left:.4rem !important; font-style:italic !important; margin-top:0 !important; vertical-align:baseline !important; }
/* Form field inside .pq-form-section — keep input aligned at the bottom
of the column while label can take more height without distorting the
input row. */
.pq-form-section .pq-field > .pq-lbl{ min-height:1.6em; }
.pq-form-section .pq-field{ align-self:stretch !important; }
.pq-form-section .pq-field > .pq-inp,
.pq-form-section .pq-field > .pq-sel{ align-self:flex-end; }
/* Checkbox field that sits alone on a row — give it a tidy width */
.pq-form-section .pq-check-field{ flex:1 1 100% !important; }
.pq-form-section .pq-check-field .pq-check-label{ padding:.4rem 0 !important; }
/* Filter row (grade keys / psychomotor "Filter by Class:") */
.pq-filter-row{ align-items:center !important; }
.pq-filter-row .pq-filter-label{ white-space:nowrap !important; }
.pq-filter-row .pq-filter-right{ justify-content:flex-end !important; }
.pq-filter-row .pq-filter-right .pq-sel{ min-width:18rem !important; }
/* Modal form — match the same .pq-field / .pq-lbl structure used in the
page body so the Session Year + Active row renders consistently */
.pq-mb .pq-lbl{ margin-bottom:.6rem !important; }
.pq-mb .pq-check-label{ display:inline-flex !important; align-items:center !important; gap:.9rem !important; flex-direction:row !important; cursor:pointer !important; font-weight:600 !important; color:var(--text) !important; line-height:1.4 !important; padding:.4rem 0 !important; }
.pq-mb .pq-check-label input[type="checkbox"]{ flex-shrink:0 !important; width:1.7rem !important; height:1.7rem !important; accent-color:var(--primary) !important; margin:0 !important; }
.pq-mb .pq-check-label > span{ display:inline-block !important; flex:1 !important; font-size:1.3rem !important; }
/* Long checkbox labels (e.g. "Special (Yes/No) — tick for non-scoring assessment items")
should sit beside the checkbox with sensible wrapping */
.pq-check-label{ display:inline-flex !important; align-items:flex-start !important; gap:.9rem !important; flex-direction:row !important; cursor:pointer !important; font-weight:600 !important; color:var(--text) !important; line-height:1.4 !important; padding:.4rem 0 !important; max-width:100%; }
.pq-check-label input[type="checkbox"]{ flex-shrink:0 !important; width:1.7rem !important; height:1.7rem !important; accent-color:var(--primary) !important; margin:.15rem 0 0 0 !important; }
.pq-check-label > span{ display:inline-block !important; flex:1 1 auto !important; font-size:1.3rem !important; min-width:0; word-break:normal; }
/* Form sections inside modals — give fields consistent spacing */
.pq-mb .pq-field + .pq-field{ margin-top:1.4rem !important; }
.pq-mb .pq-field{ margin-bottom:0 !important; }
/* =====================================================
Fix 14: YEARBOOK — complete styling framework
Pages: yearbook_form.php (admin entry), yearbook.php (flipbook viewer).
Both reference ~80 distinct bespoke classes (.yb-page, .form-card,
.site-header, .entry-card, .book-container, .modern-page, etc.) that
never had any CSS. Restored below using the same theme tokens so
the look matches the rest of the admin.
===================================================== */
/* ---- Page canvas ---- */
.yb-page{
background:linear-gradient(135deg,var(--bg) 0%, color-mix(in srgb, var(--primary) 4%, var(--bg)) 100%);
min-height:100vh;
position:relative;
overflow-x:hidden;
padding:2.4rem 0 5rem;
font-family:var(--font-body);
color:var(--text);
}
/* yearbook.php (viewer) — uses the DEEPER header/footer variable
for its page background, exactly like:
.topbar { background: var(--primary-deeper) } — stylenew.css:378
.ed_footer_top { background: linear-gradient(180deg, var(--primary-deeper) → var(--primary-dark)) } — 1668
.ed_footer_bottom { background: var(--primary-deeper) } — 1955
This is NOT plain white var(--bg); it is the dark brand shell so the
yearbook feels embedded in the site chrome. All stops use var(--*)
tokens from stylenew.css :root, overridden by render_theme_css(), so
changing School Settings → Theme recolours header, footer AND yearbook
together with zero hardcoded green. */
body.yb-page{
background:
radial-gradient(ellipse at 15% 0%, color-mix(in srgb, var(--gold) 14%, transparent) 0%, transparent 45%),
radial-gradient(ellipse at 85% 100%, rgba(var(--primary-rgb), .10) 0%, transparent 50%),
radial-gradient(ellipse at 50% 50%, rgba(var(--accent-rgb), .06) 0%, transparent 60%),
linear-gradient(180deg, var(--primary-deeper) 0%, var(--primary-dark) 100%);
background-attachment:fixed;
color:var(--white);
overflow-x:visible !important;
}
body.yb-page .particles{ z-index:0; }
body.yb-page #app-container{ color:var(--white); }
/* App container — no overflow so position:sticky on header-controls works.
Body must be the scroll container (not #app-container). */
body.yb-page #app-container{
position:static !important;
overflow:visible !important;
padding-top:0 !important;
margin-top:0 !important;
}
/* ---- Floating decorative particles (yearbook_form background) ---- */
.yb-particles{ position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden; }
.yb-p{ position:absolute; border-radius:50%; pointer-events:none; }
.yb-p--square{ border-radius:2px; }
.yb-p--ring{ background:transparent !important; border:2px solid currentColor; }
.yb-p--star{ background:transparent !important; clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); }
.yb-p--gold{ background:var(--gold); }
.yb-p--green{ background:var(--primary); }
.yb-p--coral{ background:#ee5a24; }
.yb-p--ivory{ background:#f8f5ec; }
.yb-p--ring-gold{ color:var(--gold); }
.yb-p--ring-green{ color:var(--primary); }
.yb-p--star-gold{ color:var(--gold); }
.yb-p--star-coral{ color:#ee5a24; }
@keyframes ybFloat{
0% { transform:translateY(0) rotate(0deg); opacity:.35; }
50% { transform:translateY(-32px) rotate(180deg); opacity:.7; }
100% { transform:translateY(0) rotate(360deg); opacity:.35; }
}
/* Big background year number */
.deco-year{
position:fixed;
right:-4rem;
bottom:-6rem;
font-family:var(--font-heading);
font-weight:900;
font-size:42rem;
line-height:.85;
color:var(--primary);
opacity:.04;
pointer-events:none;
z-index:0;
user-select:none;
letter-spacing:-.04em;
}
/* ---- Page wrapper ---- */
.page-wrap{ position:relative; z-index:1; max-width:84rem; margin:0 auto; padding:0 2rem; }
/* ---- Site header ---- */
.site-header{
text-align:center;
padding:2rem 1rem 2.6rem;
margin-bottom:2.4rem;
position:relative;
}
.header-badge{
display:inline-block;
background:var(--primary);
color:var(--white);
font-family:var(--font-heading);
font-size:1.1rem;
font-weight:800;
text-transform:uppercase;
letter-spacing:.16em;
padding:.55rem 1.4rem;
border-radius:var(--r-full);
margin-bottom:1.2rem;
box-shadow:0 6px 16px rgba(var(--primary-rgb),.35);
}
.site-title{
font-family:var(--font-heading);
font-size:clamp(3.2rem,5.5vw,4.6rem);
font-weight:900;
color:var(--text);
margin:0 0 .8rem;
letter-spacing:-.025em;
line-height:1.05;
}
.site-title span{
background:linear-gradient(135deg,var(--gold) 0%, var(--gold-bright) 100%);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
font-style:italic;
}
.site-subtitle{
font-size:1.5rem;
color:var(--text-muted);
margin:0 auto;
max-width:54rem;
line-height:1.55;
}
.header-line{
width:7rem;
height:4px;
background:linear-gradient(90deg,var(--primary) 0%, var(--gold) 100%);
border-radius:4px;
margin:1.4rem auto 0;
}
/* ---- Form card ---- */
.form-card{
background:var(--white);
border:1px solid var(--border-light);
border-radius:var(--r-2xl);
box-shadow:var(--shadow-xl);
padding:3rem 3rem 2.6rem;
margin-bottom:3rem;
position:relative;
overflow:hidden;
}
.form-card::before{
content:'';
position:absolute;
top:0; left:0; right:0;
height:5px;
background:linear-gradient(90deg,var(--primary) 0%, var(--gold) 100%);
}
/* ---- Section labels ---- */
.section-label{
display:flex;
align-items:center;
gap:.8rem;
font-family:var(--font-heading);
font-size:1.5rem;
font-weight:800;
color:var(--text);
text-transform:uppercase;
letter-spacing:.06em;
margin:0 0 1.4rem;
padding-bottom:1rem;
border-bottom:2px solid var(--border-light);
}
.section-label::before{
content:'';
width:5px;
height:2rem;
background:linear-gradient(180deg,var(--primary) 0%, var(--gold) 100%);
border-radius:3px;
}
.section-label:not(:first-child){ margin-top:2.4rem; }
.section-label + .field-grid,
.section-label + .field-grid.single{ margin-bottom:1rem; }
/* ---- Field grids ---- */
.field-grid{
display:grid;
grid-template-columns:repeat(2, minmax(0,1fr));
gap:1.6rem 1.8rem;
margin-bottom:1rem;
}
.field-grid.single{ grid-template-columns:1fr; }
.field-group{ display:flex; flex-direction:column; gap:.5rem; min-width:0; }
.field-group label{
font-family:var(--font-heading);
font-size:1.3rem;
font-weight:700;
color:var(--text);
display:flex;
align-items:center;
gap:.5rem;
}
.field-group .req{
color:#dc2626;
font-weight:800;
font-size:1.3rem;
}
.field-hint{
font-size:1.2rem;
color:var(--text-muted);
font-style:italic;
font-weight:500;
}
.field-group input[type="text"],
.field-group input[type="number"],
.field-group input[type="email"],
.field-group select,
.field-group textarea{
width:100%;
padding:1.1rem 1.4rem;
border:1.8px solid var(--border);
border-radius:var(--r-md);
background:var(--white);
font-family:var(--font-body);
font-size:1.4rem;
font-weight:500;
color:var(--text);
transition:border-color var(--t-base), box-shadow var(--t-base);
outline:none;
line-height:1.4;
}
.field-group input:focus,
.field-group select:focus,
.field-group textarea:focus{
border-color:var(--primary);
box-shadow:0 0 0 4px var(--primary-glow);
}
.field-group textarea{ resize:vertical; min-height:8.4rem; }
.field-group input::placeholder,
.field-group textarea::placeholder{ color:var(--text-muted); opacity:.65; }
.char-count{
text-align:right;
font-size:1.15rem;
color:var(--text-muted);
font-weight:600;
margin-top:.2rem;
}
.form-divider{
border:none;
height:1px;
background:linear-gradient(90deg,transparent,var(--border-light),transparent);
margin:2.4rem 0;
}
/* ---- Photo upload zone ---- */
.photo-upload-zone{
position:relative;
display:flex;
align-items:center;
justify-content:center;
width:100%;
min-height:22rem;
padding:2rem;
background:var(--bg);
border:2.5px dashed var(--border);
border-radius:var(--r-lg);
cursor:pointer;
transition:all var(--t-base);
overflow:hidden;
}
.photo-upload-zone:hover{
border-color:var(--primary);
background:var(--primary-mist);
}
.photo-upload-zone.has-image{
border-style:solid;
border-color:var(--primary);
background:var(--white);
min-height:auto;
padding:1rem;
}
.photo-upload-zone input[type="file"]{
position:absolute;
inset:0;
width:100%;
height:100%;
opacity:0;
cursor:pointer;
z-index:2;
}
.photo-upload-zone .photo-preview{
display:none;
max-width:100%;
max-height:32rem;
border-radius:var(--r-md);
box-shadow:var(--shadow-md);
position:relative;
z-index:1;
}
.photo-upload-zone.has-image .photo-preview{ display:block; }
.photo-upload-zone.has-image .upload-placeholder{ display:none; }
.upload-placeholder{
text-align:center;
color:var(--text-muted);
position:relative;
z-index:1;
}
.upload-icon{ font-size:4.4rem; margin-bottom:.8rem; }
.upload-text{ font-size:1.4rem; line-height:1.6; color:var(--text-secondary); }
.upload-text strong{ color:var(--primary); font-weight:700; }
.compress-info{
display:none;
margin-top:1rem;
padding:.8rem 1.2rem;
background:var(--primary-mist);
border:1px solid var(--primary);
border-radius:var(--r-sm);
font-size:1.25rem;
font-weight:600;
color:var(--primary-dark);
text-align:center;
}
.upload-progress{
display:none;
margin-top:1rem;
height:.8rem;
background:var(--gray-100);
border-radius:var(--r-full);
overflow:hidden;
border:1px solid var(--border-light);
}
.upload-progress-bar{
height:100%;
width:0%;
background:linear-gradient(90deg,var(--primary) 0%, var(--gold) 100%);
border-radius:var(--r-full);
transition:width .2s linear;
}
/* ---- Modal photo wrapper (edit modal) ---- */
.modal-photo-wrap{
display:flex;
gap:1.6rem;
align-items:center;
padding:1.4rem;
background:var(--bg);
border:1px solid var(--border-light);
border-radius:var(--r-md);
margin-bottom:1.4rem;
}
.modal-photo-current{
width:9rem;
height:9rem;
border-radius:var(--r-md);
object-fit:cover;
border:2px solid var(--border-light);
box-shadow:var(--shadow-sm);
}
.modal-photo-info{
font-size:1.3rem;
line-height:1.7;
color:var(--text-secondary);
}
/* ---- Submit area ---- */
.submit-area{
display:flex;
gap:1.2rem;
justify-content:flex-end;
flex-wrap:wrap;
margin-top:2.4rem;
padding-top:2rem;
border-top:2px solid var(--border-light);
}
.btn-submit{
display:inline-flex;
align-items:center;
gap:.7rem;
padding:1.3rem 2.6rem;
font-family:var(--font-heading);
font-size:1.4rem;
font-weight:800;
letter-spacing:.04em;
text-transform:uppercase;
background:linear-gradient(135deg,var(--primary) 0%, var(--primary-dark) 100%);
color:var(--white) !important;
border:none;
border-radius:var(--r-md);
cursor:pointer;
box-shadow:0 6px 18px rgba(var(--primary-rgb),.35);
transition:all var(--t-base);
}
.btn-submit:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(var(--primary-rgb),.45); }
.btn-submit:disabled{ opacity:.6; cursor:not-allowed; transform:none; }
.btn-reset{
display:inline-flex;
align-items:center;
gap:.7rem;
padding:1.3rem 2.4rem;
font-family:var(--font-heading);
font-size:1.4rem;
font-weight:700;
background:var(--white);
color:var(--text) !important;
border:2px solid var(--border);
border-radius:var(--r-md);
cursor:pointer;
transition:all var(--t-base);
}
.btn-reset:hover{ background:var(--gray-100); border-color:var(--text-muted); }
.spinner{
display:inline-block;
width:1.4rem;
height:1.4rem;
border:2.5px solid rgba(255,255,255,.3);
border-top-color:var(--white);
border-radius:50%;
animation:ybSpin .8s linear infinite;
}
@keyframes ybSpin{ to{ transform:rotate(360deg); } }
/* ---- Recent entries ---- */
.entries-section{
background:var(--white);
border:1px solid var(--border-light);
border-radius:var(--r-2xl);
box-shadow:var(--shadow-card);
padding:2.4rem 2.6rem;
margin-bottom:2rem;
}
.entries-head{
display:flex;
align-items:flex-end;
justify-content:space-between;
flex-wrap:wrap;
gap:1.4rem;
margin-bottom:2rem;
padding-bottom:1.6rem;
border-bottom:2px solid var(--border-light);
}
.entries-title{
font-family:var(--font-heading);
font-size:2rem;
font-weight:800;
color:var(--text);
margin:0 0 .4rem;
letter-spacing:-.015em;
}
.entries-subtitle{ font-size:1.3rem; color:var(--text-muted); margin:0; }
.entries-meta{
display:flex;
align-items:baseline;
gap:.6rem;
background:var(--primary-mist);
border:1px solid var(--primary);
border-radius:var(--r-md);
padding:.7rem 1.4rem;
}
.entries-count{
font-family:var(--font-heading);
font-size:2.4rem;
font-weight:900;
color:var(--primary);
line-height:1;
}
.entries-count-label{ font-size:1.2rem; color:var(--text-secondary); font-weight:600; text-transform:uppercase; letter-spacing:.06em; }
.entries-grid{
display:grid;
grid-template-columns:repeat(auto-fill, minmax(26rem, 1fr));
gap:1.6rem;
}
.entry-card{
background:var(--white);
border:1px solid var(--border-light);
border-radius:var(--r-lg);
box-shadow:var(--shadow-sm);
overflow:hidden;
display:flex;
flex-direction:column;
transition:all var(--t-base);
position:relative;
}
.entry-card::before{
content:'';
position:absolute;
top:0; left:0; right:0;
height:3px;
background:linear-gradient(90deg,var(--primary) 0%, var(--gold) 100%);
opacity:0;
transition:opacity var(--t-base);
}
.entry-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--primary); }
.entry-card:hover::before{ opacity:1; }
.entry-card.entry-empty{
grid-column:1/-1;
text-align:center;
padding:4rem 2rem;
background:var(--bg);
border:2px dashed var(--border);
}
.entry-empty-icon{ font-size:4.2rem; margin-bottom:.8rem; opacity:.7; }
.entry-empty-text{ color:var(--text-muted); font-size:1.4rem; font-style:italic; }
.entry-photo-wrap{
position:relative;
width:100%;
padding-top:75%;
background:var(--bg);
overflow:hidden;
}
.entry-photo{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
display:flex;
align-items:center;
justify-content:center;
}
.entry-photo--placeholder{
background:linear-gradient(135deg,var(--primary-mist) 0%, color-mix(in srgb, var(--primary) 14%, var(--white)) 100%);
font-size:5rem;
color:var(--primary);
}
.entry-year{
position:absolute;
top:.8rem;
right:.8rem;
background:rgba(0,0,0,.65);
color:var(--white);
font-family:var(--font-heading);
font-size:1.2rem;
font-weight:800;
padding:.4rem .9rem;
border-radius:var(--r-full);
letter-spacing:.06em;
backdrop-filter:blur(4px);
}
.entry-body{
padding:1.4rem 1.6rem 1.2rem;
flex:1;
display:flex;
flex-direction:column;
gap:.5rem;
}
.entry-name{
font-family:var(--font-heading);
font-size:1.5rem;
font-weight:800;
color:var(--text);
line-height:1.3;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.entry-nickname{
font-size:1.25rem;
color:var(--text-muted);
font-style:italic;
line-height:1.4;
}
.entry-meta{
display:flex;
flex-wrap:wrap;
gap:.6rem;
margin-top:.4rem;
}
.entry-meta-item{
display:inline-flex;
align-items:center;
gap:.4rem;
padding:.35rem .8rem;
background:var(--bg);
border:1px solid var(--border-light);
border-radius:var(--r-full);
font-size:1.15rem;
font-weight:600;
color:var(--text-secondary);
}
.entry-meta-item i{ color:var(--primary); font-size:1.05rem; }
.entry-actions{
display:flex;
gap:.6rem;
padding:1rem 1.4rem;
border-top:1px solid var(--border-light);
background:var(--bg);
}
.entry-action-btn{
flex:1;
display:inline-flex;
align-items:center;
justify-content:center;
gap:.5rem;
padding:.7rem 1rem;
border:1.5px solid var(--border);
border-radius:var(--r-sm);
font-family:var(--font-heading);
font-size:1.2rem;
font-weight:700;
background:var(--white);
color:var(--text) !important;
cursor:pointer;
transition:all var(--t-fast);
}
.entry-action-edit{ color:var(--primary) !important; border-color:var(--primary); }
.entry-action-edit:hover{ background:var(--primary); color:var(--white) !important; }
.entry-action-delete{ color:#dc2626 !important; border-color:#dc2626; flex:0 0 auto; padding:.7rem 1rem; }
.entry-action-delete:hover{ background:#dc2626; color:var(--white) !important; }
/* ---- Edit modal ---- */
.modal-overlay{
position:fixed;
inset:0;
background:rgba(4,31,18,.72);
backdrop-filter:blur(4px);
-webkit-backdrop-filter:blur(4px);
display:none;
align-items:flex-start;
justify-content:center;
padding:3rem 2rem;
z-index:9999;
overflow-y:auto;
}
.modal-overlay.active{ display:flex; }
.modal-box{
background:var(--white);
border-radius:var(--r-2xl);
box-shadow:var(--shadow-2xl);
max-width:64rem;
width:100%;
max-height:calc(100vh - 6rem);
display:flex;
flex-direction:column;
overflow:hidden;
animation:modalPop .35s cubic-bezier(.34,1.56,.64,1);
}
@keyframes modalPop{ from{ opacity:0; transform:translateY(2rem) scale(.96); } to{ opacity:1; transform:translateY(0) scale(1); } }
.modal-header{
display:flex;
align-items:center;
justify-content:space-between;
padding:2rem 2.4rem;
background:linear-gradient(135deg,var(--primary) 0%, var(--primary-dark) 100%);
color:var(--white);
position:relative;
}
.modal-title{
font-family:var(--font-heading);
font-size:1.9rem;
font-weight:800;
color:var(--white);
letter-spacing:-.01em;
}
.modal-title span{ color:var(--gold); font-style:italic; }
.modal-close{
width:3.6rem;
height:3.6rem;
background:rgba(255,255,255,.16);
border:1px solid rgba(255,255,255,.24);
color:var(--white);
border-radius:50%;
font-size:1.8rem;
cursor:pointer;
display:inline-flex;
align-items:center;
justify-content:center;
line-height:1;
transition:all var(--t-base);
}
.modal-close:hover{ background:rgba(255,255,255,.28); transform:rotate(90deg); }
.modal-body{ padding:2.4rem 2.4rem 1.4rem; overflow-y:auto; flex:1; }
.modal-footer{
display:flex;
gap:1rem;
justify-content:flex-end;
padding:1.4rem 2.4rem;
background:var(--bg);
border-top:1px solid var(--border-light);
}
.btn-cancel-edit,
.btn-save-edit{
display:inline-flex;
align-items:center;
gap:.6rem;
padding:1.1rem 2rem;
font-family:var(--font-heading);
font-size:1.35rem;
font-weight:700;
border-radius:var(--r-sm);
cursor:pointer;
border:none;
transition:all var(--t-base);
}
.btn-cancel-edit{ background:var(--white); color:var(--text) !important; border:1.5px solid var(--border); }
.btn-cancel-edit:hover{ background:var(--gray-100); }
.btn-save-edit{ background:var(--primary); color:var(--white) !important; box-shadow:0 4px 14px rgba(var(--primary-rgb),.35); }
.btn-save-edit:hover{ background:var(--primary-dark); transform:translateY(-1px); }
.btn-save-edit:disabled{ opacity:.6; cursor:not-allowed; transform:none; }
/* ---- Toast notifications ---- */
#toast-container{
position:fixed;
top:2rem;
right:2rem;
z-index:99999;
display:flex;
flex-direction:column;
gap:.8rem;
pointer-events:none;
}
.toast{
display:flex;
align-items:flex-start;
gap:1.2rem;
min-width:32rem;
max-width:42rem;
padding:1.4rem 1.6rem;
background:var(--white);
border:1px solid var(--border-light);
border-radius:var(--r-md);
box-shadow:var(--shadow-xl);
pointer-events:auto;
animation:toastSlide .35s cubic-bezier(.34,1.56,.64,1);
border-left:5px solid var(--primary);
}
.toast.success{ border-left-color:#15803d; }
.toast.error{ border-left-color:#dc2626; }
.toast.info{ border-left-color:#2563eb; }
@keyframes toastSlide{ from{ opacity:0; transform:translateX(3rem); } to{ opacity:1; transform:translateX(0); } }
.toast-icon{
font-size:2rem;
flex-shrink:0;
width:3.4rem;
height:3.4rem;
display:inline-flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:var(--bg);
}
.toast.success .toast-icon{ background:#dcfce7; }
.toast.error .toast-icon{ background:#fee2e2; }
.toast-body{ flex:1; min-width:0; }
.toast-title{ font-family:var(--font-heading); font-weight:700; font-size:1.4rem; color:var(--text); margin-bottom:.2rem; }
.toast-msg{ font-size:1.3rem; color:var(--text-secondary); line-height:1.5; }
/* =====================================================
YEARBOOK.PHP — flipbook viewer
===================================================== */
/* Loading screen — uses the same DEEPER footer/header gradient as
the yearbook page body so the splash is not a hardcoded green. */
#loading-screen{
position:fixed;
inset:0;
background:linear-gradient(180deg, var(--primary-deeper) 0%, var(--primary-dark) 100%);
z-index:99999;
display:flex;
align-items:center;
justify-content:center;
}
#loading-screen.hidden{ display:none; }
.loading-content{ text-align:center; color:var(--white); }
.loader{
width:6rem;
height:6rem;
border:.5rem solid rgba(255,255,255,.18);
border-top-color:var(--gold);
border-radius:50%;
animation:loaderSpin 1s linear infinite;
margin:0 auto 1.4rem;
}
@keyframes loaderSpin{ to{ transform:rotate(360deg); } }
.loading-content p{ font-family:var(--font-heading); font-size:1.8rem; font-weight:700; margin:0 0 .4rem; color:var(--white); }
.loading-content small{ font-size:1.3rem; color:rgba(255,255,255,.7); }
/* Floating particles in viewer */
.particles{ position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden; }
.particles .particle{ position:absolute; background:var(--gold); border-radius:50%; box-shadow:0 0 8px rgba(var(--gold-rgb),.4); }
/* App container */
#app-container{ position:relative; z-index:1; min-height:100vh; padding:0 1.4rem 3rem; padding-top:0 !important; }
/* Header controls — top nav bar for the yearbook viewer.
FIRST-PRINCIPLES FIX: previously hardcoded to
linear-gradient(135deg, var(--primary)→var(--primary-dark)) which stayed
green even after theme change. It must be pixel-identical to
header.inc.php's .main-header (stylenew.css:453 + override 6528):
background: rgba(255,255,255,.96) + backdrop blur, border, shadow
and like .topbar it carries the theme's accent via a top border that
mirrors .ed_footer_top { border-top:4px solid var(--accent) }.
All tokens resolve via render_theme_css() so the bar re-skins with the
school's palette. */
.header-controls{
position:fixed;
top:0;
left:0;
right:0;
z-index:1000;
display:flex;
align-items:center;
justify-content:space-between;
flex-wrap:wrap;
gap:1rem;
padding:1.2rem 1.6rem;
margin:0;
background:rgba(255,255,255,.96) !important;
backdrop-filter:blur(20px) saturate(180%);
-webkit-backdrop-filter:blur(20px) saturate(180%);
border-radius:0;
box-shadow:0 1px 0 rgba(0,0,0,.04), 0 4px 40px rgba(0,0,0,.05) !important;
border:none;
border-bottom:1px solid rgba(0,0,0,.04) !important;
border-top:2px solid var(--accent) !important;
}
body.yb-page #app-container{ padding-top:5.2rem !important; }
.control-group{ display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; }
/* Controls on WHITE nav bar — must be visible on var(--white) like
header .nav-link / .btn-admissions: subtle border, hover to primary. */
.control-btn{
display:inline-flex;
align-items:center;
gap:.6rem;
padding:.8rem 1.4rem;
background:var(--white);
border:1.5px solid var(--border);
color:var(--text-secondary);
border-radius:var(--r-full);
font-family:var(--font-heading);
font-size:1.25rem;
font-weight:700;
cursor:pointer;
transition:all var(--t-fast);
box-shadow:var(--shadow-xs);
}
.control-btn:hover{ background:var(--primary-mist); color:var(--primary); border-color:var(--primary); transform:translateY(-1px); }
.control-btn.active{ background:var(--primary); color:var(--white); border-color:var(--primary); box-shadow:0 4px 14px var(--primary-glow); }
.control-btn svg{ flex-shrink:0; }
.btn-label{ white-space:nowrap; }
.year-filter-badge{
display:inline-flex;
align-items:center;
gap:.7rem;
padding:.7rem 1.4rem;
background:var(--primary-mist);
border:1px solid rgba(var(--primary-rgb), .14);
border-radius:var(--r-full);
color:var(--primary-dark);
font-family:var(--font-heading);
font-size:1.25rem;
font-weight:700;
}
.yb-dot{
width:.9rem;
height:.9rem;
border-radius:50%;
background:var(--primary);
box-shadow:0 0 12px rgba(var(--primary-rgb), .35);
animation:ybPulse 1.6s ease-in-out infinite;
}
@keyframes ybPulse{ 0%,100%{ opacity:.6; transform:scale(1); } 50%{ opacity:1; transform:scale(1.25); } }
/* Book container */
.book-container{
position:relative;
perspective:2500px;
margin:6rem auto 0;
display:flex;
align-items:center;
justify-content:center;
min-height:70vh;
}
#flipbook{
position:relative;
transform-style:preserve-3d;
}
.page{
background:var(--white);
box-shadow:0 20px 60px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.15);
overflow:hidden;
position:relative;
display:flex;
align-items:center;
justify-content:center;
}
.page-content{
position:relative;
width:100%;
height:100%;
padding:3rem;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
z-index:2;
}
.animated-bg{
position:absolute;
inset:0;
background:linear-gradient(135deg,var(--primary) 0%, var(--primary-dark) 70%, var(--primary-deeper) 100%);
z-index:0;
}
.glass-overlay{
position:absolute;
inset:0;
background:rgba(255,255,255,.04);
backdrop-filter:blur(1px);
z-index:1;
}
/* Cover page */
.cover-page{ background:linear-gradient(135deg,var(--primary) 0%, var(--primary-dark) 100%); color:var(--white); }
.cover-page.modern-cover{ position:relative; }
.cover-decorative-bg{
position:absolute;
inset:0;
background:
radial-gradient(circle at 20% 20%, rgba(var(--gold-rgb),.18) 0%, transparent 40%),
radial-gradient(circle at 80% 80%, rgba(255,255,255,.06) 0%, transparent 40%);
z-index:1;
}
.cover-image{
width:18rem;
height:18rem;
border-radius:50%;
object-fit:cover;
border:5px solid var(--gold);
box-shadow:0 12px 32px rgba(0,0,0,.4);
margin-bottom:2rem;
position:relative;
z-index:2;
}
.circular-image{ border-radius:50%; }
.cover-title{
font-family:var(--font-heading);
font-size:clamp(3rem,5vw,4.2rem);
font-weight:900;
color:var(--white);
margin:0 0 1rem;
letter-spacing:-.02em;
line-height:1.1;
position:relative;
z-index:2;
text-shadow:0 2px 14px rgba(0,0,0,.3);
}
.cover-subtitle{
font-family:var(--font-heading);
font-size:1.6rem;
font-weight:600;
color:var(--gold);
margin:0;
text-transform:uppercase;
letter-spacing:.16em;
position:relative;
z-index:2;
}
/* Modern page content */
.modern-page{ background:var(--white); }
.title-container{ margin-bottom:2rem; text-align:center; }
.page-title{
font-family:var(--font-heading);
font-size:clamp(2rem,3.6vw,2.8rem);
font-weight:800;
color:var(--text);
margin:0 0 .8rem;
letter-spacing:-.015em;
line-height:1.2;
}
.title-underline{
width:5rem;
height:3px;
background:linear-gradient(90deg,var(--primary) 0%, var(--gold) 100%);
border-radius:3px;
margin:0 auto;
}
.image-container{ margin-bottom:1.6rem; }
.image-wrapper{
position:relative;
border-radius:var(--r-lg);
overflow:hidden;
box-shadow:var(--shadow-md);
}
.page-image{
width:100%;
height:auto;
display:block;
}
.image-overlay{
position:absolute;
inset:0;
background:linear-gradient(180deg,transparent 60%,rgba(0,0,0,.15) 100%);
pointer-events:none;
}
.text-container{ max-width:46rem; }
.text-container.full-height{ flex:1; display:flex; align-items:center; justify-content:center; }
.page-text{
font-size:1.5rem;
line-height:1.75;
color:var(--text-secondary);
margin:0;
}
.page-number{
position:absolute;
bottom:1.4rem;
right:1.4rem;
font-family:var(--font-heading);
font-size:1.2rem;
font-weight:700;
color:var(--text-muted);
z-index:3;
}
.modern-page-number{ color:var(--white); mix-blend-mode:difference; }
.decorative-circle{
position:absolute;
border-radius:50%;
pointer-events:none;
z-index:0;
}
.decorative-circle.top-right{
top:-3rem;
right:-3rem;
width:14rem;
height:14rem;
background:rgba(var(--primary-rgb),.08);
}
.decorative-circle.bottom-left{
bottom:-3rem;
left:-3rem;
width:10rem;
height:10rem;
background:rgba(var(--gold-rgb),.12);
}
/* Nav controls — bottom flip bar, same dark gradient as the top bar,
matching footer.inc.php (.ed_footer_bottom = var(--primary-deeper))
and header topbar for a unified look. */
.nav-controls{
position:fixed;
bottom:2rem;
left:50%;
transform:translateX(-50%);
display:flex;
align-items:center;
gap:1.4rem;
padding:.8rem 1.4rem;
background:linear-gradient(180deg,var(--primary-deeper) 0%, var(--primary-dark) 100%);
border-radius:var(--r-full);
box-shadow:var(--shadow-xl);
border:1px solid rgba(255,255,255,.08);
z-index:50;
backdrop-filter:blur(8px);
}
.nav-btn{
width:4rem;
height:4rem;
display:inline-flex;
align-items:center;
justify-content:center;
background:rgba(255,255,255,.14);
border:1px solid rgba(255,255,255,.22);
color:var(--white);
border-radius:50%;
cursor:pointer;
transition:all var(--t-fast);
}
.nav-btn:hover{ background:var(--white); color:var(--primary); transform:scale(1.06); }
.page-counter{
font-family:var(--font-heading);
font-weight:700;
font-size:1.3rem;
color:var(--white);
padding:0 .8rem;
min-width:7rem;
text-align:center;
}
/* Quality buttons (in modal) */
.quality-btn{
padding:.8rem 1.6rem;
border:1.5px solid var(--border);
border-radius:var(--r-sm);
background:var(--white);
color:var(--text);
font-family:var(--font-heading);
font-weight:700;
font-size:1.25rem;
cursor:pointer;
transition:all var(--t-fast);
}
.quality-btn:hover{ border-color:var(--primary); color:var(--primary); }
/* Mode transition overlay */
.mode-transition-overlay{
position:fixed;
inset:0;
background:rgba(4,31,18,.7);
display:flex;
align-items:center;
justify-content:center;
z-index:9000;
backdrop-filter:blur(2px);
}
.transition-spinner{
width:5rem;
height:5rem;
border:.4rem solid rgba(255,255,255,.18);
border-top-color:var(--gold);
border-radius:50%;
animation:loaderSpin .8s linear infinite;
}
/* Swipe blocked message */
.swipe-blocked-message{
position:fixed;
top:50%;
left:50%;
transform:translate(-50%,-50%);
background:var(--primary);
color:var(--white);
padding:1.2rem 2rem;
border-radius:var(--r-md);
box-shadow:var(--shadow-xl);
font-weight:600;
z-index:100;
}
/* Responsive tweaks */
@media (max-width:768px){
.form-card{ padding:2rem 1.6rem; }
.modal-body{ padding:1.8rem 1.6rem 1rem; }
.modal-header{ padding:1.6rem 1.8rem; }
.modal-footer{ padding:1.2rem 1.8rem; flex-wrap:wrap; }
.field-grid{ grid-template-columns:1fr; }
.submit-area{ justify-content:stretch; }
.btn-submit, .btn-reset{ flex:1; justify-content:center; }
.entries-grid{ grid-template-columns:1fr; }
.modal-overlay{ padding:1rem; }
/* 📱 Mobile: collapse top nav into a single horizontal icon bar */
.header-controls{
flex-direction:row;
align-items:center;
justify-content:space-between;
flex-wrap:nowrap;
padding:.6rem .8rem;
gap:.35rem;
}
.control-group{ gap:.35rem; justify-content:flex-start; flex-wrap:nowrap; }
.control-btn{
width:2.3rem;
height:2.3rem;
padding:0;
gap:0;
justify-content:center;
border-radius:50%;
}
.control-btn svg{ width:16px; height:16px; }
/* hide labels on action buttons only — keep the year-badge text visible */
.control-btn .btn-label{ display:none; }
.year-filter-badge{
padding:.45rem .9rem;
gap:.5rem;
font-size:1rem;
flex:1;
justify-content:center;
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.yb-dot{ width:.7rem; height:.7rem; flex-shrink:0; }
.deco-year{ font-size:24rem; right:-2rem; bottom:-2rem; }
}
body.yb-page #app-container{ padding-top:3.8rem !important; }
.book-container{ margin-top:0 !important; }
.deco-year{ font-size:24rem; right:-2rem; bottom:-2rem; }
}
/* =====================================================
Fix 15: ADMIN MANAGE BADGES (admin_manage_badges.php)
Restores the badge admin UI: container, grid, emoji
picker, criteria/stats blocks and full-width button.
The page references classes that have no CSS rules
(.badge-container, .badges-grid, .badge-description,
.badge-criteria, .badge-stats, .emoji-selector,
.emoji-option, .btn-full-width).
===================================================== */
.badge-container{ max-width:84rem; margin:0 auto; padding:1.6rem 2rem 4rem; }
.badges-grid{
display:grid;
grid-template-columns:repeat(auto-fill, minmax(24rem, 1fr));
gap:1.6rem;
margin-top:1.4rem;
}
.badge-card{
background:var(--white);
border:2px solid var(--border-light);
border-left-width:6px !important;
border-radius:var(--r-lg);
padding:1.8rem 1.6rem;
text-align:center;
box-shadow:var(--shadow-sm);
transition:all var(--t-base);
position:relative;
overflow:hidden;
}
.badge-card::before{
content:'';
position:absolute;
inset:0;
background:linear-gradient(135deg,rgba(var(--primary-rgb),0) 0%, rgba(var(--primary-rgb),.04) 100%);
pointer-events:none;
opacity:0;
transition:opacity var(--t-base);
}
.badge-card:hover{
transform:translateY(-4px);
box-shadow:var(--shadow-hover);
}
.badge-card:hover::before{ opacity:1; }
.badge-card .badge-icon{
width:7rem;
height:7rem;
display:inline-flex;
align-items:center;
justify-content:center;
background:linear-gradient(135deg,var(--gold) 0%, var(--accent) 100%);
color:var(--white);
border-radius:50%;
font-size:3rem;
margin-bottom:1.2rem;
box-shadow:0 8px 20px rgba(var(--accent-rgb),.25);
position:relative;
}
.badge-card .badge-name{
font-family:var(--font-heading);
font-size:1.5rem;
font-weight:800;
margin-bottom:.6rem;
letter-spacing:-.01em;
line-height:1.25;
}
.badge-card .badge-description{
font-size:1.3rem;
color:var(--text-secondary);
line-height:1.55;
margin-bottom:1rem;
min-height:3.8rem;
}
.badge-card .badge-criteria{
display:inline-flex;
align-items:center;
gap:.5rem;
padding:.5rem 1rem;
background:var(--bg);
border:1px solid var(--border-light);
border-radius:var(--r-full);
font-size:1.2rem;
font-weight:600;
color:var(--text-secondary);
margin-bottom:.8rem;
}
.badge-card .badge-criteria strong{ color:var(--primary); font-weight:700; }
.badge-card .badge-stats{
display:inline-flex;
align-items:center;
gap:.4rem;
padding:.5rem 1.1rem;
background:var(--primary-mist);
border:1px solid var(--primary);
border-radius:var(--r-full);
font-size:1.2rem;
font-weight:700;
color:var(--primary-dark);
}
/* Emoji picker grid (16 emoji options) */
.emoji-selector{
display:grid;
grid-template-columns:repeat(8, 1fr);
gap:.5rem;
padding:1rem;
background:var(--bg);
border:1px solid var(--border-light);
border-radius:var(--r-md);
margin-top:.8rem;
max-width:42rem;
}
@media (max-width:600px){
.emoji-selector{ grid-template-columns:repeat(6, 1fr); }
}
.emoji-option{
aspect-ratio:1;
display:flex;
align-items:center;
justify-content:center;
font-size:2rem;
background:var(--white);
border:1.5px solid var(--border-light);
border-radius:var(--r-sm);
cursor:pointer;
transition:all var(--t-fast);
user-select:none;
}
.emoji-option:hover{
background:var(--primary-mist);
border-color:var(--primary);
transform:scale(1.08);
}
.emoji-option.selected{
background:var(--primary);
border-color:var(--primary);
box-shadow:0 0 0 4px var(--primary-glow);
}
/* Full-width button variant */
.btn-full-width{ width:100%; justify-content:center; }
/* Form layout — let form-row work inside .card */
.card .form-row{
display:flex;
flex-wrap:wrap;
gap:1.4rem;
align-items:flex-start;
}
.card .form-row > .form-group{ flex:1 1 22rem; min-width:0; }
.card .form-group label{
display:block;
font-family:var(--font-heading);
font-weight:700;
font-size:1.3rem;
color:var(--text);
margin-bottom:.5rem;
letter-spacing:.01em;
}
/* Responsive tweaks */
@media (max-width:768px){
.badge-container{ padding:1.2rem 1.2rem 3rem; }
.badges-grid{ grid-template-columns:1fr; gap:1.2rem; }
.card .form-row{ flex-direction:column; }
.card .form-row > .form-group{ flex:1 1 100%; }
}
/* =====================================================
Fix 16: TEMPLATE PICKER STUDIO
Pages: select_template.php, select_certificate_template.php,
select_event_certificate_template.php.
All three share the same .stpl-* / .idcard-studio chrome:
- stpl-header (hero with decorative blobs + mock carousel)
- stpl-stats-bar (count + search input)
- stpl-wrap / stpl-grid (responsive 4-col card grid)
- stpl-card / preview / body / footer
- idc-modal (front/back preview modal)
Restored below so the studio matches the premium look
of admin_generate_id_cards.php.
===================================================== */
/* ---- Studio canvas ---- */
.idcard-studio{
background:var(--bg);
min-height:60vh;
position:relative;
overflow-x:hidden;
padding-bottom:4rem;
}
.cert-studio{ padding-bottom:4rem; }
/* ---- Hero header ---- */
.stpl-header{
position:relative;
background:linear-gradient(135deg,var(--primary) 0%, var(--primary-dark) 70%, var(--primary-deeper) 100%);
color:var(--white);
padding:4rem 0 3.4rem;
overflow:hidden;
border-bottom:4px solid var(--gold);
}
.stpl-header-deco{
position:absolute;
border-radius:50%;
pointer-events:none;
z-index:0;
}
.stpl-header-deco--1{ top:-7rem; right:-5rem; width:24rem; height:24rem; background:radial-gradient(circle,rgba(var(--gold-rgb),.22) 0%,transparent 70%); }
.stpl-header-deco--2{ bottom:-9rem; left:-6rem; width:28rem; height:28rem; background:radial-gradient(circle,rgba(255,255,255,.06) 0%,transparent 70%); }
.stpl-header-deco--3{ top:30%; left:8%; width:9rem; height:9rem; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); }
.stpl-header-deco--4{ bottom:20%; right:18%; width:6rem; height:6rem; background:rgba(var(--gold-rgb),.14); border:1px solid rgba(var(--gold-rgb),.22); }
.stpl-header .container{ position:relative; z-index:1; }
.stpl-header-grid{
display:grid;
grid-template-columns:1.1fr .9fr;
gap:3rem;
align-items:center;
}
@media (max-width:1024px){ .stpl-header-grid{ grid-template-columns:1fr; gap:2.4rem; } }
.stpl-header-content{ max-width:36rem; }
.stpl-header-icon{
display:none;
}
.stpl-header-content .badge,
.stpl-header-content > .badge,
.stpl-header .badge{
display:inline-flex;
align-items:center;
gap:.5rem;
background:rgba(255,255,255,.14);
border:1px solid rgba(255,255,255,.22);
color:var(--white);
font-family:var(--font-heading);
font-size:1.1rem;
font-weight:800;
text-transform:uppercase;
letter-spacing:.14em;
padding:.5rem 1.3rem;
border-radius:var(--r-full);
margin-bottom:1.4rem;
backdrop-filter:blur(6px);
}
.stpl-header-content h1{
font-family:var(--font-heading);
font-size:clamp(2.6rem,4.4vw,3.8rem);
font-weight:900;
color:var(--white);
margin:0 0 1rem;
letter-spacing:-.025em;
line-height:1.08;
text-shadow:0 2px 14px rgba(0,0,0,.22);
}
.stpl-h1-accent{
background:linear-gradient(135deg,var(--gold) 0%, var(--gold-bright) 100%);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
font-style:italic;
}
.stpl-header-content p{
font-size:1.5rem;
line-height:1.65;
color:rgba(255,255,255,.88);
margin:0 0 1.6rem;
}
.stpl-pill{
display:inline-flex;
align-items:center;
gap:.8rem;
padding:.7rem 1.4rem;
background:rgba(255,255,255,.1);
border:1px solid rgba(255,255,255,.18);
border-radius:var(--r-full);
font-size:1.3rem;
font-weight:700;
color:var(--white);
backdrop-filter:blur(8px);
flex-wrap:wrap;
}
.stpl-pill-dot{
width:.5rem;
height:.5rem;
border-radius:50%;
background:var(--gold);
}
/* ---- Hero mock carousel (right side) ---- */
.stpl-header-side{ display:flex; justify-content:center; }
.stpl-hero-mock{
position:relative;
width:100%;
max-width:38rem;
aspect-ratio:1.05/1;
display:flex;
align-items:center;
justify-content:center;
}
.mock-card{
position:absolute;
border-radius:1.2rem;
box-shadow:0 24px 60px rgba(0,0,0,.3), 0 6px 16px rgba(0,0,0,.18);
background:#fff;
overflow:hidden;
}
.mock-card.mc-2{
width:46%;
height:78%;
transform:translateX(-78%) rotate(-8deg);
opacity:.65;
z-index:1;
}
.mock-card.mc-3{
width:46%;
height:78%;
transform:translateX(78%) rotate(8deg);
opacity:.65;
z-index:1;
}
.mock-stage{
position:relative;
width:62%;
height:88%;
z-index:2;
perspective:1200px;
}
.mock-card-live{
position:absolute;
inset:0;
background:#fff;
border-radius:1.2rem;
overflow:hidden;
display:flex;
align-items:center;
justify-content:center;
box-shadow:0 20px 50px rgba(0,0,0,.35), 0 4px 12px rgba(0,0,0,.18);
}
.mock-card-live.leave-next{ animation:mockLeaveNext .55s ease forwards; }
.mock-card-live.leave-prev{ animation:mockLeavePrev .55s ease forwards; }
.mock-card-live.enter-next{ animation:mockEnterNext .55s ease forwards; }
.mock-card-live.enter-prev{ animation:mockEnterPrev .55s ease forwards; }
@keyframes mockLeaveNext{ to{ transform:translateX(-130%) rotate(-12deg); opacity:0; } }
@keyframes mockLeavePrev{ to{ transform:translateX(130%) rotate(12deg); opacity:0; } }
@keyframes mockEnterNext{ from{ transform:translateX(130%) rotate(12deg); opacity:0; } to{ transform:translateX(0) rotate(0); opacity:1; } }
@keyframes mockEnterPrev{ from{ transform:translateX(-130%) rotate(-12deg); opacity:0; } to{ transform:translateX(0) rotate(0); opacity:1; } }
.mock-meta{
position:absolute;
bottom:-2.4rem;
left:50%;
transform:translateX(-50%);
display:flex;
align-items:center;
gap:.8rem;
padding:.5rem 1.2rem;
background:rgba(0,0,0,.6);
backdrop-filter:blur(10px);
border:1px solid rgba(255,255,255,.12);
border-radius:var(--r-full);
color:var(--white);
font-family:var(--font-heading);
font-size:1.2rem;
font-weight:700;
white-space:nowrap;
}
.mock-meta-num{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:2.4rem;
height:2.4rem;
padding:0 .6rem;
background:var(--gold);
color:var(--text);
border-radius:var(--r-full);
font-weight:800;
}
.mock-meta-name{
transition:opacity .2s;
}
.mock-meta-name.flash{ opacity:0; }
.mock-dots{
position:absolute;
bottom:-5rem;
left:50%;
transform:translateX(-50%);
display:flex;
gap:.5rem;
}
.mock-dots button{
width:.8rem;
height:.8rem;
border-radius:50%;
background:rgba(255,255,255,.3);
border:1px solid rgba(255,255,255,.18);
padding:0;
cursor:pointer;
transition:all var(--t-fast);
}
.mock-dots button.is-active{
width:1.8rem;
border-radius:999px;
background:var(--gold);
}
/* ---- Stats / search bar ---- */
.stpl-stats-bar{
background:var(--white);
border-bottom:1px solid var(--border-light);
padding:1.4rem 0;
position:sticky;
top:0;
z-index:10;
box-shadow:var(--shadow-xs);
}
.stpl-stats-bar .container{
display:flex;
align-items:center;
justify-content:space-between;
flex-wrap:wrap;
gap:1.4rem;
}
.stpl-stats-bar .count{
display:flex;
align-items:baseline;
gap:.6rem;
font-size:1.4rem;
color:var(--text-secondary);
}
.stpl-stats-bar .count strong{
font-family:var(--font-heading);
font-size:2rem;
font-weight:900;
color:var(--primary);
line-height:1;
}
.stpl-search{
position:relative;
display:flex;
align-items:center;
gap:.8rem;
flex:0 1 36rem;
max-width:36rem;
padding:.8rem 1.2rem;
background:var(--bg);
border:1.5px solid var(--border-light);
border-radius:var(--r-full);
transition:all var(--t-base);
}
.stpl-search:focus-within{
border-color:var(--primary);
box-shadow:0 0 0 4px var(--primary-glow);
background:var(--white);
}
.stpl-search svg{ color:var(--text-muted); flex-shrink:0; }
.stpl-search input{
flex:1;
border:none;
background:transparent;
outline:none;
font-family:var(--font-body);
font-size:1.4rem;
color:var(--text);
padding:.4rem 0;
min-width:0;
}
.stpl-search input::placeholder{ color:var(--text-muted); }
.stpl-search-clear{
background:var(--gray-100);
color:var(--text-muted);
border:none;
width:2.4rem;
height:2.4rem;
border-radius:50%;
cursor:pointer;
display:none;
align-items:center;
justify-content:center;
font-size:1.2rem;
transition:all var(--t-fast);
}
.stpl-search-clear:hover{ background:var(--primary); color:var(--white); }
.stpl-search.has-value .stpl-search-clear{ display:inline-flex; }
/* ---- Template grid + cards ---- */
.stpl-wrap{ padding:2.4rem 0 1rem; }
.stpl-grid,
.cert-grid{
display:grid;
grid-template-columns:repeat(auto-fill, minmax(28rem, 1fr));
gap:1.8rem;
}
/* Certificate pages use landscape 1123×794 instead of portrait 204×323 — widen
the card a touch and let the preview area grow to fit the wider canvas. */
.cert-grid .stpl-card-preview{ min-height:26rem; padding:18px 14px; }
.cert-grid .stpl-card{ grid-column:span 1; }
/* Certificate template preview gradients (templates 13–18) — templates 1–12
already have gradients from .stpl-card-preview[data-tpl="N"] rules. */
.stpl-card-preview[data-tpl="13"]{ --pv-from:#171C3A; --pv-to:#06070F; background:linear-gradient(135deg,var(--pv-from) 0%, var(--pv-to) 100%); }
.stpl-card-preview[data-tpl="14"]{ --pv-from:#FEF8F7; --pv-to:#f0dbe2; background:linear-gradient(135deg,var(--pv-from) 0%, var(--pv-to) 100%); }
.stpl-card-preview[data-tpl="15"]{ --pv-from:#ffffff; --pv-to:#ffeed8; background:linear-gradient(135deg,var(--pv-from) 0%, var(--pv-to) 100%); }
.stpl-card-preview[data-tpl="16"]{ --pv-from:#F4E8C8; --pv-to:#E8D9A8; background:linear-gradient(135deg,var(--pv-from) 0%, var(--pv-to) 100%); }
.stpl-card-preview[data-tpl="17"]{ --pv-from:#ffffff; --pv-to:#f4f4f4; background:linear-gradient(135deg,var(--pv-from) 0%, var(--pv-to) 100%); }
.stpl-card-preview[data-tpl="18"]{ --pv-from:#FF6B6B; --pv-to:#FFE66D; background:linear-gradient(135deg,var(--pv-from) 0%, var(--pv-to) 100%); }
.stpl-card-preview[data-tpl="3"] .stpl-card-num{ background:rgba(255,255,255,.14); color:#fff; }
.stpl-card-preview[data-tpl="9"] .stpl-card-num{ background:rgba(0,229,199,.22); color:#e7f9f5; }
.stpl-card-preview[data-tpl="13"] .stpl-card-num{ background:rgba(255,255,255,.14); color:#fff; }
.stpl-grid-modal{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:1.4rem;
max-height:62vh;
overflow-y:auto;
padding:6px 4px;
}
@media (max-width:900px){ .stpl-grid-modal{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .stpl-grid-modal{ grid-template-columns:1fr; } }
.stpl-card{
background:var(--white);
border:1.5px solid var(--border-light);
border-radius:1.2rem;
overflow:hidden;
display:flex;
flex-direction:column;
box-shadow:0 2px 8px rgba(0,0,0,.06);
transition:transform .15s, box-shadow .15s, border-color .15s;
position:relative;
cursor:pointer;
}
.stpl-card:hover{
transform:translateY(-4px);
box-shadow:0 14px 32px rgba(0,0,0,.18);
border-color:var(--primary);
}
.stpl-card.selected{
border-color:var(--primary) !important;
box-shadow:0 0 0 3px rgba(var(--primary-rgb),.25), 0 8px 22px rgba(var(--primary-rgb),.18) !important;
background:#f0fdf5;
}
.stpl-card.recommended{ border-color:var(--gold); }
.stpl-card-num{
position:absolute;
top:.8rem;
left:.8rem;
z-index:3;
display:inline-flex;
align-items:center;
justify-content:center;
min-width:3rem;
height:2.4rem;
padding:0 .8rem;
background:rgba(4,31,18,.82);
color:#fff;
font-weight:800;
font-size:1.1rem;
letter-spacing:.04em;
border-radius:999px;
backdrop-filter:blur(4px);
-webkit-backdrop-filter:blur(4px);
box-shadow:0 4px 12px rgba(0,0,0,.25);
}
.recommended-badge{
position:absolute;
top:.8rem;
right:.8rem;
z-index:3;
display:inline-flex;
align-items:center;
padding:.4rem 1rem;
background:linear-gradient(135deg,var(--gold) 0%, var(--gold-bright) 100%);
color:var(--text);
font-family:var(--font-heading);
font-size:1.05rem;
font-weight:800;
text-transform:uppercase;
letter-spacing:.06em;
border-radius:var(--r-full);
box-shadow:0 4px 12px rgba(var(--gold-rgb),.4);
}
.stpl-card-preview{
position:relative;
overflow:hidden;
display:flex;
align-items:center;
justify-content:center;
gap:8px;
padding:14px 10px;
cursor:pointer;
border-bottom:1px solid var(--border-light);
background:linear-gradient(135deg,#eef0f2 0%, #d6dde4 100%);
min-height:24rem;
}
.stpl-card-preview[data-tpl="1"]{ --pv-from:#e6ebf5; --pv-to:#c3cce0; background:linear-gradient(135deg,var(--pv-from) 0%, var(--pv-to) 100%); }
.stpl-card-preview[data-tpl="2"]{ --pv-from:#e3f3eb; --pv-to:#b5dac6; background:linear-gradient(135deg,var(--pv-from) 0%, var(--pv-to) 100%); }
.stpl-card-preview[data-tpl="3"]{ --pv-from:#3a3d44; --pv-to:#1b1e25; background:linear-gradient(135deg,var(--pv-from) 0%, var(--pv-to) 100%); }
.stpl-card-preview[data-tpl="4"]{ --pv-from:#cde9e6; --pv-to:#7cc6c0; background:linear-gradient(135deg,var(--pv-from) 0%, var(--pv-to) 100%); }
.stpl-card-preview[data-tpl="5"]{ --pv-from:#faf7f0; --pv-to:#ebe2cf; background:linear-gradient(135deg,var(--pv-from) 0%, var(--pv-to) 100%); }
.stpl-card-preview[data-tpl="6"]{ --pv-from:#ede4ff; --pv-to:#b9a4f3; background:linear-gradient(135deg,var(--pv-from) 0%, var(--pv-to) 100%); }
.stpl-card-preview[data-tpl="7"]{ --pv-from:#fbe9ee; --pv-to:#e3b6c4; background:linear-gradient(135deg,var(--pv-from) 0%, var(--pv-to) 100%); }
.stpl-card-preview[data-tpl="8"]{ --pv-from:#eef1f4; --pv-to:#c8d0db; background:linear-gradient(135deg,var(--pv-from) 0%, var(--pv-to) 100%); }
.stpl-card-preview[data-tpl="9"]{ --pv-from:#16202d; --pv-to:#070b12; background:linear-gradient(135deg,var(--pv-from) 0%, var(--pv-to) 100%); }
.stpl-card-preview[data-tpl="10"]{ --pv-from:#fbf6ec; --pv-to:#e7dcc1; background:linear-gradient(135deg,var(--pv-from) 0%, var(--pv-to) 100%); }
.stpl-card-preview[data-tpl="11"]{ --pv-from:#ffe6d4; --pv-to:#ffb89a; background:linear-gradient(135deg,var(--pv-from) 0%, var(--pv-to) 100%); }
.stpl-card-preview[data-tpl="12"]{ --pv-from:#eaf5f9; --pv-to:#bfe3f0; background:linear-gradient(135deg,var(--pv-from) 0%, var(--pv-to) 100%); }
.stpl-card-preview::before{
content:'';
position:absolute;
inset:0;
background-image:radial-gradient(circle at 18% 22%,rgba(255,255,255,.35) 0%,transparent 38%), radial-gradient(circle at 82% 78%,rgba(0,0,0,.12) 0%,transparent 45%);
pointer-events:none;
z-index:0;
}
.thumb-clip,
.cert-thumb-clip{
display:flex;
align-items:flex-start;
justify-content:center;
gap:8px;
position:relative;
z-index:1;
width:100%;
}
.thumb-side{
position:relative;
flex:0 0 auto;
overflow:hidden;
}
.thumb-side .fwrap{
transform-origin:top left;
display:block;
border-radius:10px;
box-shadow:0 8px 22px rgba(0,0,0,.22), 0 2px 6px rgba(0,0,0,.12);
transition:transform .15s, box-shadow .15s;
}
.stpl-card:hover .thumb-side .fwrap{
transform:scale(1.04);
box-shadow:0 14px 32px rgba(0,0,0,.28), 0 4px 10px rgba(0,0,0,.14);
}
.cert-thumb-inner{
transform-origin:top left;
border-radius:10px;
overflow:hidden;
box-shadow:0 8px 22px rgba(0,0,0,.22), 0 2px 6px rgba(0,0,0,.12);
transition:transform .15s, box-shadow .15s;
}
.stpl-card:hover .cert-thumb-inner{
transform:scale(1.04);
box-shadow:0 14px 32px rgba(0,0,0,.28), 0 4px 10px rgba(0,0,0,.14);
}
.stpl-overlay{
position:absolute;
inset:0;
background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,.55) 100%);
display:flex;
align-items:flex-end;
justify-content:center;
padding:1.4rem 1rem;
opacity:0;
transition:opacity var(--t-base);
z-index:2;
}
.stpl-card:hover .stpl-overlay{ opacity:1; }
.stpl-overlay span{
color:var(--white);
font-family:var(--font-heading);
font-size:1.25rem;
font-weight:700;
letter-spacing:.04em;
text-transform:uppercase;
padding:.5rem 1.2rem;
background:rgba(0,0,0,.5);
border-radius:var(--r-full);
backdrop-filter:blur(4px);
}
.stpl-card-body{
padding:1.2rem 1.4rem 1.4rem;
display:flex;
flex-direction:column;
gap:.5rem;
flex:1;
}
.stpl-card-name{
font-family:var(--font-heading);
font-size:1.5rem;
font-weight:800;
color:var(--text);
margin:0;
letter-spacing:-.015em;
line-height:1.25;
}
.stpl-card-desc,
.stpl-card-body p{
font-size:1.25rem;
color:var(--text-secondary);
margin:0;
line-height:1.5;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
}
.stpl-card-footer{
display:flex;
gap:.8rem;
margin-top:auto;
padding-top:1rem;
}
.stpl-select-btn,
.pv-btn{
flex:1;
display:inline-flex;
align-items:center;
justify-content:center;
gap:.5rem;
padding:.7rem 1rem;
border:1.5px solid var(--border);
border-radius:var(--r-sm);
background:var(--white);
color:var(--text) !important;
font-family:var(--font-heading);
font-size:1.2rem;
font-weight:700;
cursor:pointer;
transition:all var(--t-fast);
text-decoration:none !important;
}
.stpl-select-btn:hover{
border-color:var(--primary);
color:var(--primary) !important;
background:var(--primary-mist);
}
.stpl-btn-primary{
background:var(--primary) !important;
color:var(--white) !important;
border-color:var(--primary) !important;
}
.stpl-btn-primary:hover{
background:var(--primary-dark) !important;
border-color:var(--primary-dark) !important;
color:var(--white) !important;
}
/* ---- No results ---- */
.stpl-no-results{
display:none;
grid-column:1/-1;
text-align:center;
padding:5rem 2rem;
background:var(--white);
border:2px dashed var(--border);
border-radius:var(--r-lg);
}
.stpl-no-results svg{ color:var(--text-muted); margin-bottom:1rem; }
.stpl-no-results p{ font-size:1.4rem; color:var(--text-muted); margin:0; line-height:1.6; }
.stpl-no-results strong{ color:var(--text); font-weight:700; }
/* ---- Modal preview (Front/Back tabs) ---- */
.idc-preview-tabs{
display:flex;
gap:.6rem;
margin-bottom:1.4rem;
background:var(--bg);
padding:.5rem;
border-radius:var(--r-md);
}
.idc-tab{
flex:1;
display:inline-flex;
align-items:center;
justify-content:center;
gap:.6rem;
padding:.8rem 1.2rem;
background:transparent;
border:none;
border-radius:var(--r-sm);
font-family:var(--font-heading);
font-size:1.3rem;
font-weight:700;
color:var(--text-secondary);
cursor:pointer;
transition:all var(--t-fast);
}
.idc-tab:hover{ color:var(--text); }
.idc-tab.active{
background:var(--white);
color:var(--primary);
box-shadow:var(--shadow-sm);
}
.idc-preview-stage{
display:flex;
align-items:center;
justify-content:center;
gap:2rem;
padding:1rem;
background:var(--bg);
border-radius:var(--r-md);
min-height:34rem;
flex-wrap:wrap;
}
.idc-preview-card{
width:22rem;
height:34.8rem;
background:var(--white);
border-radius:1rem;
box-shadow:var(--shadow-lg);
overflow:hidden;
display:flex;
align-items:center;
justify-content:center;
}
.idc-preview-card.is-hidden{ display:none; }
.idc-preview-card .fwrap{ transform-origin:top left; }
.idc-cert-stage{
position:relative;
display:flex;
align-items:center;
justify-content:center;
padding:1.4rem;
background:var(--bg);
border-radius:var(--r-md);
min-height:40rem;
}
.idc-cert-stage .cert-thumb-frame{
background:var(--white);
padding:1rem;
border-radius:.8rem;
box-shadow:var(--shadow-md);
}
/* =====================================================
Fix 17: ADMIN GENERATE ID CARDS (.idcard-container)
.idcard-container is used on the main ID card admin page
and needs proper container chrome (max-width, padding,
background). The page already inlines per-modal styles,
but the outer wrapper needs to look consistent.
===================================================== */
.idcard-container{
max-width:1280px;
margin:0 auto;
padding:2rem 2.4rem 5rem;
background:var(--bg);
}
/* =====================================================
Fix 18: TEACHER TEMPLATE PICKER (select_template_teacher.php)
This page has its own bespoke classes (.teacher-idcard-studio,
.pg-header, .template-card, etc.) that have NO CSS rules.
Restored below.
===================================================== */
.teacher-idcard-studio{
background:var(--bg);
min-height:100vh;
padding:2rem 2.4rem 5rem;
font-family:var(--font-body);
color:var(--text);
}
.teacher-idcard-studio .pg-header{
text-align:center;
padding:2.4rem 1rem 2.6rem;
background:linear-gradient(135deg,var(--primary) 0%, var(--primary-dark) 100%);
color:var(--white);
border-radius:var(--r-2xl);
margin-bottom:2.4rem;
position:relative;
overflow:hidden;
box-shadow:var(--shadow-xl);
}
.teacher-idcard-studio .pg-header .badge{
display:inline-block;
background:rgba(255,255,255,.14);
border:1px solid rgba(255,255,255,.22);
color:var(--white);
font-family:var(--font-heading);
font-size:1.1rem;
font-weight:800;
text-transform:uppercase;
letter-spacing:.16em;
padding:.5rem 1.3rem;
border-radius:var(--r-full);
margin-bottom:1.2rem;
}
.teacher-idcard-studio .pg-header h1{
font-family:var(--font-heading);
font-size:clamp(2.6rem,4.4vw,3.6rem);
font-weight:900;
color:var(--white);
margin:0 0 .8rem;
letter-spacing:-.025em;
}
.teacher-idcard-studio .pg-header p{
font-size:1.5rem;
color:rgba(255,255,255,.82);
margin:0 0 1.4rem;
}
.teacher-pill{
display:inline-flex;
align-items:center;
gap:.6rem;
padding:.7rem 1.6rem;
background:rgba(255,255,255,.12);
border:1px solid rgba(255,255,255,.2);
border-radius:var(--r-full);
font-size:1.4rem;
font-weight:700;
color:var(--white);
backdrop-filter:blur(8px);
}
.teacher-pill .role{
color:var(--gold);
font-style:italic;
font-weight:600;
}
.teacher-idcard-studio .stats-bar{
display:flex;
align-items:center;
justify-content:space-between;
flex-wrap:wrap;
gap:1.4rem;
padding:1.4rem 1.8rem;
background:var(--white);
border:1px solid var(--border-light);
border-radius:var(--r-md);
box-shadow:var(--shadow-sm);
margin-bottom:2rem;
}
.teacher-idcard-studio .stats-bar .count{
font-size:1.4rem;
color:var(--text-secondary);
}
.teacher-idcard-studio .stats-bar .count strong{
font-family:var(--font-heading);
font-size:2rem;
font-weight:900;
color:var(--primary);
}
.teacher-idcard-studio .search-box{
position:relative;
display:flex;
align-items:center;
gap:.6rem;
flex:0 1 36rem;
max-width:36rem;
padding:.7rem 1.2rem;
background:var(--bg);
border:1.5px solid var(--border-light);
border-radius:var(--r-full);
transition:all var(--t-base);
}
.teacher-idcard-studio .search-box:focus-within{
border-color:var(--primary);
box-shadow:0 0 0 4px var(--primary-glow);
background:var(--white);
}
.teacher-idcard-studio .search-box svg{ color:var(--text-muted); flex-shrink:0; }
.teacher-idcard-studio .search-box input{
flex:1;
border:none;
background:transparent;
outline:none;
font-family:var(--font-body);
font-size:1.4rem;
color:var(--text);
padding:.4rem 0;
}
.teacher-idcard-studio .search-box input::placeholder{ color:var(--text-muted); }
.teacher-idcard-studio .template-wrap{ padding-top:1rem; }
.teacher-idcard-studio .template-grid{
display:grid;
grid-template-columns:repeat(auto-fill, minmax(28rem, 1fr));
gap:1.8rem;
}
.teacher-idcard-studio .template-card{
background:var(--white);
border:1.5px solid var(--border-light);
border-radius:var(--r-lg);
overflow:hidden;
display:flex;
flex-direction:column;
box-shadow:var(--shadow-sm);
transition:all var(--t-base);
cursor:pointer;
animation:tplFadeIn .5s var(--delay, 0s) both;
}
@keyframes tplFadeIn{ from{ opacity:0; transform:translateY(20px); } to{ opacity:1; transform:translateY(0); } }
.teacher-idcard-studio .template-card:hover{
transform:translateY(-6px);
box-shadow:var(--shadow-hover);
border-color:var(--primary);
}
.teacher-idcard-studio .template-card .card-num{
position:absolute;
top:.8rem;
left:.8rem;
z-index:3;
display:inline-flex;
align-items:center;
justify-content:center;
min-width:3rem;
height:2.4rem;
padding:0 .8rem;
background:rgba(4,31,18,.82);
color:#fff;
font-weight:800;
font-size:1.1rem;
letter-spacing:.04em;
border-radius:999px;
backdrop-filter:blur(4px);
}
.teacher-idcard-studio .template-card{ position:relative; }
.teacher-idcard-studio .card-preview{
position:relative;
background:linear-gradient(135deg,#1c1c26 0%, #0a0a12 100%);
min-height:24rem;
overflow:hidden;
display:flex;
align-items:center;
justify-content:center;
}
.teacher-idcard-studio .card-img{
width:80%;
height:auto;
display:block;
border-radius:.6rem;
box-shadow:0 10px 24px rgba(0,0,0,.4);
}
.teacher-idcard-studio .overlay-btn{
position:absolute;
inset:0;
background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,.65) 100%);
display:flex;
align-items:flex-end;
justify-content:center;
padding:1.4rem 1rem;
opacity:0;
transition:opacity var(--t-base);
}
.teacher-idcard-studio .template-card:hover .overlay-btn{ opacity:1; }
.teacher-idcard-studio .overlay-btn span{
color:var(--white);
font-family:var(--font-heading);
font-size:1.25rem;
font-weight:700;
padding:.5rem 1.2rem;
background:rgba(0,0,0,.5);
border-radius:var(--r-full);
backdrop-filter:blur(4px);
}
.teacher-idcard-studio .card-body{
padding:1.2rem 1.4rem 1.4rem;
display:flex;
flex-direction:column;
gap:.8rem;
}
.teacher-idcard-studio .card-name{
font-family:var(--font-heading);
font-size:1.5rem;
font-weight:800;
color:var(--text);
margin:0;
}
.teacher-idcard-studio .card-tags{
display:flex;
flex-wrap:wrap;
gap:.4rem;
}
.teacher-idcard-studio .tag{
display:inline-flex;
align-items:center;
padding:.3rem .9rem;
background:var(--bg);
border:1px solid var(--border-light);
border-radius:var(--r-full);
font-size:1.15rem;
font-weight:600;
color:var(--text-secondary);
}
.teacher-idcard-studio .card-footer{
display:flex;
padding-top:.6rem;
}
.teacher-idcard-studio .select-btn{
width:100%;
padding:.9rem 1.2rem;
background:linear-gradient(135deg,var(--primary) 0%, var(--primary-dark) 100%);
color:var(--white);
border:none;
border-radius:var(--r-sm);
font-family:var(--font-heading);
font-size:1.3rem;
font-weight:700;
cursor:pointer;
transition:all var(--t-base);
box-shadow:0 4px 14px rgba(var(--primary-rgb),.3);
}
.teacher-idcard-studio .select-btn:hover{
transform:translateY(-2px);
box-shadow:0 8px 22px rgba(var(--primary-rgb),.4);
}
.teacher-idcard-studio .no-results{
display:none;
grid-column:1/-1;
text-align:center;
padding:4rem 2rem;
background:var(--white);
border:2px dashed var(--border);
border-radius:var(--r-lg);
color:var(--text-muted);
}
.teacher-idcard-studio .no-results svg{ margin-bottom:1rem; }
.teacher-idcard-studio .no-results p{ font-size:1.4rem; margin:0; }
@media (max-width:768px){
.stpl-grid,
.cert-grid{ grid-template-columns:1fr; gap:1.4rem; }
.stpl-card-preview{ min-height:20rem; }
.stpl-stats-bar .container{ flex-direction:column; align-items:stretch; }
.stpl-search{ max-width:100%; }
.teacher-idcard-studio{ padding:1.2rem 1.2rem 3rem; }
.teacher-idcard-studio .template-grid{ grid-template-columns:1fr; }
.teacher-idcard-studio .stats-bar{ flex-direction:column; align-items:stretch; }
}
/* =====================================================
Fix 19: CERTIFICATE MANAGEMENT (.cert-mgmt)
Pages: admin_generate_certificates.php,
admin_generate_event_certificates.php.
The pages already inherit .idcard-container chrome (Fix 17)
for the basic card / stats / table. This block restores
the bespoke classes:
- .qd-* Quick Download 3-step hero card
- .cert-mgmt page wrapper accent
- .card-header-row + .count-chip + .table-filter-bar
- .chip + .cell-* + .action-cluster + .status-*
- .ph-chips placeholder chips
- .form-actions / .form-status / .bulk-advanced
- .collapsible-* + .bulk-advanced
- .is-loading feedback
- .h-icon-primary / .page-header-* if visible
- .muted helper text
===================================================== */
/* ---- Cert accent palette ---- */
.cert-mgmt{
--cert-accent:#8b6f3a;
--cert-accent-soft:rgba(201,168,76,.16);
}
/* ---- Page header (inside .idcard-container it's hidden by Fix 17,
so this is for when it's rendered standalone) ---- */
.cert-mgmt .page-header{
display:flex !important;
align-items:flex-start;
justify-content:space-between;
gap:1.6rem;
flex-wrap:wrap;
margin-bottom:1.6rem;
padding:0 0 1.2rem;
border-bottom:1px solid var(--border-light);
}
.cert-mgmt .page-header h2{
font-family:var(--font-heading);
font-size:2rem;
font-weight:800;
color:var(--text);
margin:0 0 .4rem;
letter-spacing:-.015em;
display:flex;
align-items:center;
gap:.8rem;
}
.cert-mgmt .page-header-sub{
font-size:1.35rem;
color:var(--text-muted);
margin:0;
max-width:64rem;
line-height:1.55;
}
.cert-mgmt .page-header-actions{
display:flex;
gap:.8rem;
flex-wrap:wrap;
}
.h-icon-primary{ color:var(--primary) !important; font-style:normal; }
.muted{ color:var(--text-muted); font-weight:500; font-size:1.15rem; margin-left:.4rem; }
/* ---- Quick Download hero card (qd-*) ---- */
.qd-card{
position:relative;
overflow:hidden;
background:linear-gradient(135deg,var(--white) 0%, color-mix(in srgb, var(--primary) 4%, var(--white)) 100%) !important;
border:1px solid var(--border-light) !important;
border-left:5px solid var(--primary) !important;
}
.qd-card::before{
display:none !important;
}
.qd-banner{
display:flex;
align-items:center;
gap:1.2rem;
padding:1.2rem 1.6rem;
margin:-1px -1px 0 -1px;
background:linear-gradient(135deg,var(--primary) 0%, var(--primary-dark) 100%);
color:var(--white);
border-radius:calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) 0 0;
}
.qd-banner i{
font-size:2.2rem;
color:var(--gold);
flex-shrink:0;
}
.qd-banner strong{
display:block;
font-family:var(--font-heading);
font-size:1.4rem;
font-weight:800;
margin-bottom:.15rem;
}
.qd-banner div{
font-size:1.3rem;
line-height:1.5;
color:rgba(255,255,255,.92);
}
.qd-grid{
display:grid;
grid-template-columns:1.3fr 1.4fr .fr;
gap:0;
align-items:stretch;
padding:.4rem;
}
@media (max-width:1024px){ .qd-grid{ grid-template-columns:1fr; } }
.qd-step{
display:flex;
align-items:flex-start;
gap:1.2rem;
padding:1.8rem 1.8rem;
border-right:1px solid var(--border-light);
}
.qd-step:last-child{ border-right:none; background:var(--primary-mist); border-radius:0 var(--r-md) var(--r-md) 0; }
.qd-step-action{ background:var(--primary-mist); }
@media (max-width:1024px){
.qd-step{ border-right:none; border-bottom:1px solid var(--border-light); padding:1.4rem 1.6rem; }
.qd-step:last-child{ border-bottom:none; border-radius:0 0 var(--r-md) var(--r-md); }
}
.qd-step-num{
width:3.4rem;
height:3.4rem;
display:inline-flex;
align-items:center;
justify-content:center;
background:var(--primary);
color:var(--white);
font-family:var(--font-heading);
font-size:1.4rem;
font-weight:800;
border-radius:50%;
box-shadow:0 4px 12px rgba(var(--primary-rgb),.35);
flex-shrink:0;
}
.qd-step-body{ flex:1; min-width:0; }
.qd-step-body h3{
font-family:var(--font-heading);
font-size:1.35rem;
font-weight:800;
color:var(--text);
margin:0 0 .8rem;
letter-spacing:-.01em;
}
.qd-step-note{
margin-top:.8rem;
font-size:1.25rem;
color:var(--text-muted);
line-height:1.5;
}
.qd-step-note strong{ color:var(--primary); font-weight:800; }
.qd-filter-form{
display:flex;
gap:.8rem;
align-items:center;
flex-wrap:wrap;
}
.qd-tpl-row{
display:flex;
gap:.8rem;
align-items:center;
flex-wrap:wrap;
}
.qd-tpl-select{
flex:1 1 24rem;
padding:.9rem 1.2rem;
border:1.8px solid var(--border);
border-radius:var(--r-md);
background:var(--white);
font-family:var(--font-body);
font-size:1.4rem;
font-weight:600;
color:var(--text);
outline:none;
cursor:pointer;
transition:border-color var(--t-base), box-shadow var(--t-base);
}
.qd-tpl-select:focus{
border-color:var(--primary);
box-shadow:0 0 0 4px var(--primary-glow);
}
.qd-tpl-selected{
display:flex;
align-items:center;
gap:.8rem;
margin-top:1rem;
padding:.7rem 1rem;
background:var(--bg);
border:1px solid var(--border-light);
border-radius:var(--r-md);
font-size:1.3rem;
flex-wrap:wrap;
}
.qd-tpl-selected-label{ color:var(--text-muted); font-weight:600; }
.qd-tpl-selected strong{ color:var(--text); font-weight:800; font-family:var(--font-heading); }
.qd-tpl-swatch{
display:inline-block;
width:5rem;
height:3rem;
border-radius:6px;
border-bottom:3px solid var(--gold);
background:linear-gradient(135deg,#132340,#1c3357);
flex-shrink:0;
box-shadow:var(--shadow-xs);
}
.qd-dl-btn{
width:100%;
justify-content:center;
padding:1.2rem 2rem !important;
font-size:1.5rem !important;
font-weight:800 !important;
letter-spacing:.04em;
text-transform:uppercase;
}
.qd-dl-btn.is-loading{
opacity:.8;
pointer-events:none;
}
/* ---- Common filter / search / table controls ---- */
.filter-control{
padding:.8rem 1.2rem;
border:1.8px solid var(--border);
border-radius:var(--r-md);
background:var(--white);
font-family:var(--font-body);
font-size:1.4rem;
font-weight:500;
color:var(--text);
outline:none;
cursor:pointer;
transition:border-color var(--t-base), box-shadow var(--t-base);
min-width:18rem;
}
.filter-control:focus{
border-color:var(--primary);
box-shadow:0 0 0 4px var(--primary-glow);
}
.filter-sm{ min-width:auto; padding:.6rem 1rem; font-size:1.3rem; }
/* ---- Card header row (issued certificates header) ---- */
.card-header-row{
display:flex;
align-items:center;
justify-content:space-between;
gap:1.4rem;
flex-wrap:wrap;
margin-bottom:1.6rem;
padding-bottom:1.2rem;
border-bottom:1px solid var(--border-light);
}
.card-header-row h3{
font-family:var(--font-heading);
font-size:1.5rem;
font-weight:800;
color:var(--text);
margin:0;
display:flex;
align-items:center;
gap:.8rem;
letter-spacing:-.01em;
}
.count-chip{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:2.6rem;
height:2.4rem;
padding:0 .8rem;
background:var(--primary);
color:var(--white);
border-radius:var(--r-full);
font-family:var(--font-heading);
font-size:1.2rem;
font-weight:800;
margin-left:.4rem;
}
.table-filter-bar{
display:flex;
gap:.8rem;
flex-wrap:wrap;
align-items:center;
}
.table-search{
position:relative;
display:flex;
align-items:center;
gap:.6rem;
flex:0 1 32rem;
max-width:32rem;
padding:.7rem 1.2rem;
background:var(--bg);
border:1.5px solid var(--border-light);
border-radius:var(--r-full);
transition:all var(--t-base);
}
.table-search:focus-within{
border-color:var(--primary);
box-shadow:0 0 0 4px var(--primary-glow);
background:var(--white);
}
.table-search i{ color:var(--text-muted); }
.table-search input{
flex:1;
border:none;
background:transparent;
outline:none;
font-family:var(--font-body);
font-size:1.4rem;
color:var(--text);
padding:.2rem 0;
min-width:0;
}
.table-search input::placeholder{ color:var(--text-muted); }
/* ---- Certificate table cell chrome ---- */
.cell-recipient strong{
font-family:var(--font-heading);
font-weight:700;
font-size:1.4rem;
color:var(--text);
}
.cell-sub{
font-size:1.25rem;
color:var(--text-muted);
margin-top:.2rem;
}
.cell-meta{
display:flex;
gap:.4rem;
margin-top:.5rem;
flex-wrap:wrap;
}
.chip{
display:inline-flex;
align-items:center;
padding:.25rem .8rem;
border-radius:var(--r-full);
font-family:var(--font-heading);
font-size:1.1rem;
font-weight:800;
text-transform:uppercase;
letter-spacing:.04em;
}
.chip-student{ background:#dbeafe; color:#1e40af; border:1px solid #bfdbfe; }
.chip-staff{ background:#fef3c7; color:#92400e; border:1px solid #fde68a; }
.chip-custom{ background:#ede4ff; color:#5b21b6; border:1px solid #ddd6fe; }
.status-badge{
display:inline-flex;
align-items:center;
padding:.3rem .8rem;
border-radius:var(--r-full);
font-family:var(--font-heading);
font-size:1.05rem;
font-weight:800;
text-transform:uppercase;
letter-spacing:.06em;
border:1px solid transparent;
}
.status-active{ background:#dcfce7; color:#166534; border-color:#bbf7d0; }
.status-pending{ background:#fef3c7; color:#92400e; border-color:#fde68a; }
.status-revoked{ background:#fee2e2; color:#991b1b; border-color:#fecaca; }
.status-draft{ background:#f1f5f9; color:#475569; border-color:#cbd5e1; }
.action-cluster{
display:flex;
gap:.5rem;
flex-wrap:wrap;
align-items:center;
}
.action-cluster .btn-sm{
display:inline-flex;
align-items:center;
gap:.4rem;
padding:.55rem .9rem;
font-size:1.2rem;
font-weight:700;
border-radius:var(--r-sm);
border:1px solid transparent;
text-decoration:none !important;
transition:all var(--t-fast);
}
.action-cluster .btn-label{ white-space:nowrap; }
.action-cluster .btn-sm.btn-primary{ background:var(--primary); color:var(--white) !important; }
.action-cluster .btn-sm.btn-primary:hover{ background:var(--primary-dark); }
.action-cluster .btn-sm.btn-success{ background:#15803d; color:var(--white) !important; }
.action-cluster .btn-sm.btn-success:hover{ background:#0f6a32; }
.action-cluster .btn-sm.btn-info{ background:#0ea5e9; color:var(--white) !important; }
.action-cluster .btn-sm.btn-info:hover{ background:#0369a1; }
.action-cluster .btn-sm.btn-warning{ background:#f59e0b; color:#fff !important; }
.action-cluster .btn-sm.btn-warning:hover{ background:#b45309; }
/* ---- Certificate number badge ---- */
.cert-mgmt .card-number{
display:inline-block;
padding:.3rem .8rem;
background:var(--bg);
border:1px solid var(--border-light);
border-radius:var(--r-sm);
font-family:'JetBrains Mono','SF Mono',Menlo,monospace;
font-size:1.2rem;
font-weight:700;
color:var(--text-secondary);
letter-spacing:.04em;
}
/* ---- Placeholder chips for body text editor ---- */
.ph-chips{
display:flex;
gap:.4rem;
flex-wrap:wrap;
margin-top:.8rem;
}
.ph-chips .btn-ghost{
padding:.3rem .7rem !important;
font-size:1.15rem !important;
font-family:'JetBrains Mono','SF Mono',Menlo,monospace !important;
font-weight:600 !important;
background:var(--bg) !important;
color:var(--primary) !important;
border:1px solid var(--border-light) !important;
}
.ph-chips .btn-ghost:hover{ background:var(--primary-mist) !important; border-color:var(--primary) !important; }
/* ---- Form actions / status / advanced toggle ---- */
.form-actions{
display:flex;
gap:1rem;
justify-content:flex-end;
flex-wrap:wrap;
margin-top:1.8rem;
padding-top:1.4rem;
border-top:1px solid var(--border-light);
}
.form-status{
margin-top:1.2rem;
padding:.8rem 1.2rem;
border-radius:var(--r-md);
font-size:1.3rem;
font-weight:600;
text-align:center;
}
.bulk-advanced{
margin-top:1.4rem;
padding:1.2rem 1.4rem;
background:var(--bg);
border:1px solid var(--border-light);
border-radius:var(--r-md);
}
.bulk-advanced summary{
cursor:pointer;
font-family:var(--font-heading);
font-weight:700;
font-size:1.3rem;
color:var(--primary);
display:flex;
align-items:center;
gap:.6rem;
list-style:none;
user-select:none;
}
.bulk-advanced summary::-webkit-details-marker{ display:none; }
.bulk-advanced summary::after{
content:'\f078';
font-family:'Font Awesome 6 Free';
font-weight:900;
margin-left:auto;
transition:transform var(--t-base);
font-size:1.1rem;
}
.bulk-advanced[open] summary::after{ transform:rotate(180deg); }
/* ---- Collapsible card (bulk issue) ---- */
.collapsible-card{ margin-top:1.4rem; }
.collapsible-header{
display:flex;
align-items:center;
justify-content:space-between;
gap:1rem;
margin-bottom:1rem;
padding-bottom:1rem;
border-bottom:1px solid var(--border-light);
flex-wrap:wrap;
}
.collapsible-header h3{
font-family:var(--font-heading);
font-size:1.5rem;
font-weight:800;
color:var(--text);
margin:0;
display:flex;
align-items:center;
gap:.8rem;
letter-spacing:-.01em;
}
.collapsible-sub{
font-size:1.3rem;
color:var(--text-muted);
line-height:1.6;
margin:0 0 1.6rem;
padding-bottom:1.2rem;
border-bottom:1px dashed var(--border-light);
}
.collapsible-sub code{
padding:.1rem .5rem;
background:var(--primary-mist);
color:var(--primary);
border-radius:4px;
font-family:'JetBrains Mono','SF Mono',Menlo,monospace;
font-size:1.15rem;
font-weight:600;
}
/* ---- Stat-card color variants ---- */
.idcard-container .stat-card.custom{ border-top-color:#8b5cf6 !important; }
.idcard-container .stat-card.custom .stat-icon{ color:#8b5cf6; }
/* ---- Empty state & no-results row ---- */
.no-results-row{ display:none; }
/* ---- Bulk issue form-row spacing tweak (already exists at .form-row-3) ---- */
.form-row-2{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
@media (max-width:768px){
.form-row-2{ grid-template-columns:1fr; }
}
/* ---- Button system for the cert admin (cleaner variants) ---- */
.cert-mgmt .btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:.6rem;
padding:1rem 1.8rem;
font-family:var(--font-heading);
font-size:1.35rem;
font-weight:700;
border-radius:var(--r-md);
border:1.5px solid transparent;
cursor:pointer;
transition:all var(--t-base);
text-decoration:none !important;
line-height:1.2;
}
.cert-mgmt .btn-sm{ padding:.7rem 1.2rem; font-size:1.25rem; }
.cert-mgmt .btn-primary{ background:var(--primary); color:var(--white) !important; border-color:var(--primary); box-shadow:0 4px 14px rgba(var(--primary-rgb),.3); }
.cert-mgmt .btn-primary:hover{ background:var(--primary-dark); border-color:var(--primary-dark); transform:translateY(-1px); box-shadow:0 8px 22px rgba(var(--primary-rgb),.4); }
.cert-mgmt .btn-secondary{ background:var(--white); color:var(--text) !important; border-color:var(--border); }
.cert-mgmt .btn-secondary:hover{ background:var(--gray-100); border-color:var(--text-muted); }
.cert-mgmt .btn-success{ background:#15803d; color:var(--white) !important; border-color:#15803d; }
.cert-mgmt .btn-success:hover{ background:#0f6a32; transform:translateY(-1px); }
.cert-mgmt .btn-ghost{ background:transparent; color:var(--text-secondary) !important; border-color:var(--border); }
.cert-mgmt .btn-ghost:hover{ background:var(--bg); color:var(--text) !important; }
.cert-mgmt .btn-danger{ background:#dc2626; color:var(--white) !important; border-color:#dc2626; }
.cert-mgmt .btn-danger:hover{ background:#b91c1c; }
.cert-mgmt .btn-info{ background:#0ea5e9; color:var(--white) !important; border-color:#0ea5e9; }
.cert-mgmt .btn-info:hover{ background:#0369a1; }
.cert-mgmt .btn-warning{ background:#f59e0b; color:#fff !important; border-color:#f59e0b; }
.cert-mgmt .btn-warning:hover{ background:#b45309; border-color:#b45309; }
/* ---- Form control standard ---- */
.cert-mgmt .form-control{
width:100%;
padding:1.05rem 1.3rem;
border:1.8px solid var(--border);
border-radius:var(--r-md);
background:var(--white);
font-family:var(--font-body);
font-size:1.38rem;
font-weight:500;
color:var(--text);
outline:none;
transition:border-color var(--t-base), box-shadow var(--t-base);
height:auto;
line-height:1.4;
}
.cert-mgmt .form-control:focus{
border-color:var(--primary);
box-shadow:0 0 0 4px var(--primary-glow);
}
.cert-mgmt .form-control::placeholder{ color:var(--text-muted); opacity:.65; }
.cert-mgmt .form-group{ margin-bottom:1.6rem; min-width:0; }
.cert-mgmt .form-group > label{
display:block;
font-family:var(--font-heading);
font-weight:700;
font-size:1.3rem;
color:var(--text);
margin-bottom:.5rem;
letter-spacing:.01em;
}
.cert-mgmt .form-row{
display:flex;
flex-wrap:wrap;
gap:1.4rem;
align-items:flex-start;
}
.cert-mgmt .form-row > .form-group{ flex:1 1 22rem; }
/* ---- Alert banners ---- */
.cert-mgmt .alert{
display:flex;
align-items:center;
gap:.8rem;
padding:1.2rem 1.6rem;
border-radius:var(--r-md);
border:1px solid;
margin-bottom:1.6rem;
font-size:1.35rem;
font-weight:500;
flex-wrap:wrap;
}
.cert-mgmt .alert-success{ background:#ecfdf5; color:#065f46; border-color:#a7f3d0; }
.cert-mgmt .alert-danger{ background:#fef2f2; color:#991b1b; border-color:#fecaca; }
/* ---- Empty state ---- */
.cert-mgmt .empty-state{
text-align:center !important;
padding:4rem 2rem !important;
background:var(--bg) !important;
color:var(--text-muted) !important;
}
.cert-mgmt .empty-state .empty-icon{
font-size:4.5rem;
opacity:.4;
margin-bottom:1rem;
color:var(--primary);
}
.cert-mgmt .empty-state h3{
font-family:var(--font-heading);
font-size:1.7rem;
font-weight:700;
color:var(--text);
margin:0 0 .6rem;
}
.cert-mgmt .empty-state p{
font-size:1.35rem;
margin:0;
line-height:1.6;
}
/* ---- Th / td refinements for certs table ---- */
.idcard-container .students-table th.th-actions{ text-align:right; padding-right:1.6rem; }
/* ---- Event-cert specific ---- */
.idcard-container .cert-mgmt-event{
--cert-accent:#ff6b3d;
--cert-accent-soft:rgba(255,107,61,.14);
}
.idcard-container .cert-mgmt-event .stat-card{ border-top-color:var(--cert-accent) !important; }
/* ---- Responsive tweaks ---- */
@media (max-width:1024px){
.qd-step{ border-right:none; border-bottom:1px solid var(--border-light); }
.qd-step:last-child{ border-bottom:none; }
}
@media (max-width:768px){
.cert-mgmt .page-header{ flex-direction:column; align-items:flex-start; }
.card-header-row{ flex-direction:column; align-items:flex-start; }
.table-filter-bar{ width:100%; }
.table-search{ flex:1 1 100%; max-width:100%; }
.cert-mgmt .form-row{ flex-direction:column; }
.cert-mgmt .form-row > .form-group{ flex:1 1 100%; }
.action-cluster{ flex-direction:column; align-items:stretch; }
.action-cluster .btn-sm{ justify-content:center; }
.cert-mgmt .btn{ width:100%; }
}
/* =====================================================
SHARED SYSTEM — applies to admin_practice_questions,
teacher_mark_attendance, teacher_create_game,
teacher_create_flashcards, teacher_create_assignment,
upload_library_material and their linked pages.
Designed so each page simply wraps in .mgmt-page >
.container > .admin-section (same as allow-exam.php).
===================================================== */
/* Alias .pq-stat-val → .pq-stat-num (page uses 'val', CSS uses 'num') */
.pq-stat-val{ font-family:var(--font-heading); font-size:3rem; font-weight:800; color:var(--primary); letter-spacing:-.02em; line-height:1; margin-bottom:.4rem; }
/* Subtle accent colors per stat variant used in admin_practice_questions */
.pq-stat.sj{ border-left-color:var(--primary); }
.pq-stat.sj .pq-stat-val{ color:var(--primary); }
.pq-stat.sw{ border-left-color:#7c3aed; }
.pq-stat.sw .pq-stat-val{ color:#7c3aed; }
.pq-stat.st{ border-left-color:var(--accent); }
.pq-stat.st .pq-stat-val{ color:var(--accent-dark); }
.pq-stat.sa{ border-left-color:#22c55e; }
.pq-stat.sa .pq-stat-val{ color:#15803d; }
/* ---------- Shared wrapping containers (fallback) ---------- */
.pq-wrap,.teacher-page,.teacher-wrap,.attendance-container,
.game-container,.flashcard-container,.assignment-container,
.library-container,.tgl-page,.slib-page{
background:var(--bg);
padding:2.4rem 0 5rem;
min-height:60vh;
}
.pq-wrap > .container,
.teacher-page > .container,
.teacher-wrap > .container,
.attendance-container > .container,
.game-container > .container,
.flashcard-container > .container,
.assignment-container > .container,
.library-container > .container,
.tgl-page > .container,
.slib-page > .container{
padding-top:1rem;
padding-bottom:1rem;
}
/* ---------- Section spacing (replaces .section-spacer) ---------- */
.section-spacer{ height:1.2rem; }
.text-right{ text-align:right; }
/* ---------- Standard card (used by game/flashcard/assignment/library) ---------- */
.game-container .card,
.flashcard-container .card,
.assignment-container .card,
.library-container .card{
background:var(--white);
border:1px solid var(--border-light);
border-radius:var(--r-xl);
padding:2.4rem;
margin-bottom:1.8rem;
box-shadow:var(--shadow-card);
border-top:3px solid var(--primary);
}
.game-container .card h3,
.flashcard-container .card h3,
.assignment-container .card h3,
.library-container .card h3{
font-family:var(--font-heading);
font-size:1.65rem;
font-weight:800;
color:var(--text);
margin:0 0 1.4rem;
padding-bottom:.8rem;
border-bottom:1px solid var(--border-light);
display:flex;
align-items:center;
gap:.6rem;
}
/* ---------- Filter grids (3-col uniform) ---------- */
.filter-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; margin-bottom:1.4rem; }
.filter-grid .filter-group{ display:flex; flex-direction:column; gap:.4rem; }
.filter-grid .filter-group label{ font-weight:700; font-size:1.25rem; color:var(--text); }
/* ---------- Form rows (3-col uniform — used by flashcards, library) ---------- */
.form-row-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
/* ---------- Form hint (used by comboboxes) ---------- */
.form-hint{ font-size:1.2rem; color:var(--text-muted); margin-top:.3rem; font-style:italic; }
/* ---------- Subject/Class dropdown (used by game/flashcard/assignment/library) ---------- */
.subject-dropdown,.class-dropdown{
position:absolute;
top:100%; left:0; right:0;
background:var(--white);
border:1px solid var(--border);
border-radius:var(--r-md);
box-shadow:var(--shadow-lg);
max-height:24rem;
overflow-y:auto;
z-index:50;
display:none;
}
.form-group{ position:relative; }
.sd-item,.cd-item{
padding:1rem 1.4rem;
border-bottom:1px solid var(--border-light);
cursor:pointer;
font-size:1.35rem;
color:var(--text);
transition:background var(--t-fast);
}
.sd-item:last-child,.cd-item:last-child{ border-bottom:none; }
.sd-item:hover,.cd-item:hover{ background:var(--primary-mist); color:var(--primary); }
.sd-item.new-subject{ font-style:italic; color:var(--primary); font-weight:700; background:var(--primary-mist); }
/* ---------- Game type selector cards ---------- */
.game-type-selector{ display:grid; grid-template-columns:repeat(auto-fit, minmax(16rem, 1fr)); gap:1.2rem; margin-top:.6rem; }
.game-type-card{ position:relative; cursor:pointer; }
.game-type-card input[type="radio"]{ position:absolute; opacity:0; width:0; height:0; }
.game-type-card .type-icon{
font-size:2.6rem;
width:5rem; height:5rem;
display:inline-flex; align-items:center; justify-content:center;
background:var(--primary-mist);
color:var(--primary);
border-radius:50%;
margin:0 auto .8rem;
transition:all var(--t-base);
}
.game-type-card .type-name{
font-family:var(--font-heading);
font-weight:700;
font-size:1.4rem;
color:var(--text);
margin-bottom:.2rem;
}
.game-type-card .game-type-desc{ font-size:1.2rem; color:var(--text-muted); line-height:1.4; }
/* ---------- Game card grid (used by teacher_create_game) ---------- */
.game-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(28rem, 1fr)); gap:1.6rem; }
.game-card{
background:var(--white);
border:1px solid var(--border-light);
border-radius:var(--r-lg);
padding:2rem;
box-shadow:var(--shadow-card);
transition:all var(--t-base);
text-align:center;
}
.game-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-hover); border-color:rgba(var(--primary-rgb),.18); }
.game-card .game-icon{ font-size:3.6rem; margin-bottom:.6rem; }
.game-card .game-title{ font-family:var(--font-heading); font-size:1.55rem; font-weight:800; color:var(--text); margin-bottom:.6rem; }
.game-card .game-meta{ display:flex; justify-content:center; gap:.5rem; flex-wrap:wrap; margin-bottom:.4rem; }
.game-card .game-stats{ font-size:1.25rem; color:var(--text-secondary); padding:.8rem 0; border-top:1px solid var(--border-light); margin-top:.6rem; }
.game-card .game-actions{ display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; margin-top:1rem; }
.game-card .game-actions .btn{ flex:1; min-width:11rem; justify-content:center; }
/* ---------- Assignment card grid (used by teacher_create_assignment) ---------- */
.assignment-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(32rem, 1fr)); gap:1.6rem; }
.assignment-card{
background:var(--white);
border:1px solid var(--border-light);
border-radius:var(--r-lg);
padding:2rem;
box-shadow:var(--shadow-card);
border-top:4px solid var(--primary);
transition:all var(--t-base);
display:flex; flex-direction:column; gap:1rem;
}
.assignment-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-hover); }
.assignment-card.overdue{ border-top-color:#dc2626; }
.assignment-card .assignment-title{ font-family:var(--font-heading); font-size:1.6rem; font-weight:800; color:var(--text); margin-bottom:.2rem; }
.assignment-card .assignment-meta{ display:flex; gap:.5rem; flex-wrap:wrap; }
.assignment-card .due-date{ font-size:1.25rem; font-weight:700; padding:.5rem 1rem; border-radius:var(--r-full); display:inline-flex; align-items:center; gap:.4rem; background:var(--gray-50); color:var(--text); align-self:flex-start; }
.assignment-card .due-date.overdue{ background:#fef2f2; color:#991b1b; }
.assignment-card .submission-stats{ font-size:1.2rem; color:var(--text-secondary); padding:.6rem 1rem; background:var(--gray-50); border-radius:var(--r-md); border:1px solid var(--border-light); }
.assignment-card .assignment-description{ font-size:1.3rem; color:var(--text-secondary); line-height:1.6; flex:1; }
.assignment-card .assignment-actions{ display:flex; gap:.6rem; flex-wrap:wrap; }
.assignment-card .assignment-actions .btn{ flex:1; min-width:10rem; justify-content:center; }
/* ---------- Flashcard list item ---------- */
.flashcard-item{
background:var(--white);
border:1px solid var(--border-light);
border-left:4px solid var(--primary);
border-radius:var(--r-md);
padding:1.8rem 2rem;
margin-bottom:1.4rem;
box-shadow:var(--shadow-card);
}
.flashcard-item .flashcard-header{ display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; margin-bottom:1rem; flex-wrap:wrap; }
.flashcard-item .flashcard-meta{ display:flex; gap:.5rem; flex-wrap:wrap; }
.flashcard-item .flashcard-content{ margin-bottom:.8rem; }
.flashcard-item .flashcard-label{ font-weight:700; font-size:1.2rem; color:var(--primary); text-transform:uppercase; letter-spacing:.04em; margin-bottom:.3rem; }
.flashcard-item .flashcard-text{ font-size:1.4rem; color:var(--text); line-height:1.6; }
.flashcard-item .hint-box{ background:var(--gray-50); border:1px solid var(--border-light); border-left:3px solid var(--accent); border-radius:var(--r-sm); padding:.8rem 1.2rem; margin-top:.8rem; font-size:1.3rem; color:var(--text-secondary); }
.flashcard-item .flashcard-meta-bottom{ font-size:1.2rem; color:var(--text-muted); margin-top:1rem; padding-top:.8rem; border-top:1px solid var(--border-light); }
/* ---------- Difficulty badge ---------- */
.difficulty-badge{ padding:.3rem 1rem; border-radius:var(--r-full); font-size:1.2rem; font-weight:700; }
.difficulty-badge.easy{ background:#ecfdf5; color:#065f46; }
.difficulty-badge.medium{ background:#fef3c7; color:#92400e; }
.difficulty-badge.hard{ background:#fee2e2; color:#991b1b; }
/* ---------- Meta badge (subject/class/etc) ---------- */
.meta-badge{
display:inline-flex;
align-items:center;
gap:.3rem;
padding:.3rem .8rem;
background:var(--gray-50);
border:1px solid var(--border-light);
border-radius:var(--r-full);
font-size:1.2rem;
font-weight:600;
color:var(--text-secondary);
}
/* ---------- File upload area ---------- */
.file-upload-area{
border:2px dashed var(--border);
border-radius:var(--r-lg);
padding:2.4rem;
text-align:center;
background:var(--gray-25);
cursor:pointer;
transition:all var(--t-base);
display:flex; flex-direction:column; align-items:center; gap:.6rem;
}
.file-upload-area:hover{ border-color:var(--primary); background:var(--primary-mist); }
.file-upload-area .upload-icon{ font-size:3rem; color:var(--primary); }
/* ---------- Alert boxes (used by game/flashcard/assignment/library) ---------- */
.alert{
padding:1.2rem 1.6rem;
border-radius:var(--r-md);
margin-bottom:1.6rem;
font-size:1.35rem;
border:1px solid;
display:flex; align-items:flex-start; gap:.8rem;
}
.alert-success{ background:#ecfdf5; color:#065f46; border-color:#a7f3d0; }
.alert-error{ background:#fef2f2; color:#991b1b; border-color:#fecaca; }
.alert-warning{ background:#fffbeb; color:#92400e; border-color:#fde68a; }
.alert-info{ background:#eff6ff; color:#1e3a8a; border-color:#bfdbfe; }
/* ---------- Empty state ---------- */
.empty-state{
text-align:center;
padding:4rem 2rem;
background:var(--white);
border:1px dashed var(--border);
border-radius:var(--r-xl);
color:var(--text-muted);
}
.empty-state .empty-icon,.empty-state .empty-state-icon{
font-size:4rem;
opacity:.5;
margin-bottom:1rem;
display:block;
}
.empty-state h3{ font-family:var(--font-heading); font-size:1.7rem; font-weight:700; color:var(--text); margin:0 0 .6rem; }
.empty-state p{ font-size:1.35rem; margin:.4rem 0 1.2rem; line-height:1.5; }
/* =====================================================
TEACHER ASSIGNMENT SUBMISSIONS (.tch-as-*)
===================================================== */
.tch-as-wrap{ background:transparent; padding:0; min-height:0; }
.tch-as-wrap .container{ padding-top:0; }
.tch-as-container{ max-width:110rem; margin:0 auto; padding:0 2.4rem; }
.tch-as-text-right{ text-align:right; margin-bottom:1rem; }
.tch-as-alert{ padding:1.2rem 1.6rem; border-radius:var(--r-md); margin-bottom:1.6rem; font-size:1.35rem; border:1px solid; }
.tch-as-alert-success{ background:#ecfdf5; color:#065f46; border-color:#a7f3d0; }
.tch-as-alert-error{ background:#fef2f2; color:#991b1b; border-color:#fecaca; }
.tch-as-header-card{
background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
color:var(--white);
border-radius:var(--r-xl);
padding:2.2rem 2.4rem;
margin-bottom:1.8rem;
box-shadow:var(--shadow-lg);
position:relative; overflow:hidden;
}
.tch-as-header-card::before{ content:''; position:absolute; top:-6rem; right:-4rem; width:18rem; height:18rem; border-radius:50%; background:rgba(255,255,255,.07); }
.tch-as-back-link{ color:var(--white); text-decoration:none; opacity:.85; font-weight:600; font-size:1.3rem; position:relative; display:inline-block; margin-bottom:.6rem; }
.tch-as-back-link:hover{ opacity:1; }
.tch-as-header-title{ font-family:var(--font-heading); font-size:2rem; font-weight:800; color:var(--white); margin-bottom:.6rem; position:relative; }
.tch-as-header-info{ display:flex; gap:1rem; flex-wrap:wrap; font-size:1.3rem; color:rgba(255,255,255,.9); position:relative; }
.tch-as-header-info span{ display:inline-flex; align-items:center; gap:.3rem; }
.tch-as-overdue{ background:#dc2626; padding:.3rem .9rem; border-radius:var(--r-full); font-weight:700; font-size:1.15rem; }
.tch-as-description{ background:rgba(255,255,255,.12); border-radius:var(--r-md); padding:1rem 1.4rem; margin-top:1rem; font-size:1.35rem; color:rgba(255,255,255,.94); line-height:1.6; position:relative; }
.tch-as-stats-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:1.2rem; margin-bottom:1.8rem; }
.tch-as-stat-card{ background:var(--white); border:1px solid var(--border-light); border-radius:var(--r-lg); padding:1.6rem 1rem; text-align:center; box-shadow:var(--shadow-card); border-top:3px solid var(--primary); }
.tch-as-stat-card.tch-as-submitted{ border-top-color:#22c55e; }
.tch-as-stat-card.tch-as-late{ border-top-color:#f59e0b; }
.tch-as-stat-card.tch-as-pending{ border-top-color:#94a3b8; }
.tch-as-stat-card.tch-as-graded{ border-top-color:#2563eb; }
.tch-as-stat-icon{ font-size:2rem; margin-bottom:.4rem; }
.tch-as-stat-number{ font-family:var(--font-heading); font-size:2.2rem; font-weight:800; color:var(--text); line-height:1; }
.tch-as-stat-label{ font-size:1.15rem; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.06em; margin-top:.3rem; }
.tch-as-card{ background:var(--white); border:1px solid var(--border-light); border-radius:var(--r-xl); padding:2.4rem; margin-bottom:1.8rem; box-shadow:var(--shadow-card); border-top:3px solid var(--primary); }
.tch-as-card h3{ font-family:var(--font-heading); font-size:1.65rem; font-weight:800; color:var(--text); margin:0 0 1.4rem; padding-bottom:.8rem; border-bottom:1px solid var(--border-light); }
.tch-as-submissions-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(38rem, 1fr)); gap:1.4rem; }
.tch-as-submission-card{ background:var(--white); border:1px solid var(--border-light); border-left:4px solid var(--primary); border-radius:var(--r-md); padding:1.8rem; box-shadow:var(--shadow-xs); transition:all var(--t-base); }
.tch-as-submission-card:hover{ box-shadow:var(--shadow-md); border-color:rgba(var(--primary-rgb),.18); }
.tch-as-submission-header{ display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:1rem; flex-wrap:wrap; }
.tch-as-student-info{ display:flex; align-items:center; gap:1rem; }
.tch-as-student-info img{ width:5rem; height:5rem; border-radius:50%; object-fit:cover; border:2px solid var(--border-light); }
.tch-as-student-avatar{ width:5rem; height:5rem; border-radius:50%; background:var(--primary); color:var(--white); display:inline-flex; align-items:center; justify-content:center; font-family:var(--font-heading); font-size:1.8rem; font-weight:800; }
.tch-as-student-name{ font-weight:700; font-size:1.4rem; color:var(--text); }
.tch-as-student-matric{ font-size:1.2rem; color:var(--text-muted); }
.tch-as-status-badge{ padding:.4rem 1rem; border-radius:var(--r-full); font-size:1.2rem; font-weight:700; }
.tch-as-status-submitted{ background:#ecfdf5; color:#065f46; }
.tch-as-status-late{ background:#fef3c7; color:#92400e; }
.tch-as-status-pending{ background:#f1f5f9; color:#475569; }
.tch-as-submission-meta{ font-size:1.25rem; color:var(--text-muted); margin-bottom:.6rem; }
.tch-as-submission-content{ background:var(--gray-50); border-radius:var(--r-md); padding:1rem 1.2rem; margin:.6rem 0; font-size:1.3rem; }
.tch-as-answer-box{ margin-top:.4rem; color:var(--text); line-height:1.6; }
.tch-as-grade-display{ background:var(--primary-mist); border:1px solid var(--primary); border-radius:var(--r-md); padding:1rem 1.4rem; margin-top:.8rem; }
.tch-as-grade-badge{ display:inline-block; width:3.4rem; height:3.4rem; line-height:3.4rem; text-align:center; border-radius:50%; background:var(--primary); color:var(--white); font-family:var(--font-heading); font-weight:800; font-size:1.4rem; margin-right:.8rem; }
.tch-as-teacher-remark{ font-size:1.3rem; color:var(--text); margin-top:.4rem; line-height:1.5; }
.tch-as-grade-date{ font-size:1.2rem; color:var(--text-muted); margin-top:.4rem; }
.tch-as-submission-actions{ display:flex; gap:.6rem; margin-top:1rem; flex-wrap:wrap; }
.tch-as-submission-actions .tch-as-btn{ flex:1; min-width:12rem; justify-content:center; }
.tch-as-no-submission{ font-style:italic; color:var(--text-muted); font-size:1.3rem; }
.tch-as-empty-state{ text-align:center; padding:4rem 2rem; color:var(--text-muted); }
.tch-as-empty-state-icon{ font-size:4rem; opacity:.5; margin-bottom:1rem; }
.tch-as-empty-state h3{ font-size:1.65rem; font-weight:700; color:var(--text); margin:0 0 .6rem; }
/* Tch-as buttons (use accent color for primary) */
.tch-as-btn{
display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
padding:.85rem 1.4rem;
border-radius:var(--r-md);
font-family:var(--font-heading); font-weight:700; font-size:1.25rem;
border:1px solid transparent;
cursor:pointer; transition:all var(--t-base);
text-decoration:none !important;
}
.tch-as-btn-primary{ background:var(--accent); color:var(--white); border-color:var(--accent); }
.tch-as-btn-primary:hover{ background:var(--accent-dark); border-color:var(--accent-dark); transform:translateY(-1px); }
.tch-as-btn-success{ background:#22c55e; color:var(--white); border-color:#22c55e; }
.tch-as-btn-success:hover{ background:#15803d; border-color:#15803d; transform:translateY(-1px); }
.tch-as-btn-danger{ background:#dc2626; color:var(--white); border-color:#dc2626; }
.tch-as-btn-danger:hover{ background:#b91c1c; border-color:#b91c1c; transform:translateY(-1px); }
.tch-as-submit-full{ width:100%; padding:1.1rem; font-size:1.4rem; }
.tch-as-form-group{ margin-bottom:1.6rem; }
.tch-as-form-group label{ display:block; font-family:var(--font-heading); font-weight:600; font-size:1.3rem; color:var(--text); margin-bottom:.5rem; }
.tch-as-form-control{ width:100%; padding:1.1rem 1.4rem; border:2px solid var(--border); border-radius:var(--r-sm); font-family:var(--font-body); font-size:1.4rem; color:var(--text); background:var(--white); outline:none; transition:border-color var(--t-base), box-shadow var(--t-base); }
.tch-as-form-control:focus{ border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-glow); }
.tch-as-modal{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.55); backdrop-filter:blur(4px); z-index:9999; align-items:center; justify-content:center; padding:2rem; }
.tch-as-modal[style*="flex"]{ display:flex !important; }
.tch-as-modal-content{ background:var(--white); border-radius:var(--r-xl); max-width:64rem; width:100%; max-height:90vh; overflow:auto; box-shadow:var(--shadow-2xl); padding:2.4rem; }
.tch-as-modal-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:1.4rem; padding-bottom:1rem; border-bottom:1px solid var(--border-light); }
.tch-as-modal-header h3{ margin:0; font-family:var(--font-heading); font-size:1.65rem; font-weight:800; }
.tch-as-close{ font-size:2.4rem; cursor:pointer; color:var(--text-muted); line-height:1; background:none; border:none; }
.tch-as-grading-name{ background:var(--primary-mist); border:1px solid var(--primary); border-radius:var(--r-md); padding:.8rem 1.2rem; margin-bottom:1.4rem; font-weight:700; color:var(--primary-dark); font-size:1.35rem; }
.tch-as-modal-body-content{ font-size:1.35rem; line-height:1.6; }
.tch-as-modal-loading{ text-align:center; padding:2rem; color:var(--text-muted); }
.tch-as-modal-loading-icon{ font-size:3rem; margin-bottom:.8rem; }
.tch-as-modal-error{ background:#fef2f2; color:#991b1b; padding:1rem; border-radius:var(--r-md); text-align:center; }
/* =====================================================
TEACHER ADD GAME QUESTIONS (.tch-agq-*)
===================================================== */
.tch-agq-wrap{ background:transparent; padding:0; min-height:0; }
.tch-agq-wrap .container{ padding-top:0; }
.tch-agq-container{ max-width:110rem; margin:0 auto; padding:0 2.4rem; }
.tch-agq-text-right{ text-align:right; margin-bottom:1rem; }
.tch-agq-game-header{
background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
color:var(--white);
border-radius:var(--r-xl);
padding:2rem 2.4rem;
margin-bottom:1.6rem;
box-shadow:var(--shadow-lg);
position:relative; overflow:hidden;
}
.tch-agq-game-header::before{ content:''; position:absolute; top:-6rem; right:-4rem; width:18rem; height:18rem; border-radius:50%; background:rgba(255,255,255,.07); }
.tch-agq-game-title{ font-family:var(--font-heading); font-size:1.8rem; font-weight:800; color:var(--white); margin-bottom:.5rem; position:relative; }
.tch-agq-game-info{ display:flex; gap:1rem; flex-wrap:wrap; color:rgba(255,255,255,.92); font-size:1.3rem; position:relative; }
.tch-agq-game-info span{ display:inline-flex; align-items:center; gap:.3rem; }
.tch-agq-alert{ padding:1.2rem 1.6rem; border-radius:var(--r-md); margin-bottom:1.4rem; font-size:1.35rem; border:1px solid; }
.tch-agq-alert-success{ background:#ecfdf5; color:#065f46; border-color:#a7f3d0; }
.tch-agq-alert-error{ background:#fef2f2; color:#991b1b; border-color:#fecaca; }
.tch-agq-error-list{ margin:.6rem 0 0 1.4rem; padding:0; font-size:1.2rem; }
.tch-agq-error-list li{ margin-bottom:.3rem; }
.tch-agq-card{ background:var(--white); border:1px solid var(--border-light); border-radius:var(--r-xl); padding:2.4rem; margin-bottom:1.8rem; box-shadow:var(--shadow-card); border-top:3px solid var(--primary); }
.tch-agq-tab-nav{ display:flex; gap:.6rem; margin-bottom:1.6rem; border-bottom:2px solid var(--border-light); padding-bottom:.2rem; }
.tch-agq-tab-btn{ padding:1rem 1.8rem; border-radius:var(--r-md) var(--r-md) 0 0; font-weight:700; font-size:1.35rem; color:var(--text-muted); cursor:pointer; border:1px solid transparent; border-bottom:none; background:transparent; transition:all var(--t-base); font-family:inherit; }
.tch-agq-tab-btn:hover{ color:var(--primary); background:var(--primary-mist); }
.tch-agq-tab-btn.active{ background:var(--white); color:var(--primary); border-color:var(--border-light); border-bottom:2px solid var(--white); margin-bottom:-2px; }
.tch-agq-tab-content{ display:none; }
.tch-agq-tab-content.active{ display:block; }
.tch-agq-tab-content h3{ font-family:var(--font-heading); font-size:1.5rem; font-weight:700; color:var(--text); margin:0 0 1.2rem; }
.tch-agq-form-group{ margin-bottom:1.6rem; }
.tch-agq-form-group label{ display:block; font-family:var(--font-heading); font-weight:600; font-size:1.3rem; color:var(--text); margin-bottom:.5rem; }
.tch-agq-form-control{ width:100%; padding:1.1rem 1.4rem; border:2px solid var(--border); border-radius:var(--r-sm); font-family:var(--font-body); font-size:1.4rem; color:var(--text); background:var(--white); outline:none; transition:border-color var(--t-base), box-shadow var(--t-base); }
.tch-agq-form-control:focus{ border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-glow); }
.tch-agq-form-row{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.4rem; }
.tch-agq-btn{
display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
padding:.85rem 1.6rem; border-radius:var(--r-md);
font-family:var(--font-heading); font-weight:700; font-size:1.3rem;
border:1px solid transparent; cursor:pointer;
transition:all var(--t-base); text-decoration:none !important;
}
.tch-agq-btn-primary{ background:var(--accent); color:var(--white); border-color:var(--accent); }
.tch-agq-btn-primary:hover{ background:var(--accent-dark); border-color:var(--accent-dark); transform:translateY(-1px); }
.tch-agq-btn-success{ background:#22c55e; color:var(--white); border-color:#22c55e; }
.tch-agq-btn-success:hover{ background:#15803d; transform:translateY(-1px); }
.tch-agq-btn-danger{ background:#dc2626; color:var(--white); border-color:#dc2626; }
.tch-agq-btn-danger:hover{ background:#b91c1c; transform:translateY(-1px); }
.tch-agq-info-banner{ background:var(--primary-mist); border:1px solid var(--primary); border-left:4px solid var(--primary); border-radius:var(--r-md); padding:1.4rem 1.8rem; margin-bottom:1.6rem; }
.tch-agq-banner-title{ font-family:var(--font-heading); font-weight:700; font-size:1.4rem; color:var(--primary-dark); margin:0 0 .6rem; }
.tch-agq-info-banner p{ font-size:1.3rem; color:var(--text); margin:.4rem 0; }
.tch-agq-info-banner ol{ margin:.6rem 0 .8rem 1.6rem; font-size:1.3rem; }
.tch-agq-info-banner ol li{ margin-bottom:.3rem; }
.tch-agq-csv-format{ background:var(--white); border:1px solid var(--border); border-radius:var(--r-sm); padding:.8rem 1rem; font-family:'JetBrains Mono',monospace; font-size:1.2rem; color:var(--text); line-height:1.7; margin-top:.6rem; white-space:pre-wrap; word-break:break-word; }
.tch-agq-hidden{ display:none; }
.tch-agq-upload-area{ border:2px dashed var(--border); border-radius:var(--r-lg); padding:2.6rem 2rem; text-align:center; background:var(--gray-25); cursor:pointer; transition:all var(--t-base); }
.tch-agq-upload-area:hover,.tch-agq-upload-area-success{ border-color:var(--primary); background:var(--primary-mist); }
.tch-agq-upload-icon{ font-size:3.4rem; color:var(--primary); margin-bottom:.6rem; }
.tch-agq-upload-text{ font-family:var(--font-heading); font-weight:700; font-size:1.4rem; color:var(--text); }
.tch-agq-upload-subtext{ font-size:1.25rem; color:var(--text-muted); margin-top:.3rem; }
.tch-agq-selected-file{ display:none; background:var(--primary-mist); border:1px solid var(--primary); border-radius:var(--r-md); padding:.8rem 1.2rem; margin-top:1rem; font-size:1.3rem; color:var(--primary-dark); }
.tch-agq-question-item{ background:var(--white); border:1px solid var(--border-light); border-radius:var(--r-md); padding:1.6rem 1.8rem; margin-bottom:1.2rem; box-shadow:var(--shadow-xs); }
.tch-agq-question-header{ display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:.8rem; flex-wrap:wrap; }
.tch-agq-question-number{ font-family:var(--font-heading); font-weight:800; font-size:1.4rem; color:var(--primary); padding:.3rem .9rem; background:var(--primary-mist); border-radius:var(--r-full); }
.tch-agq-question-points{ font-size:1.25rem; font-weight:700; color:var(--accent-dark); padding:.3rem .9rem; background:#fef3c7; border-radius:var(--r-full); }
.tch-agq-question-text{ font-size:1.4rem; color:var(--text); line-height:1.6; margin-bottom:.8rem; }
.tch-agq-options-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:.6rem; margin-top:.6rem; }
.tch-agq-option-item{ padding:.7rem 1rem; background:var(--gray-50); border:1px solid var(--border-light); border-radius:var(--r-sm); font-size:1.3rem; color:var(--text); }
.tch-agq-option-item.tch-agq-correct{ background:#ecfdf5; border-color:#22c55e; color:#065f46; font-weight:700; }
.tch-agq-answer-text{ background:var(--primary-mist); border:1px solid var(--primary); border-radius:var(--r-sm); padding:.8rem 1.2rem; margin-top:.6rem; font-size:1.35rem; color:var(--primary-dark); }
.tch-agq-empty-state{ text-align:center; padding:4rem 2rem; color:var(--text-muted); }
.tch-agq-empty-state-icon{ font-size:4rem; opacity:.5; margin-bottom:1rem; }
.tch-agq-empty-state h3{ font-size:1.65rem; font-weight:700; color:var(--text); margin:0 0 .6rem; }
/* =====================================================
TEACHER GAME LEADERBOARD (.tgl-page, .leaderboard-*)
===================================================== */
.tgl-page{ background:var(--bg); padding:2rem 0 5rem; min-height:60vh; }
.tgl-page .leaderboard-container{ max-width:110rem; margin:0 auto; padding:0 2.4rem; }
.leaderboard-container .header-card{
background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
color:var(--white);
border-radius:var(--r-xl);
padding:2.2rem 2.4rem;
margin-bottom:1.8rem;
position:relative; overflow:hidden;
box-shadow:var(--shadow-lg);
}
.leaderboard-container .header-card::before{ content:''; position:absolute; top:-6rem; right:-4rem; width:18rem; height:18rem; border-radius:50%; background:rgba(255,255,255,.07); }
.leaderboard-container .header-card .header-title{ font-family:var(--font-heading); font-size:2rem; font-weight:800; color:var(--white); margin-bottom:.4rem; position:relative; }
.leaderboard-container .header-card .header-info{ color:rgba(255,255,255,.9); font-size:1.35rem; display:flex; flex-wrap:wrap; gap:1rem; position:relative; }
.leaderboard-container .header-card .header-info span{ display:inline-flex; align-items:center; gap:.3rem; }
.leaderboard-container .filter-section{ background:var(--white); border:1px solid var(--border-light); border-radius:var(--r-lg); padding:1.6rem 1.8rem; margin-bottom:1.6rem; box-shadow:var(--shadow-card); }
.leaderboard-container .filter-row{ display:flex; align-items:flex-end; gap:1.2rem; flex-wrap:wrap; }
.leaderboard-container .filter-row .form-group{ flex:1; min-width:20rem; }
.leaderboard-container .filter-row > div{ flex:1; min-width:20rem; }
.leaderboard-container .filter-row .filter-label{ display:block; font-weight:700; font-size:1.25rem; color:var(--text); margin-bottom:.4rem; }
.leaderboard-container .filter-row .filter-select{ width:100%; padding:.9rem 1.2rem; border:1.5px solid var(--border); border-radius:var(--r-md); font-size:1.35rem; background:var(--white); }
.leaderboard-container .filter-row .filter-select:focus{ border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-glow); outline:none; }
.leaderboard-container .filter-tag{ display:inline-flex; padding:.4rem 1rem; background:var(--primary-mist); color:var(--primary); border-radius:var(--r-full); font-size:1.2rem; font-weight:700; align-items:center; gap:.6rem; }
.leaderboard-container .filter-tag a{ color:var(--primary); text-decoration:none; font-weight:800; opacity:.7; }
.leaderboard-container .filter-tag a:hover{ opacity:1; }
.leaderboard-container .stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; margin-bottom:1.8rem; }
.leaderboard-container .stat-card{ background:var(--white); border:1px solid var(--border-light); border-radius:var(--r-lg); padding:1.8rem 1.2rem; text-align:center; box-shadow:var(--shadow-card); border-top:3px solid var(--primary); }
.leaderboard-container .stat-number{ font-family:var(--font-heading); font-size:2.4rem; font-weight:800; color:var(--text); line-height:1; }
.leaderboard-container .stat-label{ font-size:1.15rem; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.04em; margin-top:.4rem; }
.leaderboard-container .card{ background:var(--white); border:1px solid var(--border-light); border-radius:var(--r-xl); padding:2.4rem; margin-bottom:1.8rem; box-shadow:var(--shadow-card); border-top:3px solid var(--primary); }
.leaderboard-container .card .card-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:1.4rem; flex-wrap:wrap; gap:1rem; padding-bottom:.8rem; border-bottom:1px solid var(--border-light); }
.leaderboard-container .card .card-head h3{ margin:0; font-family:var(--font-heading); font-size:1.65rem; font-weight:800; color:var(--text); }
.leaderboard-container .table-responsive{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.leaderboard-table{ width:100%; border-collapse:collapse; font-size:1.35rem; }
.leaderboard-table th{ background:var(--gray-900); color:var(--white); padding:1rem .8rem; font-size:1.15rem; text-transform:uppercase; letter-spacing:.04em; text-align:left; white-space:nowrap; }
.leaderboard-table td{ padding:1rem .8rem; border-bottom:1px solid var(--border-light); vertical-align:middle; }
.leaderboard-table tr:last-child td{ border:none; }
.leaderboard-table tr:hover td{ background:var(--primary-mist); }
.rank-badge{ display:inline-flex; align-items:center; justify-content:center; width:3rem; height:3rem; border-radius:50%; background:var(--gray-100); color:var(--text-secondary); font-family:var(--font-heading); font-weight:800; font-size:1.3rem; }
.rank-badge.gold{ background:linear-gradient(135deg,#fbbf24,#d97706); color:var(--white); }
.rank-badge.silver{ background:linear-gradient(135deg,#9ca3af,#6b7280); color:var(--white); }
.rank-badge.bronze{ background:linear-gradient(135deg,#d97706,#92400e); color:var(--white); }
.score-badge{ display:inline-block; padding:.35rem 1rem; background:var(--primary-mist); color:var(--primary-dark); border-radius:var(--r-full); font-family:var(--font-heading); font-weight:800; font-size:1.3rem; }
.leaderboard-container .empty-state{ text-align:center; padding:4rem 2rem; color:var(--text-muted); }
.leaderboard-container .back-row{ margin-top:1.6rem; text-align:right; }
/* =====================================================
STUDENT LIBRARY / VIEW CALENDAR — refinements
===================================================== */
.slib-page{ background:var(--bg); padding:2rem 0 5rem; }
.slib-page .library-wrap{ max-width:110rem; margin:0 auto; padding:0 2.4rem; }
.slib-page .library-container{ }
.slib-page .header-card{
background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
color:var(--white);
border-radius:var(--r-xl);
padding:2.2rem 2.4rem;
margin-bottom:1.8rem;
position:relative; overflow:hidden;
box-shadow:var(--shadow-lg);
}
.slib-page .header-card::before{ content:''; position:absolute; top:-6rem; right:-4rem; width:18rem; height:18rem; border-radius:50%; background:rgba(255,255,255,.07); }
.slib-page .header-card .header-title{ font-family:var(--font-heading); font-size:2rem; font-weight:800; color:var(--white); margin-bottom:.4rem; position:relative; }
.slib-page .header-card .header-subtitle{ color:rgba(255,255,255,.86); font-size:1.35rem; position:relative; }
.slib-page .header-card .header-subtitle strong{ color:var(--white); }
.slib-page .filter-section{ background:var(--white); border:1px solid var(--border-light); border-radius:var(--r-lg); padding:1.6rem 1.8rem; margin-bottom:1.6rem; box-shadow:var(--shadow-card); }
.slib-page .filter-row{ display:grid; grid-template-columns:1fr 1fr 1fr auto auto; gap:1.2rem; align-items:end; }
.slib-page .filter-row .form-group{ display:flex; flex-direction:column; gap:.4rem; margin:0; }
.slib-page .filter-row label{ font-weight:700; font-size:1.25rem; color:var(--text); }
.slib-page .filter-row .form-control{ padding:.9rem 1.2rem; border:1.5px solid var(--border); border-radius:var(--r-md); font-size:1.35rem; background:var(--white); }
.slib-page .filter-row .form-control:focus{ border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-glow); outline:none; }
.slib-page .filter-row .btn{ height:4.6rem; padding:0 1.6rem; display:inline-flex; align-items:center; justify-content:center; }
.slib-page .materials-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(30rem, 1fr)); gap:1.6rem; }
.slib-page .material-card{ background:var(--white); border:1px solid var(--border-light); border-radius:var(--r-lg); padding:1.8rem; box-shadow:var(--shadow-card); transition:all var(--t-base); display:flex; flex-direction:column; gap:.8rem; }
.slib-page .material-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-hover); border-color:rgba(var(--primary-rgb),.12); }
.slib-page .material-icon{ font-size:2.6rem; }
.slib-page .material-title{ font-weight:800; font-size:1.45rem; color:var(--text); line-height:1.3; }
.slib-page .material-meta{ display:flex; gap:.5rem; flex-wrap:wrap; }
.slib-page .material-description{ font-size:1.3rem; color:var(--text-muted); line-height:1.6; flex:1; }
.slib-page .material-stats{ font-size:1.2rem; color:var(--text-muted); border-top:1px solid var(--border-light); padding-top:.8rem; }
.slib-page .material-actions{ display:flex; gap:.8rem; margin-top:.6rem; }
.slib-page .material-actions .btn-success,.slib-page .material-actions .btn-info{ flex:1; padding:.85rem 1rem; border-radius:var(--r-md); font-weight:700; font-size:1.25rem; text-align:center; text-decoration:none !important; transition:all var(--t-base); display:inline-flex; align-items:center; justify-content:center; gap:.4rem; }
.slib-page .material-actions .btn-success{ background:#15803d; color:var(--white); border:1px solid #15803d; }
.slib-page .material-actions .btn-success:hover{ background:#14532d; transform:translateY(-1px); }
.slib-page .material-actions .btn-info{ background:#2563eb; color:var(--white); border:1px solid #2563eb; }
.slib-page .material-actions .btn-info:hover{ background:#1d4ed8; transform:translateY(-1px); }
.slib-page .empty-state{ text-align:center; padding:4rem 2rem; background:var(--white); border:1px dashed var(--border); border-radius:var(--r-xl); color:var(--text-muted); }
.slib-page .empty-state h2{ font-family:var(--font-heading); font-size:1.8rem; font-weight:700; color:var(--text); margin:0 0 .6rem; }
.slib-page .empty-state p{ font-size:1.35rem; margin:0 0 1.4rem; }
/* Active filter chips in student_library */
.slib-active-filters{ background:#eff6ff; border:1px solid #bfdbfe; border-left:4px solid #2563eb; border-radius:var(--r-md); padding:1rem 1.4rem; margin-bottom:1.6rem; font-size:1.3rem; color:#1e3a8a; }
.slib-active-filters strong{ color:var(--text); margin-right:.6rem; }
.slib-active-filters .filter-tag{ margin-right:.4rem; }
/* =====================================================
COMMON RESPONSE — table, button, pagination polish
===================================================== */
.attendance-container .att-print-modal,
.tch-as-modal,
.tch-agq-modal,
.att-print-modal{ /* safety: same defaults as att-modal */ }
/* Polish: ensure all .btn variants look like standard buttons */
.btn-back{ background:var(--gray-100) !important; color:var(--text) !important; border:1px solid var(--border) !important; }
.btn-back:hover{ background:var(--gray-200) !important; }
/* Responsive grid adjustments for the pages */
@media (max-width:1024px){
.tch-as-stats-grid{ grid-template-columns:repeat(2,1fr); }
.filter-row,.slib-page .filter-row{ grid-template-columns:1fr 1fr; }
.form-row-3{ grid-template-columns:1fr 1fr; }
}
@media (max-width:768px){
.game-grid,.assignment-grid,.materials-grid{ grid-template-columns:1fr; }
.tch-as-stats-grid,.leaderboard-container .stats-grid{ grid-template-columns:1fr 1fr; }
.tch-as-submissions-grid{ grid-template-columns:1fr; }
.filter-row,.slib-page .filter-row{ grid-template-columns:1fr; }
.form-row-3,.tch-agq-form-row{ grid-template-columns:1fr; }
.filter-grid{ grid-template-columns:1fr; }
.tch-agq-options-list{ grid-template-columns:1fr; }
.tch-as-header-info,.tch-agq-game-info{ flex-direction:column; gap:.4rem; }
.game-type-selector{ grid-template-columns:1fr 1fr; }
}
/* =====================================================
Fix 7: STAFF DIRECTORY CARDS (.dir-*)
The original .dir-* styles defined a basic layout but
never styled the .dir-card itself, the photo, the body,
the role chip, the contact rows, the action buttons,
the empty state, or the toolbar. This block fills those
gaps and aligns them with the rest of stylenew.
===================================================== */
.dir-toolbar-row{ display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap; }
.dir-toolbar-row + .dir-toolbar-row{ margin-top:1.2rem; padding-top:1.2rem; border-top:1px solid var(--border-light); }
.dir-search-wrapper{ position:relative; flex:1 1 28rem; max-width:42rem; }
.dir-search-icon{ position:absolute; left:1.4rem; top:50%; transform:translateY(-50%); color:var(--text-muted); font-size:1.4rem; pointer-events:none; }
.dir-search-wrapper .dir-search{ max-width:none; padding-left:4rem; padding-right:4rem; }
.dir-search-clear{ position:absolute; right:.6rem; top:50%; transform:translateY(-50%); background:var(--gray-100); border:none; width:3rem; height:3rem; border-radius:50%; color:var(--text-muted); cursor:pointer; opacity:0; visibility:hidden; transition:all var(--t-fast); display:inline-flex; align-items:center; justify-content:center; }
.dir-search-clear.is-visible{ opacity:1; visibility:visible; }
.dir-search-clear:hover{ background:var(--red-50, #fef2f2); color:var(--red-600, #dc2626); }
.dir-result-count{ display:inline-flex; align-items:center; gap:.6rem; padding:.7rem 1.4rem; background:var(--primary-mist); color:var(--primary-dark); border-radius:var(--r-full); font-size:1.3rem; font-weight:600; }
.dir-result-count i{ font-size:1.2rem; }
.dir-filter{ background:var(--white); border:1.5px solid var(--border); color:var(--text-secondary); font-size:1.3rem; padding:.7rem 1.4rem; }
.dir-filter em{ font-style:normal; background:rgba(255,255,255,.3); padding:.15rem .6rem; border-radius:var(--r-full); font-size:1.15rem; min-width:2.4rem; text-align:center; }
.dir-filter:not(.is-active) em{ background:var(--gray-100); color:var(--text-muted); }
.dir-filter.is-active{ background:var(--primary); color:var(--white); border-color:var(--primary); box-shadow:0 4px 14px var(--primary-glow); }
.dir-card{
position:relative;
background:var(--white);
border:1px solid var(--border-light);
border-radius:var(--r-lg);
box-shadow:var(--shadow-card);
padding:2.4rem 2rem 2rem;
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
transition:all var(--t-base);
overflow:hidden;
--role-color:#64748b;
}
.dir-card::before{
content:'';
position:absolute; top:0; left:0; right:0; height:.6rem;
background:var(--role-color);
opacity:.95;
}
.dir-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-hover); border-color:rgba(var(--primary-rgb),.2); }
.dir-card.is-inactive{ opacity:.78; }
.dir-card.dir-hidden{ display:none; }
.dir-card.dir-reveal{ animation: dirReveal .5s ease both; }
@keyframes dirReveal{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:translateY(0); } }
.dir-card-photo{
width:10rem; height:10rem;
border-radius:50%;
background:var(--photo-bg, var(--primary));
color:var(--white);
display:flex; align-items:center; justify-content:center;
font-size:3.6rem; font-weight:800; font-family:var(--font-heading);
margin:0 0 1.4rem;
position:relative;
box-shadow:0 6px 18px rgba(0,0,0,.1);
overflow:hidden;
flex-shrink:0;
}
.dir-card-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.dir-card-status{ position:absolute; bottom:.6rem; right:.6rem; width:1.6rem; height:1.6rem; border-radius:50%; background:#10b981; border:3px solid var(--white); box-shadow:0 0 0 1px rgba(0,0,0,.05); }
.dir-card-status.is-off{ background:var(--gray-400, #94a3b8); }
.dir-card-body{ width:100%; }
.dir-card-role-chip{
display:inline-block;
font-size:1.1rem; font-weight:700;
padding:.4rem 1rem; border-radius:var(--r-full);
margin-bottom:.8rem;
text-transform:uppercase; letter-spacing:.04em;
}
.dir-card-name{
font-family:var(--font-heading);
font-size:1.6rem; font-weight:700; color:var(--text);
margin:0 0 .4rem; line-height:1.25;
}
.dir-card-code{
font-size:1.2rem; color:var(--text-muted);
margin-bottom:1rem;
display:inline-flex; align-items:center; gap:.4rem;
}
.dir-card-code i{ color:var(--primary); }
.dir-card-info{ display:flex; flex-direction:column; gap:.5rem; width:100%; margin-top:.6rem; padding-top:1rem; border-top:1px dashed var(--border-light); }
.dir-card-info-row{
display:flex; align-items:center; gap:.8rem;
font-size:1.25rem; color:var(--text-secondary);
text-decoration:none !important;
padding:.4rem .6rem; border-radius:var(--r-sm);
transition:background var(--t-fast);
text-align:left;
}
.dir-card-info-row i{ color:var(--primary); width:1.4rem; text-align:center; flex-shrink:0; }
.dir-card-info-row:hover{ background:var(--gray-50); color:var(--text); }
.dir-card-actions{ display:flex; gap:.6rem; margin-top:1.4rem; width:100%; }
.dir-card-action{
flex:1;
display:inline-flex; align-items:center; justify-content:center;
width:3.8rem; height:3.8rem;
border-radius:var(--r-sm);
background:var(--primary-mist);
color:var(--primary);
text-decoration:none !important;
transition:all var(--t-fast);
font-size:1.4rem;
}
.dir-card-action:hover{ background:var(--primary); color:var(--white); transform:translateY(-2px); }
.dir-badge-inactive{
display:inline-flex; align-items:center; gap:.4rem;
font-size:1.1rem; font-weight:700;
color:var(--text-muted);
background:var(--gray-100);
padding:.3rem .8rem; border-radius:var(--r-full);
margin-top:.8rem;
}
.dir-init{ line-height:1; }
.dir-hero{ text-align:center; padding:4.5rem 3rem; }
.dir-hero-inner{ position:relative; z-index:2; }
.dir-hero-eyebrow{ display:inline-flex; align-items:center; gap:.6rem; background:rgba(255,255,255,.18); color:var(--white); padding:.5rem 1.4rem; border-radius:var(--r-full); font-size:1.2rem; font-weight:600; margin-bottom:1.4rem; backdrop-filter:blur(6px); }
.dir-hero-eyebrow i{ color:var(--white); }
.dir-hero-title{ font-family:var(--font-heading); font-size:clamp(2.6rem,4.5vw,3.8rem); font-weight:800; color:var(--white); margin:0 0 .8rem; letter-spacing:-.02em; position:relative; }
.dir-hero-sub{ color:rgba(255,255,255,.88); font-size:1.5rem; max-width:60rem; margin:0 auto 2.4rem; line-height:1.6; position:relative; }
.dir-hero-stats{ display:flex; justify-content:center; gap:1.4rem; flex-wrap:wrap; position:relative; }
.dir-hero-stat{ background:rgba(255,255,255,.12); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.18); border-radius:var(--r-md); padding:1.4rem 2.4rem; min-width:12rem; }
.dir-hero-stat strong{ display:block; font-family:var(--font-heading); font-size:3rem; font-weight:800; color:var(--white); line-height:1; margin-bottom:.4rem; }
.dir-hero-stat span{ color:rgba(255,255,255,.78); font-size:1.25rem; font-weight:500; }
.dir-hero-art{ position:absolute; inset:0; pointer-events:none; overflow:hidden; border-radius:inherit; }
.dir-hero-shape{ position:absolute; border-radius:50%; background:rgba(255,255,255,.06); }
.dir-hero-shape--1{ top:-6rem; right:-5rem; width:18rem; height:18rem; }
.dir-hero-shape--2{ bottom:-4rem; left:-3rem; width:14rem; height:14rem; background:rgba(255,255,255,.04); }
.dir-hero-shape--3{ top:40%; right:8%; width:8rem; height:8rem; background:rgba(232,119,34,.25); }
.dir-hero-shape--4{ bottom:30%; left:12%; width:6rem; height:6rem; background:rgba(255,255,255,.08); }
.dir-empty{
text-align:center; padding:5rem 2rem;
background:var(--white);
border:2px dashed var(--border);
border-radius:var(--r-lg);
color:var(--text-secondary);
position:relative;
overflow:hidden;
}
.dir-empty i{ font-size:5.2rem; color:var(--primary); opacity:.55; display:block; margin-bottom:1.2rem; }
.dir-empty h3{ font-family:var(--font-heading); font-size:2rem; color:var(--text); margin:0 0 .6rem; }
.dir-empty p{ font-size:1.4rem; margin:0 auto 1.6rem; max-width:42rem; }
.dir-empty-reset{ background:var(--primary); color:var(--white); border:none; padding:1rem 2.2rem; border-radius:var(--r-sm); font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:.6rem; transition:all var(--t-base); }
.dir-empty-reset:hover{ background:var(--primary-dark); transform:translateY(-2px); }
.dir-empty-art{ position:absolute; inset:0; pointer-events:none; }
.dir-empty-shape{ position:absolute; border-radius:50%; background:var(--primary-mist); opacity:.5; }
.dir-empty-shape--1{ top:-3rem; left:-3rem; width:10rem; height:10rem; }
.dir-empty-shape--2{ bottom:-2rem; right:-2rem; width:8rem; height:8rem; }
.dir-empty-shape--3{ top:50%; left:50%; transform:translate(-50%,-50%); width:14rem; height:14rem; background:transparent; border:2px dashed var(--primary); opacity:.2; }
@media(max-width:767px){
.dir-hero{ padding:3rem 1.6rem; }
.dir-hero-stat{ min-width:0; flex:1; padding:1.2rem 1rem; }
.dir-hero-stat strong{ font-size:2.4rem; }
.dir-card-photo{ width:8.4rem; height:8.4rem; font-size:3rem; }
}
/* =====================================================
Fix 8: TEACHER/PARENT MESSAGES (.messages-*)
The teacher_messages.php page used .messages-* and
.message-* classes that were never defined. This block
adds a full professional layout matching stylenew.
===================================================== */
.msg-page{ background:var(--bg); padding:0 0 5rem; min-height:60vh; }
.msg-page .container{ padding-top:1rem; }
.msg-toolbar{
background:var(--white);
border:1px solid var(--border-light);
border-radius:var(--r-lg);
box-shadow:var(--shadow-card);
padding:1.6rem 2rem;
margin-bottom:1.6rem;
display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap;
}
.msg-toolbar .msg-filter{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
.msg-toolbar label{ font-weight:600; color:var(--text); font-size:1.3rem; margin:0; }
.msg-toolbar select{ min-width:18rem; }
.msg-layout{
display:grid;
grid-template-columns:24rem 1fr;
gap:1.8rem;
align-items:start;
}
.msg-sidebar{
background:var(--white);
border:1px solid var(--border-light);
border-radius:var(--r-lg);
box-shadow:var(--shadow-card);
padding:1rem;
position:sticky; top:1.6rem;
}
.msg-sidebar-title{ font-family:var(--font-heading); font-size:1.3rem; font-weight:700; color:var(--text); margin:0 0 1rem; padding:0 1rem .8rem; border-bottom:1px solid var(--border-light); }
.msg-sidebar-item{
display:flex; align-items:center; gap:1rem;
padding:1rem 1.2rem;
border-radius:var(--r-md);
color:var(--text-secondary);
text-decoration:none !important;
font-weight:600; font-size:1.35rem;
transition:all var(--t-fast);
margin-bottom:.4rem;
}
.msg-sidebar-item:last-child{ margin-bottom:0; }
.msg-sidebar-item i{ font-size:1.5rem; color:var(--text-muted); width:1.8rem; text-align:center; }
.msg-sidebar-item:hover{ background:var(--primary-mist); color:var(--primary); }
.msg-sidebar-item:hover i{ color:var(--primary); }
.msg-sidebar-item.active{ background:var(--primary); color:var(--white); box-shadow:0 4px 14px var(--primary-glow); }
.msg-sidebar-item.active i{ color:var(--white); }
.msg-sidebar-badge{ margin-left:auto; background:var(--accent); color:var(--white); font-size:1.1rem; font-weight:700; padding:.2rem .7rem; border-radius:var(--r-full); }
.msg-sidebar-item.active .msg-sidebar-badge{ background:var(--white); color:var(--primary); }
.msg-content{
background:var(--white);
border:1px solid var(--border-light);
border-radius:var(--r-lg);
box-shadow:var(--shadow-card);
overflow:hidden;
}
.msg-content-header{
padding:1.4rem 2rem;
border-bottom:1px solid var(--border-light);
display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
background:var(--gray-50);
}
.msg-content-header h3{ font-family:var(--font-heading); font-size:1.6rem; font-weight:700; color:var(--text); margin:0; }
.msg-list{ display:flex; flex-direction:column; }
.msg-item{
display:flex; align-items:flex-start; gap:1.4rem;
padding:1.6rem 2rem;
border-bottom:1px solid var(--border-light);
cursor:pointer;
transition:all var(--t-fast);
position:relative;
}
.msg-item:last-child{ border-bottom:none; }
.msg-item:hover{ background:var(--gray-50); }
.msg-item.unread{ background:var(--primary-mist); }
.msg-item.unread::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--primary); }
.msg-avatar{
width:4.8rem; height:4.8rem;
border-radius:50%;
background:var(--primary);
color:var(--white);
display:flex; align-items:center; justify-content:center;
font-size:1.8rem; font-weight:800; font-family:var(--font-heading);
flex-shrink:0;
box-shadow:0 3px 10px rgba(0,0,0,.08);
}
.msg-body{ flex:1; min-width:0; }
.msg-head{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:.3rem; }
.msg-sender{ font-weight:700; color:var(--text); font-size:1.4rem; }
.msg-sender small{ color:var(--text-muted); font-weight:500; font-size:1.15rem; margin-left:.5rem; }
.msg-time{ font-size:1.15rem; color:var(--text-muted); white-space:nowrap; }
.msg-subject{ font-weight:600; color:var(--text); font-size:1.35rem; margin-bottom:.2rem; }
.msg-item.unread .msg-subject{ color:var(--primary-dark); }
.msg-preview{ color:var(--text-secondary); font-size:1.3rem; line-height:1.5; overflow:hidden; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; }
.msg-attachments{ font-size:1.15rem; color:var(--text-muted); margin-top:.5rem; display:inline-flex; align-items:center; gap:.4rem; }
.msg-attachments i{ color:var(--primary); }
.msg-empty{ padding:5rem 2rem; text-align:center; color:var(--text-muted); }
.msg-empty i{ font-size:5rem; color:var(--text-muted); opacity:.4; display:block; margin-bottom:1.2rem; }
.msg-empty h3{ font-family:var(--font-heading); color:var(--text); font-size:1.8rem; margin:0 0 .6rem; }
.msg-empty p{ font-size:1.35rem; margin:0; }
.msg-modal{
position:fixed; inset:0;
background: rgba(0,0,0,.55);
backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
display:none; align-items:center; justify-content:center;
z-index:1050; padding:1.6rem;
}
.msg-modal.is-open{ display:flex; animation:msgOverlayIn .3s ease; }
@keyframes msgOverlayIn{ from{ opacity:0; } to{ opacity:1; } }
.msg-modal-box{
background:var(--white);
border-radius:var(--r-xl);
width:100%; max-width:68rem;
max-height:92vh; overflow:hidden;
display:flex; flex-direction:column;
box-shadow:0 24px 60px rgba(0,0,0,.28), 0 8px 20px rgba(0,0,0,.12);
border:1px solid rgba(255,255,255,.9);
animation:msgModalIn .35s cubic-bezier(.34,1.2,.64,1);
position:relative;
}
.msg-modal-box::before{
content:''; position:absolute; top:0; left:0; right:0; height:4px;
background: var(--primary);
z-index:2;
}
@keyframes msgModalIn{ from{ opacity:0; transform:translateY(18px) scale(.98); } to{ opacity:1; transform:translateY(0) scale(1); } }
.msg-modal-head{
padding:1.6rem 2rem;
border-bottom:1px solid var(--border-light);
display:flex; align-items:center; justify-content:space-between; gap:1rem;
background: var(--primary);
color:var(--white);
flex-wrap:wrap;
}
.msg-modal-head::after{ display:none; }
.msg-modal-head h3{
font-family:var(--font-heading); font-size:1.7rem; font-weight:800; color:var(--white);
margin:0; display:flex; align-items:center; gap:.9rem; letter-spacing:-.01em; position:relative; z-index:1;
}
.msg-modal-head h3 i{
width:3.2rem; height:3.2rem; display:inline-flex; align-items:center; justify-content:center;
background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.22);
border-radius:var(--r-md); font-size:1.4rem; backdrop-filter:blur(6px); flex-shrink:0;
}
.msg-modal-head .msg-modal-subtitle{
display:block; font-family:var(--font-body); font-size:1.15rem; font-weight:500; opacity:.85; margin-top:.2rem; letter-spacing:.01em;
}
.msg-modal-close{
width:3.6rem; height:3.6rem; border-radius:50%;
background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22);
color:var(--white); cursor:pointer;
display:inline-flex; align-items:center; justify-content:center;
font-size:1.4rem; transition:all var(--t-base); flex-shrink:0; backdrop-filter:blur(6px);
position:relative; z-index:1;
}
.msg-modal-close:hover{
background:var(--white); color:var(--primary); border-color:var(--white);
transform:rotate(90deg) scale(1.05);
}
.msg-modal-body{
padding:2.2rem 2.4rem; overflow-y:auto; flex:1; background:var(--white);
overscroll-behavior:contain;
}
.msg-modal-body::-webkit-scrollbar{ width:6px; }
.msg-modal-body::-webkit-scrollbar-thumb{ background:var(--border); border-radius:999px; }
.msg-modal-body::-webkit-scrollbar-thumb:hover{ background:var(--gray-400); }
.msg-modal-foot{
padding:1.4rem 2.2rem; border-top:1px solid var(--border-light);
display:flex; gap:1rem; justify-content:flex-end; background:var(--gray-25);
position:sticky; bottom:0; z-index:1;
}
.msg-modal label{ display:block; font-weight:700; color:var(--text); font-size:1.25rem; margin-bottom:.6rem; letter-spacing:.01em; }
.msg-modal label .req{ color:#dc2626; margin-left:.2rem; }
.msg-modal .form-group{ margin-bottom:1.6rem; }
.msg-modal .form-group:last-child{ margin-bottom:0; }
.msg-modal .form-control{
width:100%; padding:1.15rem 1.4rem; border:1.8px solid var(--border);
border-radius:var(--r-md); font-size:1.45rem; font-family:var(--font-body);
background:var(--gray-25); color:var(--text); transition:all var(--t-base);
}
.msg-modal .form-control:hover{ border-color:var(--gray-300); background:var(--white); }
.msg-modal .form-control:focus{
outline:none; border-color:var(--primary); background:var(--white);
box-shadow:0 0 0 4px var(--primary-glow);
}
.msg-modal textarea.form-control{ resize:vertical; min-height:14rem; line-height:1.6; }
.msg-modal .form-hint{
font-size:1.15rem; color:var(--text-muted); margin-top:.5rem;
display:flex; align-items:center; gap:.4rem; line-height:1.5;
}
.msg-modal .form-hint i{ color:var(--primary); font-size:1.1rem; }
/* View-message premium thread styling */
.message-view{ display:flex; flex-direction:column; gap:1.4rem; }
.message-thread{ display:flex; flex-direction:column; gap:1.2rem; max-height:46vh; overflow-y:auto; padding:.2rem 0; }
.message-thread::-webkit-scrollbar{ width:5px; }
.message-thread::-webkit-scrollbar-thumb{ background:var(--border); border-radius:999px; }
.thread-message{
background:var(--white); border:1px solid var(--border-light);
border-radius:var(--r-lg); padding:1.6rem; position:relative;
box-shadow:var(--shadow-xs); transition:box-shadow var(--t-fast);
}
.thread-message:hover{ box-shadow:var(--shadow-sm); }
.thread-message.sent{
background: var(--primary-mist);
border-color:rgba(var(--primary-rgb),.18); border-left:4px solid var(--primary);
}
.thread-message.received{
background:var(--gray-50); border-left:4px solid var(--accent);
}
.thread-header{ display:flex; align-items:center; gap:1rem; margin-bottom:1rem; }
.thread-avatar{
width:4rem; height:4rem; border-radius:50%; background:var(--primary); color:var(--white);
display:flex; align-items:center; justify-content:center;
font-weight:800; font-family:var(--font-heading); font-size:1.5rem; flex-shrink:0;
box-shadow:0 2px 8px rgba(0,0,0,.08);
}
.thread-message.received .thread-avatar{ background:var(--accent); }
.thread-sender{ font-weight:700; font-size:1.4rem; color:var(--text); line-height:1.2; }
.thread-date{ font-size:1.15rem; color:var(--text-muted); margin-top:.15rem; }
.thread-content{ font-size:1.4rem; line-height:1.7; color:var(--text-secondary); white-space:pre-wrap; word-break:break-word; }
.thread-attachments{
margin-top:1.2rem; padding:1rem 1.2rem; background:var(--white);
border:1px dashed var(--border); border-radius:var(--r-md);
display:flex; flex-direction:column; gap:.6rem;
}
.thread-attachments strong{ font-size:1.2rem; color:var(--text); display:flex; align-items:center; gap:.4rem; }
.attachment-link{
display:inline-flex; align-items:center; gap:.6rem; padding:.6rem 1rem;
background:var(--gray-50); border:1px solid var(--border-light); border-radius:var(--r-full);
font-size:1.25rem; color:var(--primary); text-decoration:none !important; font-weight:600;
transition:all var(--t-fast); align-self:flex-start;
}
.attachment-link:hover{ background:var(--primary); color:var(--white); border-color:var(--primary); transform:translateY(-1px); }
.reply-section{
margin-top:.2rem; padding:1.6rem; background:var(--gray-50);
border:1px solid var(--border-light); border-radius:var(--r-lg);
}
.reply-section h4{
font-family:var(--font-heading); font-size:1.4rem; font-weight:700; color:var(--text);
margin:0 0 1.2rem; display:flex; align-items:center; gap:.6rem;
}
.reply-section h4 i{ color:var(--primary); }
.reply-section .btn-primary{
background:var(--primary); border-color:var(--primary); color:var(--white);
border-radius:var(--r-full); padding:1rem 2.2rem; font-weight:700; font-size:1.35rem;
box-shadow:0 4px 14px var(--primary-glow); transition:all var(--t-base);
}
.reply-section .btn-primary:hover{ background:var(--primary-dark); transform:translateY(-2px); box-shadow:0 8px 20px var(--primary-glow); }
/* Modern file attachment — compact inline pill, sits beside buttons (small / simple / responsive) */
.file-dropzone{
border:1.6px dashed var(--border);
background: var(--gray-25);
border-radius:var(--r-full);
padding:.5rem .85rem .5rem .55rem;
text-align:left;
cursor:pointer;
transition:all var(--t-base);
position:relative;
display:inline-flex; align-items:center; gap:.55rem; flex-wrap:nowrap;
min-height:3.2rem; max-width:100%;
}
.file-dropzone:hover{ border-color:var(--primary); background:var(--white); box-shadow:var(--shadow-xs); }
.file-dropzone.dragover{ border-color:var(--primary); background:var(--primary-mist); border-style:solid; }
.file-dropzone-icon{
width:2.2rem; height:2.2rem; margin:0;
background:var(--primary); color:var(--white);
border-radius:50%; display:flex; align-items:center; justify-content:center;
font-size:1.05rem; flex-shrink:0;
}
.file-dropzone-text{ font-size:1.15rem; font-weight:600; color:var(--text); line-height:1; white-space:nowrap; }
.file-dropzone-text strong{ color:var(--primary); }
.file-dropzone-hint{ font-size:.95rem; color:var(--text-muted); margin:0; flex-basis:auto; white-space:nowrap; opacity:.85; }
.file-dropzone-list{ margin-top:.6rem; display:flex; flex-direction:column; gap:.4rem; text-align:left; flex-basis:100%; width:100%; }
.file-dropzone-file{
display:flex; align-items:center; gap:.6rem;
padding:.5rem .9rem; background:var(--white);
border:1px solid var(--border-light); border-radius:var(--r-full);
font-size:1.2rem; color:var(--text-secondary); font-weight:500;
}
.file-dropzone-file i{ color:var(--primary); font-size:1.2rem; flex-shrink:0; }
.file-dropzone-file .file-name{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.file-dropzone-file .file-size{ font-size:1rem; color:var(--text-muted); flex-shrink:0; }
.file-dropzone-file .remove-file{
margin-left:auto; background:none; border:none; color:var(--text-muted);
cursor:pointer; width:2rem; height:2rem; border-radius:50%;
display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
transition:all var(--t-fast);
}
.file-dropzone-file .remove-file:hover{ background:var(--red-50,#fef2f2); color:var(--red-600,#dc2626); }
.file-dropzone input[type=file]{ display:none; }
.file-dropzone .browse-link{
display:inline-flex; align-items:center; gap:.35rem;
margin-top:0; padding:.45rem 1rem;
background:var(--primary); border:1.5px solid var(--primary); border-radius:var(--r-full);
font-size:1.15rem; font-weight:700; color:var(--white);
transition:all var(--t-fast); flex-shrink:0;
}
.file-dropzone:hover .browse-link{ background:var(--primary-dark); border-color:var(--primary-dark); }
@media (max-width: 640px){
.file-dropzone{ padding:.45rem .7rem; gap:.45rem; flex-wrap:wrap; justify-content:flex-start; }
.file-dropzone-icon{ width:2rem; height:2rem; font-size:1rem; }
.file-dropzone-text{ font-size:1.05rem; }
.file-dropzone-hint{ font-size:.9rem; flex-basis:100%; text-align:left; margin-left:2.6rem; }
.file-dropzone .browse-link{ padding:.35rem .8rem; font-size:1rem; }
}
@media (max-width: 640px){
.msg-modal{ padding:1rem; }
.msg-modal-box{ max-width:100%; max-height:96vh; border-radius:var(--r-lg); }
.msg-modal-head{ padding:1.2rem 1.4rem; flex-wrap:wrap; gap:.8rem; }
.msg-modal-head h3{ font-size:1.4rem; flex:1 1 auto; min-width:0; gap:.6rem; align-items:flex-start; }
.msg-modal-head h3 i{ width:2.8rem; height:2.8rem; font-size:1.2rem; }
.msg-modal-head .msg-modal-subtitle{ font-size:1.05rem; }
.msg-modal-close{ width:3.2rem; height:3.2rem; font-size:1.2rem; }
.msg-modal-body{ padding:1.6rem; }
.msg-modal-foot{ padding:1.2rem 1.6rem; flex-direction:column-reverse; }
.msg-modal-foot .adm-btn{ width:100%; justify-content:center; }
.message-thread{ max-height:38vh; }
}
@media (max-width: 380px){
.msg-modal-head h3{ font-size:1.3rem; }
.msg-modal-head .msg-modal-subtitle{ font-size:1rem; }
}
@media(max-width:900px){
.msg-layout{ grid-template-columns:1fr; }
.msg-sidebar{ position:static; }
.msg-toolbar select{ min-width:0; flex:1; }
.msg-item{ padding:1.4rem 1.6rem; gap:1rem; }
.msg-avatar{ width:4rem; height:4rem; font-size:1.5rem; }
}
/* =====================================================
Fix 9: SCHOOL EVENTS CALENDAR (.calendar-*)
The admin_manage_events.php uses .calendar-* classes
that were never defined. Restore them here.
===================================================== */
.calendar-page{ background:var(--bg); padding:0 0 5rem; min-height:60vh; }
.calendar-page .container{ padding-top:1rem; }
.calendar-toolbar{
background: var(--white);
border:1px solid var(--border-light);
border-radius:var(--r-lg);
box-shadow: var(--shadow-card);
padding:.9rem 1.4rem;
margin-bottom:1.2rem;
display:flex; align-items:center; justify-content:space-between;
gap:.8rem 1rem; flex-wrap:wrap;
position:relative;
min-height:0;
}
.calendar-toolbar h2{
font-family:var(--font-heading);
font-size:1.45rem; font-weight:800; color:var(--text);
margin:0; display:flex; align-items:center; gap:.6rem;
letter-spacing:-.01em; line-height:1;
}
.calendar-toolbar h2 i{
width:2.6rem; height:2.6rem;
display:inline-flex; align-items:center; justify-content:center;
background:var(--primary-mist); color:var(--primary);
border-radius:8px; font-size:1.25rem;
flex-shrink:0;
}
.calendar-nav{
display:flex; align-items:center; gap:.6rem; flex-wrap:nowrap;
}
.calendar-nav .nav-btn{
display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
padding:.55rem 1.1rem;
font-family:var(--font-heading); font-size:1.25rem; font-weight:700;
line-height:1; white-space:nowrap;
border-radius:var(--r-full);
border:1.6px solid var(--border);
background:var(--white);
color:var(--text);
cursor:pointer;
box-shadow: var(--shadow-xs);
transition: all var(--t-base);
min-width:8.2rem;
position:relative;
}
.calendar-nav .nav-btn:hover{
background:var(--primary); color:var(--white); border-color:var(--primary);
transform:translateY(-1px); box-shadow:0 6px 14px var(--primary-glow);
}
.calendar-nav .nav-btn:active{ transform:translateY(0) scale(.98); }
.calendar-nav .nav-btn:focus-visible{ outline:3px solid var(--primary); outline-offset:2px; }
.calendar-nav .nav-btn i{ font-size:1.05rem; transition:transform var(--t-base); }
.calendar-nav .nav-btn:hover i.fa-chevron-left{ transform:translateX(-2px); }
.calendar-nav .nav-btn:hover i.fa-chevron-right{ transform:translateX(2px); }
.calendar-nav .nav-btn.nav-btn-next{
background:var(--primary); color:var(--white); border-color:var(--primary);
box-shadow:0 3px 10px var(--primary-glow);
}
.calendar-nav .nav-btn.nav-btn-next:hover{
background:var(--primary-dark); border-color:var(--primary-dark);
}
.calendar-nav .current-month{
font-family:var(--font-heading); font-weight:800; color:var(--text);
font-size:1.3rem; min-width:12.5rem; text-align:center;
background:var(--gray-50);
border:1px solid var(--border-light);
padding:.5rem 1rem; border-radius:var(--r-full);
letter-spacing:.02em; line-height:1;
}
@media (max-width: 768px){
.calendar-toolbar{ padding:.85rem 1.2rem; gap:.7rem; }
.calendar-toolbar h2{ font-size:1.35rem; }
.calendar-nav{ gap:.5rem; }
.calendar-nav .current-month{ flex:0 1 auto; min-width:11rem; font-size:1.2rem; padding:.45rem .8rem; }
.calendar-nav .nav-btn{ min-width:7rem; padding:.5rem .9rem; font-size:1.15rem; }
}
@media (max-width: 600px){
.calendar-toolbar{ flex-wrap:wrap; }
.calendar-toolbar h2{ width:100%; font-size:1.35rem; margin-bottom:.1rem; }
.calendar-nav{ width:100%; justify-content:space-between; }
.calendar-nav .current-month{ flex:1; order:0; }
.calendar-nav .nav-btn{ flex:0 0 auto; }
}
@media (max-width: 380px){
.calendar-nav .nav-btn .btn-text{ display:none; }
.calendar-nav .nav-btn{ min-width:0; flex:1 1 0; padding:.55rem .6rem; }
.calendar-nav .nav-btn i{ margin:0; font-size:1.3rem; }
.calendar-nav .current-month{ font-size:1.15rem; min-width:0; flex:1; }
}
.calendar-grid{
display:grid;
grid-template-columns:1fr 36rem;
gap:1.8rem;
align-items:start;
}
.calendar-card{
background:var(--white);
border:1px solid var(--border-light);
border-radius:var(--r-lg);
box-shadow:var(--shadow-card);
padding:1.6rem 2rem 2rem;
overflow:hidden;
position:relative;
}
.calendar-card::before{ content:''; position:absolute; top:0; left:0; right:0; height:4px; background:var(--primary); }
.calendar-card h3{ font-family:var(--font-heading); font-size:1.5rem; font-weight:700; color:var(--text); margin:0 0 1.2rem; }
.calendar-table{ width:100%; border-collapse:separate; border-spacing:.4rem; margin-bottom:1.2rem; }
.calendar-table th{ font-family:var(--font-heading); font-size:1.1rem; font-weight:700; text-transform:uppercase; color:var(--text-muted); padding:.5rem; text-align:center; letter-spacing:.04em; }
.calendar-table td{
background:var(--gray-50);
border:1px solid var(--border-light);
border-radius:var(--r-sm);
padding:.6rem;
vertical-align:top;
height:7.5rem;
width:calc(100%/7);
font-size:1.2rem;
color:var(--text-secondary);
transition:all var(--t-fast);
}
.calendar-table td.empty{ background:transparent; border-color:transparent; }
.calendar-table td:not(.empty):hover{ background:var(--primary-mist); border-color:var(--primary); }
.calendar-table td.today{ background:var(--primary); color:var(--white); border-color:var(--primary-dark); }
.calendar-table td.today .day-number{ color:var(--white); }
.calendar-table .day-number{ font-weight:700; color:var(--text); font-size:1.25rem; margin-bottom:.3rem; }
.calendar-table .event-dot{
display:block;
font-size:1.05rem;
font-weight:600;
color:var(--white);
background:var(--primary);
padding:.15rem .4rem;
border-radius:var(--r-sm);
margin-bottom:.2rem;
text-decoration:none !important;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.calendar-legend{ display:flex; flex-wrap:wrap; gap:1rem; padding-top:1rem; border-top:1px dashed var(--border-light); }
.calendar-legend .legend-item{ display:inline-flex; align-items:center; gap:.5rem; font-size:1.2rem; color:var(--text-secondary); }
.calendar-legend .legend-color{ width:1.2rem; height:1.2rem; border-radius:3px; }
.calendar-form .form-group{ margin-bottom:1.2rem; }
.calendar-form label{ display:block; font-weight:600; font-size:1.3rem; color:var(--text); margin-bottom:.5rem; }
.calendar-form .form-control{
width:100%;
padding:1rem 1.2rem;
font-size:1.35rem;
border:2px solid var(--border);
border-radius:var(--r-sm);
background:var(--white);
color:var(--text);
font-family:var(--font-body);
transition:all var(--t-fast);
}
.calendar-form .form-control:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-glow); }
.calendar-form textarea.form-control{ resize:vertical; min-height:8rem; }
.calendar-form .form-row-2{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.color-selector{ display:flex; gap:.6rem; flex-wrap:wrap; padding:.6rem; background:var(--gray-50); border:1px solid var(--border-light); border-radius:var(--r-sm); }
.color-option{
width:3.4rem; height:3.4rem;
border-radius:50%;
border:3px solid var(--white);
box-shadow:0 0 0 1px var(--border);
cursor:pointer;
transition:all var(--t-fast);
}
.color-option:hover{ transform:scale(1.1); }
.color-option.selected{ box-shadow:0 0 0 3px var(--primary); transform:scale(1.1); }
.calendar-alert{ padding:1.2rem 1.6rem; border-radius:var(--r-md); font-size:1.35rem; margin-bottom:1.4rem; border:1px solid; display:flex; align-items:center; gap:.8rem; }
.calendar-alert.success{ background:#ecfdf5; color:#065f46; border-color:#a7f3d0; }
.calendar-alert.error{ background:#fef2f2; color:#991b1b; border-color:#fecaca; }
.calendar-alert i{ font-size:1.5rem; }
@media(max-width:1024px){
.calendar-grid{ grid-template-columns:1fr; }
.calendar-table td{ height:6rem; }
.calendar-table .event-dot{ font-size:1rem; padding:.1rem .3rem; }
}
/* =====================================================
Fix 10: STORE SCANNER POS (.pos-*)
The store_scanner.php used .pos-* classes that were
never defined. Restore them with a clean POS layout.
===================================================== */
.pos-page{ background:var(--bg); padding:0 0 5rem; min-height:60vh; }
.pos-page .container{ padding-top:1rem; }
.pos-header{
background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
color:var(--white);
border-radius:var(--r-lg);
padding:2rem 2.4rem;
margin-bottom:1.6rem;
display:flex; align-items:center; justify-content:space-between; gap:1.4rem; flex-wrap:wrap;
box-shadow:0 8px 24px var(--primary-glow);
position:relative; overflow:hidden;
}
.pos-header::after{ content:''; position:absolute; top:-4rem; right:-4rem; width:16rem; height:16rem; border-radius:50%; background:rgba(255,255,255,.08); }
.pos-header h2{ font-family:var(--font-heading); font-size:2rem; font-weight:700; margin:0; display:flex; align-items:center; gap:.8rem; position:relative; }
.pos-header h2 i{ color:var(--accent); }
.pos-header h2 span{ color:var(--accent); }
.pos-stats{ display:flex; gap:1rem; flex-wrap:wrap; position:relative; }
.pos-stat{ background:rgba(255,255,255,.14); padding:.8rem 1.4rem; border-radius:var(--r-md); border:1px solid rgba(255,255,255,.18); backdrop-filter:blur(6px); min-width:11rem; }
.pos-stat strong{ display:block; font-family:var(--font-heading); font-size:1.8rem; font-weight:800; color:var(--white); line-height:1.1; margin-bottom:.2rem; }
.pos-stat span{ color:rgba(255,255,255,.85); font-size:1.1rem; font-weight:500; display:block; }
.pos-header-right{ display:flex; gap:.6rem; flex-wrap:wrap; position:relative; }
.pos-btn-sm{
display:inline-flex; align-items:center; gap:.5rem;
background:rgba(255,255,255,.16);
color:var(--white);
border:1px solid rgba(255,255,255,.25);
padding:.6rem 1.2rem;
border-radius:var(--r-sm);
font-size:1.25rem; font-weight:600;
text-decoration:none !important;
transition:all var(--t-fast);
}
.pos-btn-sm:hover{ background:var(--white); color:var(--primary); }
.pos-body{ display:grid; grid-template-columns:1fr 36rem; gap:1.6rem; align-items:start; }
.pos-left, .pos-right{ display:flex; flex-direction:column; gap:1.6rem; }
.pos-card{
background:var(--white);
border:1px solid var(--border-light);
border-radius:var(--r-lg);
box-shadow:var(--shadow-card);
overflow:hidden;
position:relative;
}
.pos-card::before{ content:''; position:absolute; top:0; left:0; right:0; height:4px; background:var(--primary); }
.pos-card-head{ padding:1.4rem 1.8rem 1rem; border-bottom:1px solid var(--border-light); }
.pos-card-head h3{ font-family:var(--font-heading); font-size:1.4rem; font-weight:700; color:var(--text); margin:0; display:flex; align-items:center; gap:.6rem; }
.pos-card-head h3 i{ color:var(--primary); }
.pos-card-body{ padding:1.6rem 1.8rem; }
.scan-zone{ display:flex; flex-direction:column; gap:1rem; }
.scan-label{ font-family:var(--font-heading); font-weight:700; color:var(--text); font-size:1.35rem; display:flex; align-items:center; }
.scan-label i{ color:var(--primary); margin-right:.6rem; }
.scan-input-row{ display:flex; gap:.6rem; flex-wrap:wrap; }
.scan-input{
flex:1; min-width:18rem;
padding:1.1rem 1.4rem;
border:2px solid var(--border);
border-radius:var(--r-sm);
font-size:1.4rem;
font-family:var(--font-body);
}
.scan-input:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-glow); }
.scan-btn, .cam-btn{
background:var(--primary);
color:var(--white);
border:none;
padding:1.1rem 1.6rem;
font-weight:600;
font-size:1.3rem;
border-radius:var(--r-sm);
cursor:pointer;
display:inline-flex; align-items:center; gap:.4rem;
transition:all var(--t-fast);
}
.scan-btn:hover, .cam-btn:hover{ background:var(--primary-dark); transform:translateY(-2px); }
.cam-btn{ background:var(--accent); }
.cam-btn:hover{ background:var(--accent-dark, #c2410c); }
.scan-hint{ font-size:1.2rem; color:var(--text-muted); }
.scan-hint kbd{ background:var(--gray-100); border:1px solid var(--border); border-radius:4px; padding:.1rem .5rem; font-size:1.1rem; font-family:monospace; }
.customer-card{ display:flex; gap:1.4rem; align-items:center; background:var(--primary-mist); border:1px solid var(--primary); border-radius:var(--r-md); padding:1.2rem; margin-top:1rem; }
.customer-avatar{ width:5.4rem; height:5.4rem; border-radius:50%; background:var(--primary); color:var(--white); display:flex; align-items:center; justify-content:center; font-size:2rem; font-weight:800; font-family:var(--font-heading); flex-shrink:0; }
.customer-avatar img{ width:100%; height:100%; border-radius:50%; object-fit:cover; }
.customer-info{ flex:1; }
.customer-info h4{ font-family:var(--font-heading); font-size:1.5rem; font-weight:700; margin:0 0 .3rem; color:var(--text); }
.customer-info p{ margin:0; color:var(--text-secondary); font-size:1.25rem; }
.customer-balance{ font-family:var(--font-heading); font-size:1.6rem; font-weight:800; color:var(--primary); }
.item-quick{ display:grid; grid-template-columns:repeat(auto-fill, minmax(11rem, 1fr)); gap:.8rem; }
.item-tile{
background:var(--gray-50);
border:1.5px solid var(--border-light);
border-radius:var(--r-md);
padding:1rem .8rem;
text-align:center;
cursor:pointer;
transition:all var(--t-fast);
font-size:1.25rem;
font-weight:600;
color:var(--text);
}
.item-tile:hover{ background:var(--primary-mist); border-color:var(--primary); transform:translateY(-2px); }
.item-tile .it-price{ display:block; font-family:var(--font-heading); font-size:1.3rem; color:var(--primary); margin-top:.3rem; }
.cart-list{ display:flex; flex-direction:column; gap:.6rem; margin-bottom:1rem; }
.cart-row{ display:flex; align-items:center; gap:.8rem; padding:.8rem 1rem; background:var(--gray-50); border-radius:var(--r-md); }
.cart-row .cr-name{ flex:1; font-weight:600; font-size:1.3rem; color:var(--text); }
.cart-row .cr-qty{ display:flex; align-items:center; gap:.4rem; }
.cart-row .cr-qty button{ width:2.6rem; height:2.6rem; border-radius:50%; border:1px solid var(--border); background:var(--white); cursor:pointer; font-weight:700; }
.cart-row .cr-qty span{ min-width:2.4rem; text-align:center; font-weight:700; }
.cart-row .cr-amt{ font-weight:700; color:var(--primary); min-width:7rem; text-align:right; }
.cart-row .cr-del{ color:var(--red-600,#dc2626); background:transparent; border:none; cursor:pointer; font-size:1.4rem; }
.cart-total{ display:flex; justify-content:space-between; align-items:center; padding:1.2rem; background:var(--primary-mist); border-radius:var(--r-md); font-family:var(--font-heading); font-size:1.6rem; font-weight:700; color:var(--primary); margin-bottom:1rem; }
.recent-list{ display:flex; flex-direction:column; gap:.6rem; max-height:36rem; overflow-y:auto; }
.recent-row{ display:flex; align-items:center; gap:1rem; padding:1rem; background:var(--gray-50); border-radius:var(--r-md); }
.recent-row .rr-avatar{ width:3.6rem; height:3.6rem; border-radius:50%; background:var(--primary); color:var(--white); display:flex; align-items:center; justify-content:center; font-weight:700; flex-shrink:0; }
.recent-row .rr-body{ flex:1; min-width:0; }
.recent-row .rr-name{ font-weight:600; color:var(--text); font-size:1.3rem; }
.recent-row .rr-meta{ font-size:1.15rem; color:var(--text-muted); }
.recent-row .rr-amt{ font-family:var(--font-heading); font-weight:700; color:var(--primary); }
@media(max-width:1100px){
.pos-body{ grid-template-columns:1fr; }
}
/* =====================================================
Fix 11: CERTIFICATES PAGE (.cert-*)
The admin_generate_certificates.php uses .cert-* classes
for the bulk-issue + listing layout. Style them here.
===================================================== */
.cert-page{ background:var(--bg); padding:0 0 5rem; min-height:60vh; }
.cert-page .container{ padding-top:1rem; }
.cert-stats{ display:grid; grid-template-columns:repeat(auto-fit, minmax(16rem, 1fr)); gap:1.2rem; margin-bottom:1.8rem; }
.cert-stat{ background:var(--white); border:1px solid var(--border-light); border-radius:var(--r-lg); box-shadow:var(--shadow-card); padding:1.6rem 1.8rem; position:relative; overflow:hidden; }
.cert-stat::before{ content:''; position:absolute; top:0; left:0; bottom:0; width:.5rem; background:var(--primary); }
.cert-stat.cs-2::before{ background:var(--accent); }
.cert-stat.cs-3::before{ background:#2563eb; }
.cert-stat.cs-4::before{ background:#9333ea; }
.cert-stat .cs-label{ font-size:1.2rem; color:var(--text-muted); text-transform:uppercase; font-weight:600; letter-spacing:.04em; }
.cert-stat .cs-value{ font-family:var(--font-heading); font-size:2.4rem; font-weight:800; color:var(--text); line-height:1.1; margin:.3rem 0; }
.cert-stat .cs-sub{ font-size:1.15rem; color:var(--text-secondary); }
.cert-card{
background:var(--white);
border:1px solid var(--border-light);
border-radius:var(--r-lg);
box-shadow:var(--shadow-card);
margin-bottom:1.6rem;
overflow:hidden;
position:relative;
}
.cert-card::before{ content:''; position:absolute; top:0; left:0; right:0; height:4px; background:var(--primary); }
.cert-card-head{ padding:1.4rem 2rem; border-bottom:1px solid var(--border-light); display:flex; align-items:center; gap:1rem; }
.cert-card-head h3{ font-family:var(--font-heading); font-size:1.5rem; font-weight:700; color:var(--text); margin:0; }
.cert-card-head p{ font-size:1.2rem; color:var(--text-muted); margin:.2rem 0 0; }
.cert-card-body{ padding:1.8rem 2rem; }
.cert-tpl-swatch{ display:inline-flex; gap:.2rem; align-items:center; padding:.3rem .6rem; background:var(--gray-50); border:1px solid var(--border-light); border-radius:var(--r-sm); }
.cert-tpl-swatch span{ width:1.4rem; height:1.4rem; border-radius:3px; border:1px solid rgba(0,0,0,.1); }
.cert-row{ display:flex; align-items:center; gap:1.2rem; padding:1.2rem 0; border-bottom:1px solid var(--border-light); }
.cert-row:last-child{ border-bottom:none; }
.cert-row .cr-avatar{ width:4.2rem; height:4.2rem; border-radius:50%; background:var(--primary); color:var(--white); display:flex; align-items:center; justify-content:center; font-weight:800; font-family:var(--font-heading); font-size:1.5rem; flex-shrink:0; overflow:hidden; }
.cert-row .cr-avatar img{ width:100%; height:100%; object-fit:cover; }
.cert-row .cr-info{ flex:1; min-width:0; }
.cert-row .cr-name{ font-weight:700; color:var(--text); font-size:1.4rem; }
.cert-row .cr-sub{ font-size:1.2rem; color:var(--text-muted); }
.cert-row .cr-meta{ font-size:1.2rem; color:var(--text-secondary); }
.cert-row .cr-actions{ display:flex; gap:.4rem; flex-wrap:wrap; }
@media(max-width:768px){
.cert-stats{ grid-template-columns:1fr 1fr; }
.cert-row{ flex-wrap:wrap; }
.cert-row .cr-actions{ width:100%; }
}
/* =====================================================
Fix 12: PRINT RESULT PAGES (ed_* legacy pages)
allow-exam uses .ed_graysection/.ed_teacher_div which
is in style.css. Override to a tighter, more modern
look that matches the new admin pages.
===================================================== */
.ed_graysection.print-modern{ background:var(--bg); padding:3.2rem 0 5rem; float:none; }
.ed_graysection.print-modern::after{ content:''; display:block; clear:both; }
.print-modern .ed_teacher_div{
background:var(--white);
border:1px solid var(--border-light);
border-radius:var(--r-lg);
box-shadow:var(--shadow-card);
padding:2.8rem 3rem;
margin-bottom:2rem;
position:relative; overflow:hidden;
}
.print-modern .ed_teacher_div::before{ content:''; position:absolute; top:0; left:0; right:0; height:4px; background:var(--primary); }
.print-modern .ed_teacher_div h3{
font-family:var(--font-heading);
font-size:1.85rem; font-weight:700;
color:var(--text);
margin:0 0 2rem;
padding-bottom:1.2rem;
border-bottom:1px solid var(--border-light);
display:flex; align-items:center; gap:.9rem;
}
.print-modern .ed_teacher_div h3 i{
width:3.6rem; height:3.6rem;
display:inline-flex; align-items:center; justify-content:center;
background:var(--primary-mist);
color:var(--primary);
border-radius:var(--r-sm);
font-size:1.6rem;
}
.print-modern .ed_teacher_div h3 i.fa{ display:inline-flex; }
.print-modern .ed_teacher_form .form-group{ margin-bottom:1.4rem; }
.print-modern .ed_teacher_form label{ display:block; font-weight:600; color:var(--text); font-size:1.3rem; margin-bottom:.5rem; }
.print-modern .ed_teacher_form .form-control{
width:100%;
padding:1.15rem 1.4rem;
font-size:1.4rem;
border:2px solid var(--border);
border-radius:var(--r-sm);
background:var(--white);
color:var(--text);
font-family:var(--font-body);
transition:all var(--t-fast);
}
.print-modern .ed_teacher_form .form-control:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-glow); }
.print-modern .ed_teacher_form .btn{ width:auto; }
.print-modern .ed_teacher_form .ed_btn.ed_orange{ margin-top:.6rem; }
/* Polyfill: legacy .btn.ed_btn.ed_orange inside .print-modern and .ed_graysection */
.print-modern .btn.ed_btn.ed_orange,
.print-modern button.btn.ed_btn,
.print-modern .ed_btn.ed_orange,
.ed_graysection .btn.ed_btn.ed_orange,
.ed_graysection button.btn.ed_btn,
.ed_graysection .ed_btn.ed_orange{
display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
padding:1.05rem 2rem;
font-family:var(--font-heading); font-size:1.35rem; font-weight:600;
border-radius:var(--r-sm);
border:2px solid var(--primary);
background:var(--primary); color:var(--white) !important;
cursor:pointer; transition:all var(--t-base);
text-decoration:none !important; line-height:1.2;
box-shadow:0 4px 14px var(--primary-glow);
}
.print-modern .btn.ed_btn.ed_orange:hover,
.print-modern button.btn.ed_btn:hover,
.print-modern .ed_btn.ed_orange:hover,
.ed_graysection .btn.ed_btn.ed_orange:hover,
.ed_graysection button.btn.ed_btn:hover,
.ed_graysection .ed_btn.ed_orange:hover{
background:var(--primary-dark); border-color:var(--primary-dark);
transform:translateY(-2px); color:var(--white) !important;
box-shadow:0 8px 22px var(--primary-glow);
}
.print-modern .btn.ed_btn.ed_orange.btn-block,
.ed_graysection .btn.ed_btn.ed_orange.btn-block{ display:flex; width:100%; }
.print-modern .btn.ed_btn.ed_orange.btn-sm,
.ed_graysection .btn.ed_btn.ed_orange.btn-sm{ padding:.7rem 1.4rem; font-size:1.2rem; }
.print-modern .table-advance{ width:100%; border-collapse:collapse; background:var(--white); border-radius:var(--r-md); overflow:hidden; border:1px solid var(--border-light); margin-top:1rem; }
.print-modern .table-advance th{ background:var(--gray-50); padding:1.2rem; font-size:1.25rem; font-weight:700; text-transform:uppercase; color:var(--text); border-bottom:2px solid var(--border); }
.print-modern .table-advance td{ padding:1.2rem; border-bottom:1px solid var(--border-light); font-size:1.35rem; vertical-align:middle; }
.print-modern .table-advance tr:last-child td{ border-bottom:none; }
.print-modern .table-advance tr:hover td{ background:var(--gray-50); }
.print-modern .table-advance .img-circle{ border-radius:50%; object-fit:cover; border:2px solid var(--border-light); }
.print-modern .table-advance .btn-sm{ padding:.7rem 1.2rem; font-size:1.2rem; }
.print-modern .error1,
.print-modern .success1{
padding:1.2rem 1.6rem; border-radius:var(--r-md);
font-size:1.35rem; font-weight:500;
margin-bottom:1.4rem; border:1px solid;
display:flex; align-items:center; gap:.6rem;
}
.print-modern .error1{ background:#fef2f2; color:#991b1b; border-color:#fecaca; }
.print-modern .success1{ background:#ecfdf5; color:#065f46; border-color:#a7f3d0; }
.print-modern .error1::before{ content:'\f06a'; font-family:FontAwesome; }
.print-modern .success1::before{ content:'\f00c'; font-family:FontAwesome; }
/* =====================================================
Fix 13: ADMIN PAYMENT MGMT + fee-structure polish
These pages already have their own .pm-* / .fee-*
styles, but the print-result "table-advance" view
needs cleanup. Add a clean empty state and table wrap.
===================================================== */
.fee-container{ padding-top:3.2rem !important; }
.fee-container .container{ padding-top:0 !important; }
.fee-container .fee-stats-bar{ padding:0 1.4rem; }
/* view_fee_structure styling */
.fee-details-container{ background:var(--bg); padding:0 0 5rem; min-height:60vh; }
.fee-details-container .header-banner{ background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); color:var(--white); border-radius:var(--r-lg); padding:2rem 2.4rem; margin-bottom:1.6rem; box-shadow:var(--shadow-card); border:1px solid rgba(255,255,255,.08); position:relative; overflow:hidden; }
.fee-details-container .header-banner::before{ content:''; position:absolute; top:-6rem; right:-4rem; width:18rem; height:18rem; border-radius:50%; background:rgba(255,255,255,.07); }
.fee-details-container .header-title{ font-family:var(--font-heading); font-size:2rem; font-weight:800; color:var(--white); margin-bottom:.8rem; position:relative; }
.fee-details-container .header-meta{ display:flex; gap:1.2rem; flex-wrap:wrap; position:relative; }
.fee-details-container .header-meta span{ color:rgba(255,255,255,.92); font-size:1.35rem; font-weight:500; }
.fee-details-container .action-buttons{ display:flex; gap:.8rem; flex-wrap:wrap; margin-bottom:1.6rem; }
.fee-details-container .fee-breakdown-grid{ display:grid; gap:.6rem; }
.fee-details-container .breakdown-item{ display:flex; align-items:center; justify-content:space-between; padding:1rem 1.4rem; background:var(--gray-50); border:1px solid var(--border-light); border-radius:var(--r-md); }
.fee-details-container .breakdown-item.total-row{ background:var(--primary-mist); border-color:var(--primary); font-weight:800; }
.fee-details-container .breakdown-item-name{ font-weight:600; color:var(--text); }
.fee-details-container .breakdown-item-desc{ color:var(--text-muted); font-size:1.25rem; }
.fee-details-container .breakdown-item-amount{ font-family:var(--font-heading); font-size:1.6rem; font-weight:800; color:var(--primary); }
.fee-stats-bar .fsb-item{
display:flex; flex-direction:column; gap:.3rem;
background:var(--white);
border:1px solid var(--border-light);
border-radius:var(--r-md);
padding:1.4rem 1.6rem;
box-shadow:var(--shadow-xs);
border-left:4px solid var(--primary);
text-align:left;
}
.fee-stats-bar .fsb-item:nth-child(2){ border-left-color:var(--accent); }
.fee-stats-bar .fsb-item:nth-child(3){ border-left-color:#0891b2; }
.fee-stats-bar .fsb-item:nth-child(4){ border-left-color:#7c3aed; }
.fee-stats-bar .fsb-val{
font-family:var(--font-heading);
font-size:2.4rem;
font-weight:800;
color:var(--primary);
letter-spacing:-.02em;
line-height:1.1;
}
.fee-stats-bar .fsb-label{
font-size:1.25rem;
color:var(--text-muted);
font-weight:600;
text-transform:uppercase;
letter-spacing:.04em;
}
.pm-page{ padding-top:3.2rem !important; }
.pm-page .container{ padding-top:0 !important; }
.pos-page{ padding-top:3.2rem !important; }
.pos-page .container{ padding-top:0 !important; }
.calendar-page{ padding-top:3.2rem !important; }
.calendar-page .container{ padding-top:0 !important; }
.calendar-container{ width:100%; }
.cert-page{ padding-top:3.2rem !important; }
.cert-page .container{ padding-top:0 !important; }
.msg-page{ padding-top:3.2rem !important; }
.msg-page .container{ padding-top:0 !important; }
.pm-empty,
.fee-empty-state-modern{
text-align:center; padding:4rem 2rem;
background:var(--white); border:2px dashed var(--border);
border-radius:var(--r-lg); color:var(--text-muted);
}
.pm-empty i,
.fee-empty-state-modern i{ font-size:4rem; color:var(--text-muted); opacity:.4; display:block; margin-bottom:1rem; }
.pm-empty h3,
.fee-empty-state-modern h3{ font-family:var(--font-heading); color:var(--text); font-size:1.7rem; margin:0 0 .4rem; }
/* =====================================================
Fix 14: ALIGN BUTTONS LEGACY .btn ed_btn ed_orange
inside admin-section so they look like adm-btn primary
without rewriting every page that uses the legacy
class names. (Scoped to the new admin section wrapper.)
===================================================== */
.admin-section .btn.ed_btn.ed_orange,
.admin-section .btn.btn-primary,
.admin-section button.btn.ed_btn,
.admin-section button.btn-primary,
.admin-section .ed_btn.ed_orange{
display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
padding:1.05rem 2rem;
font-family:var(--font-heading); font-size:1.35rem; font-weight:600;
border-radius:var(--r-sm);
border:2px solid var(--primary);
background:var(--primary); color:var(--white) !important;
cursor:pointer; transition:all var(--t-base);
text-decoration:none !important; line-height:1.2;
box-shadow:0 4px 14px var(--primary-glow);
}
.admin-section .btn.ed_btn.ed_orange:hover,
.admin-section .btn.btn-primary:hover,
.admin-section button.btn.ed_btn:hover,
.admin-section button.btn-primary:hover,
.admin-section .ed_btn.ed_orange:hover{
background:var(--primary-dark); border-color:var(--primary-dark);
transform:translateY(-2px); color:var(--white) !important;
box-shadow:0 8px 22px var(--primary-glow);
}
.admin-section .btn.btn-success,
.admin-section button.btn-success{
display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
padding:1.05rem 2rem;
font-family:var(--font-heading); font-size:1.35rem; font-weight:600;
border-radius:var(--r-sm);
border:2px solid #15803d;
background:#15803d; color:var(--white) !important;
cursor:pointer; transition:all var(--t-base);
text-decoration:none !important; line-height:1.2;
}
.admin-section .btn.btn-success:hover,
.admin-section button.btn-success:hover{ background:#0f6a32; border-color:#0f6a32; transform:translateY(-2px); }
.admin-section .btn.btn-danger,
.admin-section button.btn-danger{
display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
padding:1.05rem 2rem;
font-family:var(--font-heading); font-size:1.35rem; font-weight:600;
border-radius:var(--r-sm);
border:2px solid #dc2626;
background:#dc2626; color:var(--white) !important;
cursor:pointer; transition:all var(--t-base);
text-decoration:none !important; line-height:1.2;
}
.admin-section .btn.btn-danger:hover,
.admin-section button.btn-danger:hover{ background:#b91c1c; border-color:#b91c1c; transform:translateY(-2px); }
.admin-section .btn.btn-secondary,
.admin-section .btn.btn-default,
.admin-section button.btn-secondary,
.admin-section button.btn-default{
display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
padding:1.05rem 2rem;
font-family:var(--font-heading); font-size:1.35rem; font-weight:600;
border-radius:var(--r-sm);
border:2px solid var(--gray-600);
background:var(--gray-600); color:var(--white) !important;
cursor:pointer; transition:all var(--t-base);
text-decoration:none !important; line-height:1.2;
}
.admin-section .btn.btn-secondary:hover,
.admin-section .btn.btn-default:hover,
.admin-section button.btn-secondary:hover,
.admin-section button.btn-default:hover{ background:var(--gray-700); border-color:var(--gray-700); transform:translateY(-2px); }
.admin-section .btn.btn-sm,
.admin-section button.btn-sm{ padding:.7rem 1.2rem; font-size:1.2rem; }
.admin-section .btn.btn-lg,
.admin-section button.btn-lg{ padding:1.3rem 2.4rem; font-size:1.5rem; }
/* Make .alert inside .admin-section match .adm-alert look */
.admin-section .alert,
.admin-section .alert-success,
.admin-section .alert-error,
.admin-section .alert-info,
.admin-section .alert-warning{
padding:1.4rem 1.6rem; border-radius:var(--r-md);
font-size:1.4rem; font-weight:500; line-height:1.6;
border:1px solid; display:flex; align-items:flex-start; gap:.9rem;
margin-bottom:1.6rem;
}
.admin-section .alert-success{ background:#ecfdf5; color:#065f46; border-color:#a7f3d0; }
.admin-section .alert-error{ background:#fef2f2; color:#991b1b; border-color:#fecaca; }
.admin-section .alert-info{ background:#eff6ff; color:#1e40af; border-color:#bfdbfe; }
.admin-section .alert-warning{ background:#fffbeb; color:#92400e; border-color:#fde68a; }
/* Make Bootstrap .form-control inside .admin-section match .adm-form-control */
.admin-section .form-control{
width:100%;
padding:1.15rem 1.4rem;
font-size:1.4rem;
border:2px solid var(--border);
border-radius:var(--r-sm);
background:var(--white);
color:var(--text);
font-family:var(--font-body);
transition:all var(--t-fast);
line-height:1.4;
}
.admin-section .form-control:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-glow); }
.admin-section .form-group{ margin-bottom:1.4rem; }
.admin-section .form-group label{ display:block; font-weight:600; color:var(--text); font-size:1.3rem; margin-bottom:.5rem; }
.admin-section table.table{ margin-bottom:0; font-size:1.4rem; }
.admin-section table.table th{ background:var(--gray-50); color:var(--text); font-family:var(--font-heading); font-weight:600; font-size:1.25rem; border-bottom:2px solid var(--border); padding:1.2rem; }
.admin-section table.table td{ padding:1.2rem; border-bottom:1px solid var(--border-light); vertical-align:middle; }
/* =====================================================
Fix 15: GLOBAL BUTTON POLYFILL
Many legacy/admin pages wrap content in custom cards
(.fee-card, .pq-card, .msg-content, .calendar-card,
.qd-card, .pos-left, .pos-right, .student-card, etc.).
Those cards contain plain .btn.btn-primary, .btn.btn-success,
.btn.btn-danger, .btn.btn-secondary, .btn-outline etc.
that look unstyled because Bootstrap isn't loaded.
Apply adm-btn styling to ALL common button patterns
inside any of these cards/pages globally.
===================================================== */
/* Primary buttons in admin/legacy cards */
.fee-card .btn.btn-primary,
.pq-card .btn.btn-primary,
.msg-content .btn.btn-primary,
.calendar-card .btn.btn-primary,
.qd-card .btn.btn-primary,
.pos-left .btn.btn-primary,
.pos-right .btn.btn-primary,
.idcard-container .btn.btn-primary,
.cert-mgmt .btn.btn-primary,
.dir-modern .btn.btn-primary,
.pm-page .btn.btn-primary,
.msg-page .btn.btn-primary,
.pos-page .btn.btn-primary,
.calendar-page .btn.btn-primary,
.print-modern .btn.btn-primary,
button.btn.btn-primary:not(.atb-btn){
display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
padding:1.05rem 2rem;
font-family:var(--font-heading); font-size:1.35rem; font-weight:600;
border-radius:var(--r-sm);
border:2px solid var(--primary);
background:var(--primary); color:var(--white) !important;
cursor:pointer; transition:all var(--t-base);
text-decoration:none !important; line-height:1.2;
box-shadow:0 4px 14px var(--primary-glow);
}
.fee-card .btn.btn-primary:hover,
.pq-card .btn.btn-primary:hover,
.msg-content .btn.btn-primary:hover,
.calendar-card .btn.btn-primary:hover,
.qd-card .btn.btn-primary:hover,
.pos-left .btn.btn-primary:hover,
.pos-right .btn.btn-primary:hover,
.idcard-container .btn.btn-primary:hover,
.cert-mgmt .btn.btn-primary:hover,
.dir-modern .btn.btn-primary:hover,
.pm-page .btn.btn-primary:hover,
.msg-page .btn.btn-primary:hover,
.pos-page .btn.btn-primary:hover,
.calendar-page .btn.btn-primary:hover,
.print-modern .btn.btn-primary:hover,
button.btn.btn-primary:not(.atb-btn):hover{
background:var(--primary-dark); border-color:var(--primary-dark);
transform:translateY(-2px); color:var(--white) !important;
box-shadow:0 8px 22px var(--primary-glow);
}
/* Success buttons */
.fee-card .btn.btn-success,
.pq-card .btn.btn-success,
.msg-content .btn.btn-success,
.calendar-card .btn.btn-success,
.qd-card .btn.btn-success,
.pos-left .btn.btn-success,
.pos-right .btn.btn-success,
.idcard-container .btn.btn-success,
.cert-mgmt .btn.btn-success,
.dir-modern .btn.btn-success,
.pm-page .btn.btn-success,
.msg-page .btn.btn-success,
.pos-page .btn.btn-success,
.calendar-page .btn.btn-success,
.print-modern .btn.btn-success,
button.btn.btn-success:not(.atb-btn){
display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
padding:1.05rem 2rem;
font-family:var(--font-heading); font-size:1.35rem; font-weight:600;
border-radius:var(--r-sm);
border:2px solid #15803d;
background:#15803d; color:var(--white) !important;
cursor:pointer; transition:all var(--t-base);
text-decoration:none !important; line-height:1.2;
}
.fee-card .btn.btn-success:hover,
.pq-card .btn.btn-success:hover,
.msg-content .btn.btn-success:hover,
.calendar-card .btn.btn-success:hover,
.qd-card .btn.btn-success:hover,
.pos-left .btn.btn-success:hover,
.pos-right .btn.btn-success:hover,
.idcard-container .btn.btn-success:hover,
.cert-mgmt .btn.btn-success:hover,
.dir-modern .btn.btn-success:hover,
.pm-page .btn.btn-success:hover,
.msg-page .btn.btn-success:hover,
.pos-page .btn.btn-success:hover,
.calendar-page .btn.btn-success:hover,
.print-modern .btn.btn-success:hover,
button.btn.btn-success:not(.atb-btn):hover{
background:#0f6a32; border-color:#0f6a32;
transform:translateY(-2px); color:var(--white) !important;
}
/* Danger buttons */
.fee-card .btn.btn-danger,
.pq-card .btn.btn-danger,
.msg-content .btn.btn-danger,
.calendar-card .btn.btn-danger,
.qd-card .btn.btn-danger,
.pos-left .btn.btn-danger,
.pos-right .btn.btn-danger,
.idcard-container .btn.btn-danger,
.cert-mgmt .btn.btn-danger,
.dir-modern .btn.btn-danger,
.pm-page .btn.btn-danger,
.msg-page .btn.btn-danger,
.pos-page .btn.btn-danger,
.calendar-page .btn.btn-danger,
.print-modern .btn.btn-danger,
button.btn.btn-danger:not(.atb-btn){
display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
padding:1.05rem 2rem;
font-family:var(--font-heading); font-size:1.35rem; font-weight:600;
border-radius:var(--r-sm);
border:2px solid #dc2626;
background:#dc2626; color:var(--white) !important;
cursor:pointer; transition:all var(--t-base);
text-decoration:none !important; line-height:1.2;
}
.fee-card .btn.btn-danger:hover,
.pq-card .btn.btn-danger:hover,
.msg-content .btn.btn-danger:hover,
.calendar-card .btn.btn-danger:hover,
.qd-card .btn.btn-danger:hover,
.pos-left .btn.btn-danger:hover,
.pos-right .btn.btn-danger:hover,
.idcard-container .btn.btn-danger:hover,
.cert-mgmt .btn.btn-danger:hover,
.dir-modern .btn.btn-danger:hover,
.pm-page .btn.btn-danger:hover,
.msg-page .btn.btn-danger:hover,
.pos-page .btn.btn-danger:hover,
.calendar-page .btn.btn-danger:hover,
.print-modern .btn.btn-danger:hover,
button.btn.btn-danger:not(.atb-btn):hover{
background:#b91c1c; border-color:#b91c1c;
transform:translateY(-2px); color:var(--white) !important;
}
/* Secondary / default buttons */
.fee-card .btn.btn-secondary,
.fee-card .btn.btn-default,
.pq-card .btn.btn-secondary,
.pq-card .btn.btn-default,
.msg-content .btn.btn-secondary,
.msg-content .btn.btn-default,
.calendar-card .btn.btn-secondary,
.calendar-card .btn.btn-default,
.qd-card .btn.btn-secondary,
.qd-card .btn.btn-default,
.pos-left .btn.btn-secondary,
.pos-left .btn.btn-default,
.pos-right .btn.btn-secondary,
.pos-right .btn.btn-default,
.idcard-container .btn.btn-secondary,
.idcard-container .btn.btn-default,
.cert-mgmt .btn.btn-secondary,
.cert-mgmt .btn.btn-default,
.dir-modern .btn.btn-secondary,
.dir-modern .btn.btn-default,
.pm-page .btn.btn-secondary,
.pm-page .btn.btn-default,
.msg-page .btn.btn-secondary,
.msg-page .btn.btn-default,
.pos-page .btn.btn-secondary,
.pos-page .btn.btn-default,
.calendar-page .btn.btn-secondary,
.calendar-page .btn.btn-default,
.print-modern .btn.btn-secondary,
.print-modern .btn.btn-default,
button.btn.btn-secondary:not(.atb-btn),
button.btn.btn-default:not(.atb-btn){
display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
padding:1.05rem 2rem;
font-family:var(--font-heading); font-size:1.35rem; font-weight:600;
border-radius:var(--r-sm);
border:2px solid var(--gray-600);
background:var(--gray-600); color:var(--white) !important;
cursor:pointer; transition:all var(--t-base);
text-decoration:none !important; line-height:1.2;
}
.fee-card .btn.btn-secondary:hover,
.fee-card .btn.btn-default:hover,
.pq-card .btn.btn-secondary:hover,
.pq-card .btn.btn-default:hover,
.msg-content .btn.btn-secondary:hover,
.msg-content .btn.btn-default:hover,
.calendar-card .btn.btn-secondary:hover,
.calendar-card .btn.btn-default:hover,
.qd-card .btn.btn-secondary:hover,
.qd-card .btn.btn-default:hover,
.pos-left .btn.btn-secondary:hover,
.pos-left .btn.btn-default:hover,
.pos-right .btn.btn-secondary:hover,
.pos-right .btn.btn-default:hover,
.idcard-container .btn.btn-secondary:hover,
.idcard-container .btn.btn-default:hover,
.cert-mgmt .btn.btn-secondary:hover,
.cert-mgmt .btn.btn-default:hover,
.dir-modern .btn.btn-secondary:hover,
.dir-modern .btn.btn-default:hover,
.pm-page .btn.btn-secondary:hover,
.pm-page .btn.btn-default:hover,
.msg-page .btn.btn-secondary:hover,
.msg-page .btn.btn-default:hover,
.pos-page .btn.btn-secondary:hover,
.pos-page .btn.btn-default:hover,
.calendar-page .btn.btn-secondary:hover,
.calendar-page .btn.btn-default:hover,
.print-modern .btn.btn-secondary:hover,
.print-modern .btn.btn-default:hover,
button.btn.btn-secondary:not(.atb-btn):hover,
button.btn.btn-default:not(.atb-btn):hover{
background:var(--gray-700); border-color:var(--gray-700);
transform:translateY(-2px); color:var(--white) !important;
}
/* Outline buttons */
.fee-card .btn.btn-outline,
.pq-card .btn.btn-outline,
.msg-content .btn.btn-outline,
.calendar-card .btn.btn-outline,
.qd-card .btn.btn-outline,
.pos-left .btn.btn-outline,
.pos-right .btn.btn-outline,
.idcard-container .btn.btn-outline,
.cert-mgmt .btn.btn-outline,
.dir-modern .btn.btn-outline,
.pm-page .btn.btn-outline,
.msg-page .btn.btn-outline,
.pos-page .btn.btn-outline,
.calendar-page .btn.btn-outline,
.print-modern .btn.btn-outline,
button.btn.btn-outline:not(.atb-btn){
display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
padding:1rem 1.8rem;
font-family:var(--font-heading); font-size:1.3rem; font-weight:600;
border-radius:var(--r-sm);
border:2px solid var(--border);
background:var(--white); color:var(--text) !important;
cursor:pointer; transition:all var(--t-base);
text-decoration:none !important; line-height:1.2;
}
.fee-card .btn.btn-outline:hover,
.pq-card .btn.btn-outline:hover,
.msg-content .btn.btn-outline:hover,
.calendar-card .btn.btn-outline:hover,
.qd-card .btn.btn-outline:hover,
.pos-left .btn.btn-outline:hover,
.pos-right .btn.btn-outline:hover,
.idcard-container .btn.btn-outline:hover,
.cert-mgmt .btn.btn-outline:hover,
.dir-modern .btn.btn-outline:hover,
.pm-page .btn.btn-outline:hover,
.msg-page .btn.btn-outline:hover,
.pos-page .btn.btn-outline:hover,
.calendar-page .btn.btn-outline:hover,
.print-modern .btn.btn-outline:hover,
button.btn.btn-outline:not(.atb-btn):hover{
background:var(--primary); color:var(--white) !important;
border-color:var(--primary);
transform:translateY(-2px);
}
/* Button sizes */
.fee-card .btn.btn-sm,
.pq-card .btn.btn-sm,
.msg-content .btn.btn-sm,
.calendar-card .btn.btn-sm,
.qd-card .btn.btn-sm,
.pos-left .btn.btn-sm,
.pos-right .btn.btn-sm,
.idcard-container .btn.btn-sm,
.cert-mgmt .btn.btn-sm,
.dir-modern .btn.btn-sm,
.pm-page .btn.btn-sm,
.msg-page .btn.btn-sm,
.pos-page .btn.btn-sm,
.calendar-page .btn.btn-sm,
.print-modern .btn.btn-sm,
button.btn.btn-sm:not(.atb-btn){
padding:.7rem 1.4rem; font-size:1.2rem;
}
.fee-card .btn.btn-lg,
.pq-card .btn.btn-lg,
.msg-content .btn.btn-lg,
.calendar-card .btn.btn-lg,
.qd-card .btn.btn-lg,
.pos-left .btn.btn-lg,
.pos-right .btn.btn-lg,
.idcard-container .btn.btn-lg,
.cert-mgmt .btn.btn-lg,
.dir-modern .btn.btn-lg,
.pm-page .btn.btn-lg,
.msg-page .btn.btn-lg,
.pos-page .btn.btn-lg,
.calendar-page .btn.btn-lg,
.print-modern .btn.btn-lg,
button.btn.btn-lg:not(.atb-btn){
padding:1.3rem 2.4rem; font-size:1.5rem;
}
/* Ghost button (used in cert-mgmt) */
.btn.btn-ghost{
display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
padding:.7rem 1.4rem;
font-family:var(--font-heading); font-size:1.2rem; font-weight:600;
border-radius:var(--r-sm);
border:2px solid var(--border);
background:transparent; color:var(--text-muted) !important;
cursor:pointer; transition:all var(--t-base);
text-decoration:none !important; line-height:1.2;
}
.btn.btn-ghost:hover{ background:var(--gray-100); color:var(--text) !important; border-color:var(--text-muted); }
/* Generic form-control polish inside all admin cards (not just admin-section) */
.fee-card .form-control,
.pq-card .form-control,
.msg-content .form-control,
.calendar-card .form-control,
.qd-card .form-control,
.pos-left .form-control,
.pos-right .form-control,
.idcard-container .form-control,
.cert-mgmt .form-control,
.dir-modern .form-control,
.pm-page .form-control,
.msg-page .form-control,
.pos-page .form-control,
.calendar-page .form-control,
.print-modern .form-control{
width:100%;
padding:1.15rem 1.4rem;
font-size:1.4rem;
border:2px solid var(--border);
border-radius:var(--r-sm);
background:var(--white);
color:var(--text);
font-family:var(--font-body);
transition:all var(--t-fast);
line-height:1.4;
height:auto;
}
.fee-card .form-control:focus,
.pq-card .form-control:focus,
.msg-content .form-control:focus,
.calendar-card .form-control:focus,
.qd-card .form-control:focus,
.pos-left .form-control:focus,
.pos-right .form-control:focus,
.idcard-container .form-control:focus,
.cert-mgmt .form-control:focus,
.dir-modern .form-control:focus,
.pm-page .form-control:focus,
.msg-page .form-control:focus,
.pos-page .form-control:focus,
.calendar-page .form-control:focus,
.print-modern .form-control:focus{
outline:none; border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-glow);
}
.fee-card .form-group,
.pq-card .form-group,
.msg-content .form-group,
.calendar-card .form-group,
.qd-card .form-group,
.pos-left .form-group,
.pos-right .form-group,
.idcard-container .form-group,
.cert-mgmt .form-group,
.dir-modern .form-group,
.pm-page .form-group,
.msg-page .form-group,
.pos-page .form-group,
.calendar-page .form-group,
.print-modern .form-group{ margin-bottom:1.4rem; }
.fee-card .form-group label,
.pq-card .form-group label,
.msg-content .form-group label,
.calendar-card .form-group label,
.qd-card .form-group label,
.pos-left .form-group label,
.pos-right .form-group label,
.idcard-container .form-group label,
.cert-mgmt .form-group label,
.dir-modern .form-group label,
.pm-page .form-group label,
.msg-page .form-group label,
.pos-page .form-group label,
.calendar-page .form-group label,
.print-modern .form-group label{
display:block; font-weight:600; color:var(--text); font-size:1.3rem; margin-bottom:.5rem;
}
/* Alert box polyfill inside all admin cards */
.fee-card .alert,
.pq-card .alert,
.msg-content .alert,
.calendar-card .alert,
.qd-card .alert,
.pos-left .alert,
.pos-right .alert,
.idcard-container .alert,
.cert-mgmt .alert,
.dir-modern .alert,
.pm-page .alert,
.msg-page .alert,
.pos-page .alert,
.calendar-page .alert,
.print-modern .alert{
padding:1.4rem 1.6rem; border-radius:var(--r-md);
font-size:1.4rem; font-weight:500; line-height:1.6;
border:1px solid; display:flex; align-items:flex-start; gap:.9rem;
margin-bottom:1.6rem;
}
.fee-card .alert-success,
.pq-card .alert-success,
.msg-content .alert-success,
.calendar-card .alert-success,
.qd-card .alert-success,
.pos-left .alert-success,
.pos-right .alert-success,
.idcard-container .alert-success,
.cert-mgmt .alert-success,
.dir-modern .alert-success,
.pm-page .alert-success,
.msg-page .alert-success,
.pos-page .alert-success,
.calendar-page .alert-success,
.print-modern .alert-success{ background:#ecfdf5; color:#065f46; border-color:#a7f3d0; }
.fee-card .alert-danger,
.pq-card .alert-danger,
.msg-content .alert-danger,
.calendar-card .alert-danger,
.qd-card .alert-danger,
.pos-left .alert-danger,
.pos-right .alert-danger,
.idcard-container .alert-danger,
.cert-mgmt .alert-danger,
.dir-modern .alert-danger,
.pm-page .alert-danger,
.msg-page .alert-danger,
.pos-page .alert-danger,
.calendar-page .alert-danger,
.print-modern .alert-danger{ background:#fef2f2; color:#991b1b; border-color:#fecaca; }
.fee-card .alert-info,
.pq-card .alert-info,
.msg-content .alert-info,
.calendar-card .alert-info,
.qd-card .alert-info,
.pos-left .alert-info,
.pos-right .alert-info,
.idcard-container .alert-info,
.cert-mgmt .alert-info,
.dir-modern .alert-info,
.pm-page .alert-info,
.msg-page .alert-info,
.pos-page .alert-info,
.calendar-page .alert-info,
.print-modern .alert-info{ background:#eff6ff; color:#1e40af; border-color:#bfdbfe; }
.fee-card .alert-warning,
.pq-card .alert-warning,
.msg-content .alert-warning,
.calendar-card .alert-warning,
.qd-card .alert-warning,
.pos-left .alert-warning,
.pos-right .alert-warning,
.idcard-container .alert-warning,
.cert-mgmt .alert-warning,
.dir-modern .alert-warning,
.pm-page .alert-warning,
.msg-page .alert-warning,
.pos-page .alert-warning,
.calendar-page .alert-warning,
.print-modern .alert-warning{ background:#fffbeb; color:#92400e; border-color:#fde68a; }
/* =====================================================
Fix 16: PAGE-LEVEL ALIGNMENT & PADDING POLISH
Ensure consistent vertical rhythm on all admin pages
===================================================== */
.fee-container,
.pm-page,
.msg-page,
.pos-page,
.calendar-page,
.dir-modern,
.idcard-container,
.print-modern{
background:var(--bg);
padding:3.2rem 0 5rem;
min-height:60vh;
}
.fee-container .container,
.pm-page .container,
.msg-page .container,
.pos-page .container,
.calendar-page .container,
.dir-modern .container,
.idcard-container .container,
.print-modern .container{
padding-left:2.4rem;
padding-right:2.4rem;
}
@media (max-width:768px){
.fee-container .container,
.pm-page .container,
.msg-page .container,
.pos-page .container,
.calendar-page .container,
.dir-modern .container,
.idcard-container .container,
.print-modern .container{
padding-left:1.6rem;
padding-right:1.6rem;
}
}
/* Empty state classes for admin/management cards */
.fee-empty-state-modern,
.pm-empty{
text-align:center; padding:4rem 2rem;
background:var(--white); border:2px dashed var(--border);
border-radius:var(--r-lg); color:var(--text-muted);
}
.fee-empty-state-modern i,
.pm-empty i{ font-size:4rem; color:var(--text-muted); opacity:.4; display:block; margin-bottom:1rem; }
.fee-empty-state-modern h3,
.pm-empty h3{ font-family:var(--font-heading); color:var(--text); font-size:1.7rem; margin:0 0 .4rem; }
.fee-empty-state-modern p,
.pm-empty p{ font-size:1.35rem; margin:0; }
/* Fee container specific: ensure container inside has top spacing */
.fee-container > .container{ padding-top:1rem; }
/* Print result pages: add some breathing room */
.print-modern .ed_teacher_div{ margin-top:0; }
/* PM page: ensure all cards have nice bottom margin */
.pm-page .pq-card,
.pm-page .pm-topbar,
.pm-page .stats-grid,
.pm-page .alert{ margin-bottom:1.6rem; }
/* Fee page: card spacing */
.fee-card{ margin-bottom:2rem; }
/* Dir-modern card spacing */
.dir-hero{ margin-bottom:2rem; }
.dir-toolbar{ margin-bottom:2rem; }
.dir-grid{ margin-bottom:2rem; }
.dir-empty{ margin-bottom:2rem; }
/* =====================================================
Fix 17: ICON BUTTONS (.btn-icon / .btn-icon-danger)
Used by admin_fee_structure.php inline list editors.
Compact circular button with icon, optional danger
variant for delete.
===================================================== */
.btn-icon{
display:inline-flex; align-items:center; justify-content:center;
width:3.6rem; height:3.6rem;
background:var(--gray-50); color:var(--primary);
border:1.5px solid var(--border-light);
border-radius:var(--r-md);
font-size:1.4rem; line-height:1;
cursor:pointer;
transition:all var(--t-fast);
padding:0;
}
.btn-icon:hover{
background:var(--primary); color:var(--white);
border-color:var(--primary);
transform:translateY(-1px);
box-shadow:0 4px 12px var(--primary-glow);
}
.btn-icon-danger{
background:#fef2f2; color:#dc2626;
border-color:#fecaca;
}
.btn-icon-danger:hover{
background:#dc2626; color:var(--white);
border-color:#dc2626;
box-shadow:0 4px 12px rgba(220,38,38,.25);
}
/* =====================================================
Fix 18: TABLE ACTION BUTTONS (.tbl-btn*)
Used by admin_fee_structure.php for row actions.
===================================================== */
.tbl-btn{
display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
padding:.5rem 1rem;
font-family:var(--font-heading); font-size:1.2rem; font-weight:700;
border-radius:var(--r-sm);
border:1.5px solid var(--border);
background:var(--white); color:var(--text) !important;
cursor:pointer; transition:all var(--t-base);
text-decoration:none !important; line-height:1.2;
white-space:nowrap;
}
.tbl-btn:hover{
background:var(--primary); color:var(--white) !important;
border-color:var(--primary);
transform:translateY(-1px);
box-shadow:0 4px 12px var(--primary-glow);
}
.tbl-btn-edit{
background:var(--primary-mist); color:var(--primary-dark) !important;
border-color:rgba(var(--primary-rgb),.25);
}
.tbl-btn-edit:hover{
background:var(--primary); color:var(--white) !important;
border-color:var(--primary);
}
.tbl-btn-dup{
background:#eff6ff; color:#1e40af !important;
border-color:#bfdbfe;
}
.tbl-btn-dup:hover{
background:#2563eb; color:var(--white) !important;
border-color:#2563eb;
box-shadow:0 4px 12px rgba(37,99,235,.25);
}
/* Action cell wrapper for row buttons */
.tbl-action-cell{
display:flex; gap:.5rem; flex-wrap:wrap; align-items:center;
white-space:nowrap;
}
/* Status pills used in fee rows */
.fee-status-active,
.fee-status-inactive{
display:inline-flex; align-items:center; gap:.3rem;
padding:.3rem .8rem;
font-family:var(--font-heading); font-size:1.15rem; font-weight:700;
border-radius:var(--r-full);
}
.fee-status-active{
background:#ecfdf5; color:#065f46; border:1px solid #a7f3d0;
}
.fee-status-inactive{
background:#fef2f2; color:#991b1b; border:1px solid #fecaca;
}
/* Cell helpers */
.fee-cell-items{
display:flex; flex-direction:column; gap:.3rem; flex-wrap:wrap;
}
.fee-cell-empty{
color:var(--text-muted); font-style:italic;
}
/* Make fee-table row buttons look compact */
.fee-table .tbl-action-cell .tbl-btn{
padding:.45rem .85rem;
font-size:1.15rem;
}
/* =====================================================
PREMIUM STAFF DIRECTORY (.dir-modern v2)
Designed from scratch — hero, toolbar, cards,
empty state all rebuilt with consistent spacing,
premium polish, and proper visual hierarchy.
===================================================== */
/* ── Page wrapper ───────────────────────────────────── */
.dir-modern{
background:var(--bg);
padding:3.2rem 0 5rem;
min-height:60vh;
position:relative;
}
.dir-modern > .container{
padding-left:2.4rem;
padding-right:2.4rem;
max-width:1320px;
}
@media (max-width:768px){
.dir-modern > .container{ padding-left:1.6rem; padding-right:1.6rem; }
}
/* ─────────────────────────────────────────────────────
HERO
───────────────────────────────────────────────────── */
.dir-hero{
position:relative;
overflow:hidden;
background:
radial-gradient(ellipse at top right, color-mix(in srgb, var(--accent) 18%, transparent) 0%, transparent 55%),
linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 65%, var(--primary-deeper) 100%);
color:var(--white);
padding:4.8rem 4rem 4.4rem;
border-radius:var(--r-2xl);
margin-bottom:2.4rem;
box-shadow:var(--shadow-xl);
border:1px solid rgba(255,255,255,.08);
}
.dir-hero::before{
content:'';
position:absolute;
inset:0;
background:
radial-gradient(circle at 12% 18%, rgba(255,255,255,.10) 0%, transparent 22%),
radial-gradient(circle at 88% 84%, rgba(255,255,255,.07) 0%, transparent 28%);
pointer-events:none;
}
/* decorative grid pattern overlay */
.dir-hero-grid{
position:absolute;
inset:0;
pointer-events:none;
opacity:.06;
background-image:
linear-gradient(rgba(255,255,255,.5) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.5) 1px, transparent 1px);
background-size: 4rem 4rem;
mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
-webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
}
.dir-hero-art{ position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.dir-hero-shape{ position:absolute; border-radius:50%; background:rgba(255,255,255,.06); backdrop-filter:blur(2px); }
.dir-hero-shape--1{ width:22rem; height:22rem; top:-7rem; right:5%; opacity:.9; }
.dir-hero-shape--2{ width:14rem; height:14rem; bottom:-3rem; right:22%; opacity:.55; }
.dir-hero-shape--3{ width:9rem; height:9rem; top:22%; left:3%; opacity:.42; }
.dir-hero-shape--4{ width:6rem; height:6rem; bottom:18%; left:14%; opacity:.32; background:rgba(var(--accent-rgb),.20); }
.dir-hero-inner{
position:relative;
z-index:1;
max-width:80rem;
}
.dir-hero-eyebrow{
display:inline-flex;
align-items:center;
gap:.7rem;
padding:.6rem 1.4rem;
background:rgba(255,255,255,.13);
border:1px solid rgba(255,255,255,.22);
border-radius:var(--r-full);
font-size:1.15rem;
font-weight:700;
letter-spacing:.14em;
text-transform:uppercase;
margin-bottom:1.6rem;
backdrop-filter:blur(6px);
color:var(--white);
}
.dir-hero-eyebrow i{ color:var(--gold); font-size:1.2rem; }
.dir-hero-title{
font-family:var(--font-heading);
font-size:clamp(2.8rem, 4.4vw, 4.2rem);
font-weight:800;
color:var(--white);
margin:0 0 1rem;
letter-spacing:-.025em;
line-height:1.05;
text-shadow:0 2px 14px rgba(0,0,0,.18);
}
.dir-hero-sub{
color:rgba(255,255,255,.88);
font-size:1.55rem;
line-height:1.65;
margin:0 0 2.6rem;
max-width:62rem;
font-weight:400;
}
.dir-hero-stats{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(20rem, 1fr));
gap:1.4rem;
max-width:74rem;
}
.dir-hero-stat{
display:flex;
align-items:center;
gap:1.4rem;
padding:1.6rem 2rem;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.18);
border-radius:var(--r-lg);
backdrop-filter:blur(10px);
transition:all var(--t-base);
}
.dir-hero-stat:hover{
background:rgba(255,255,255,.14);
transform:translateY(-3px);
border-color:rgba(255,255,255,.32);
box-shadow:0 12px 28px rgba(0,0,0,.18);
}
.dir-hero-stat-icon{
width:4.4rem;
height:4.4rem;
display:inline-flex;
align-items:center;
justify-content:center;
background:rgba(255,255,255,.18);
border-radius:var(--r-md);
flex-shrink:0;
border:1px solid rgba(255,255,255,.22);
}
.dir-hero-stat-icon i{
font-size:1.8rem;
color:var(--white);
}
.dir-hero-stat-body{ display:flex; flex-direction:column; gap:.15rem; min-width:0; }
.dir-hero-stat-body strong{
font-family:var(--font-heading);
font-size:2.6rem;
font-weight:800;
color:var(--white);
line-height:1;
letter-spacing:-.02em;
}
.dir-hero-stat-body span{
font-size:1.15rem;
color:rgba(255,255,255,.78);
text-transform:uppercase;
letter-spacing:.08em;
font-weight:700;
}
/* ─────────────────────────────────────────────────────
TOOLBAR
───────────────────────────────────────────────────── */
.dir-toolbar{
background:var(--white);
border:1px solid var(--border-light);
border-radius:var(--r-xl);
box-shadow:var(--shadow-card);
padding:2rem 2.4rem;
margin-bottom:2.4rem;
display:flex;
flex-direction:column;
gap:1.8rem;
position:relative;
overflow:hidden;
}
.dir-toolbar::before{
content:'';
position:absolute;
top:0; left:0; right:0;
height:3px;
background:linear-gradient(90deg, var(--primary) 0%, var(--accent) 50%, var(--primary) 100%);
opacity:.85;
}
.dir-toolbar-top{
display:flex;
align-items:center;
justify-content:space-between;
gap:2rem;
flex-wrap:wrap;
padding-bottom:1.6rem;
border-bottom:1px solid var(--border-light);
}
.dir-toolbar-heading{
display:flex;
align-items:center;
gap:1.2rem;
min-width:0;
}
.dir-toolbar-heading-icon{
width:4.4rem;
height:4.4rem;
border-radius:var(--r-md);
background:linear-gradient(135deg, var(--primary-mist) 0%, color-mix(in srgb, var(--primary) 14%, var(--white)) 100%);
color:var(--primary);
display:inline-flex;
align-items:center;
justify-content:center;
font-size:1.7rem;
flex-shrink:0;
border:1px solid rgba(var(--primary-rgb),.14);
}
.dir-toolbar-title{
font-family:var(--font-heading);
font-size:1.75rem;
font-weight:800;
color:var(--text);
margin:0;
letter-spacing:-.01em;
line-height:1.2;
}
.dir-toolbar-sub{
font-size:1.3rem;
color:var(--text-muted);
margin:.2rem 0 0;
line-height:1.5;
}
.dir-result-count{
display:inline-flex;
align-items:center;
gap:.6rem;
padding:.85rem 1.6rem;
background:var(--primary-mist);
border:1px solid rgba(var(--primary-rgb),.16);
border-radius:var(--r-full);
font-size:1.3rem;
font-weight:700;
color:var(--primary-dark);
white-space:nowrap;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.4);
}
.dir-result-count i{ font-size:1.1rem; }
.dir-toolbar-bottom{
display:flex;
align-items:center;
gap:1.6rem;
flex-wrap:wrap;
}
.dir-search-wrapper{
position:relative;
flex:1 1 32rem;
min-width:24rem;
display:flex;
align-items:center;
}
.dir-search{
width:100%;
padding:1.25rem 4.6rem 1.25rem 4.6rem;
border:2px solid var(--border);
border-radius:var(--r-full);
font-size:1.45rem;
background:var(--gray-25);
color:var(--text);
font-family:var(--font-body);
outline:none;
transition:all var(--t-base);
height:auto;
line-height:1.4;
}
.dir-search::placeholder{ color:var(--text-muted); }
.dir-search:hover{ border-color:var(--text-muted); }
.dir-search:focus{
border-color:var(--primary);
box-shadow:0 0 0 4px var(--primary-glow);
background:var(--white);
}
.dir-search-icon{
position:absolute;
left:1.8rem;
color:var(--text-muted);
font-size:1.5rem;
pointer-events:none;
transition:color var(--t-base);
}
.dir-search:focus ~ .dir-search-icon,
.dir-search-wrapper:focus-within .dir-search-icon{
color:var(--primary);
}
.dir-search-clear{
position:absolute;
right:.7rem;
width:3.4rem;
height:3.4rem;
border:none;
background:var(--gray-100);
color:var(--text-muted);
border-radius:50%;
cursor:pointer;
display:inline-flex;
align-items:center;
justify-content:center;
font-size:1.2rem;
opacity:0;
pointer-events:none;
transform:scale(.85);
transition:all var(--t-fast);
}
.dir-search-clear.is-visible{
opacity:1;
pointer-events:auto;
transform:scale(1);
}
.dir-search-clear:hover{
background:var(--primary);
color:var(--white);
transform:scale(1.06);
}
.dir-filters{
display:flex;
gap:.8rem;
flex-wrap:wrap;
}
.dir-filter{
display:inline-flex;
align-items:center;
gap:.7rem;
padding:.95rem 1.6rem;
background:var(--white);
border:1.6px solid var(--border);
border-radius:var(--r-full);
font-family:var(--font-body);
font-size:1.32rem;
font-weight:600;
color:var(--text-secondary);
cursor:pointer;
transition:all var(--t-base);
box-shadow:var(--shadow-xs);
line-height:1;
white-space:nowrap;
}
.dir-filter i{ font-size:1.25rem; color:var(--text-muted); transition:color var(--t-base); }
.dir-filter em{
background:var(--gray-100);
color:var(--text-muted);
padding:.25rem .75rem;
border-radius:var(--r-full);
font-style:normal;
font-size:1.15rem;
min-width:2.2rem;
text-align:center;
font-weight:700;
line-height:1.2;
transition:all var(--t-base);
}
.dir-filter:hover{
border-color:var(--primary);
color:var(--primary);
transform:translateY(-2px);
box-shadow:var(--shadow-md);
}
.dir-filter:hover i{ color:var(--primary); }
.dir-filter.is-active{
background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
color:var(--white);
border-color:var(--primary);
box-shadow:0 6px 18px var(--primary-glow);
transform:translateY(-2px);
}
.dir-filter.is-active i{ color:var(--white); }
.dir-filter.is-active em{ background:rgba(255,255,255,.22); color:var(--white); }
/* ─────────────────────────────────────────────────────
GRID
───────────────────────────────────────────────────── */
.dir-grid{
display:grid;
grid-template-columns:repeat(auto-fill, minmax(32rem, 1fr));
gap:2rem;
}
@media (max-width:640px){
.dir-grid{ grid-template-columns:1fr; gap:1.4rem; }
}
/* ─────────────────────────────────────────────────────
CARD
───────────────────────────────────────────────────── */
.dir-card{
position:relative;
display:flex;
flex-direction:column;
background:var(--white);
border:1px solid var(--border-light);
border-radius:var(--r-xl);
box-shadow:var(--shadow-card);
overflow:hidden;
transition:transform .35s cubic-bezier(.4,0,.2,1), box-shadow .35s cubic-bezier(.4,0,.2,1), border-color .25s ease;
isolation:isolate;
}
.dir-card::before{
content:'';
position:absolute;
top:0; left:0; right:0;
height:4px;
background:linear-gradient(90deg, var(--role-color, var(--primary)) 0%, color-mix(in srgb, var(--role-color, var(--primary)) 60%, var(--accent)) 100%);
opacity:.85;
z-index:3;
}
.dir-card:hover{
transform:translateY(-6px);
box-shadow:0 20px 40px rgba(0,0,0,.10), 0 6px 12px rgba(var(--primary-rgb),.08);
border-color:color-mix(in srgb, var(--role-color, var(--primary)) 35%, var(--border-light));
}
.dir-card.is-inactive{ opacity:.94; filter:saturate(.82); }
/* ── Photo banner ──────────────────────────────────── */
.dir-card-photo{
position:relative;
height:15rem;
background:linear-gradient(135deg, var(--photo-bg, var(--primary)) 0%, color-mix(in srgb, var(--photo-bg, var(--primary)) 70%, #000) 100%);
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
flex-shrink:0;
}
/* Soft grid pattern on photo for premium feel */
.dir-card-photo-pattern{
position:absolute;
inset:0;
background-image:
radial-gradient(circle at 18% 22%, rgba(255,255,255,.10) 0%, transparent 35%),
radial-gradient(circle at 82% 78%, rgba(0,0,0,.18) 0%, transparent 45%);
pointer-events:none;
}
.dir-card-photo img{
width:100%;
height:100%;
object-fit:cover;
position:relative;
z-index:1;
}
.dir-init{
font-family:var(--font-heading);
font-size:5.2rem;
font-weight:800;
color:var(--white);
text-transform:uppercase;
letter-spacing:-.04em;
text-shadow:0 4px 16px rgba(0,0,0,.28);
position:relative;
z-index:1;
}
/* Role icon badge in top-left corner of photo */
.dir-card-role-badge{
position:absolute;
top:1rem;
left:1rem;
width:3.6rem;
height:3.6rem;
display:inline-flex;
align-items:center;
justify-content:center;
background:rgba(255,255,255,.96);
color:var(--role-color, var(--primary));
border-radius:var(--r-md);
font-size:1.35rem;
box-shadow:0 4px 14px rgba(0,0,0,.18);
z-index:2;
border:1.5px solid rgba(255,255,255,.6);
transition:transform var(--t-base);
}
.dir-card:hover .dir-card-role-badge{ transform:scale(1.08) rotate(-4deg); }
/* Status dot bottom-right */
.dir-card-status{
position:absolute;
bottom:1rem;
right:1rem;
width:1.5rem;
height:1.5rem;
background:#22c55e;
border:3px solid var(--white);
border-radius:50%;
box-shadow:0 2px 10px rgba(0,0,0,.25);
z-index:2;
}
.dir-card-status.is-off{ background:var(--gray-400); }
/* Inactive overlay banner */
.dir-card-inactive-overlay{
position:absolute;
top:1rem;
right:1rem;
display:inline-flex;
align-items:center;
gap:.4rem;
padding:.4rem .85rem;
background:rgba(0,0,0,.55);
color:var(--white);
border-radius:var(--r-full);
font-size:1.1rem;
font-weight:700;
letter-spacing:.02em;
backdrop-filter:blur(6px);
z-index:2;
border:1px solid rgba(255,255,255,.18);
}
.dir-card-inactive-overlay i{ font-size:1rem; }
/* ── Body ──────────────────────────────────────────── */
.dir-card-body{
padding:2rem 2rem 1.4rem;
display:flex;
flex-direction:column;
gap:1rem;
flex:1;
}
.dir-card-role-chip{
display:inline-flex;
align-items:center;
gap:.55rem;
align-self:flex-start;
font-size:1.12rem;
font-weight:800;
padding:.5rem 1rem .5rem .8rem;
border-radius:var(--r-full);
letter-spacing:.02em;
border:1.5px solid;
line-height:1.2;
text-transform:uppercase;
}
.dir-card-role-chip-dot{
width:.65rem;
height:.65rem;
border-radius:50%;
flex-shrink:0;
box-shadow:0 0 0 3px color-mix(in srgb, currentColor 18%, transparent);
}
.dir-card-name{
font-family:var(--font-heading);
font-size:1.85rem;
font-weight:800;
color:var(--text);
margin:0;
line-height:1.2;
letter-spacing:-.015em;
word-break:break-word;
}
.dir-card-code{
display:inline-flex;
align-items:center;
gap:.6rem;
font-family:var(--font-mono, 'JetBrains Mono', monospace);
font-size:1.18rem;
font-weight:600;
color:var(--text-muted);
align-self:flex-start;
background:var(--gray-50);
padding:.45rem .95rem;
border-radius:var(--r-full);
border:1px solid var(--border-light);
letter-spacing:.02em;
}
.dir-card-code i{ color:var(--primary); font-size:1.1rem; }
.dir-card-divider{
height:1px;
background:linear-gradient(90deg, transparent 0%, var(--border-light) 50%, transparent 100%);
margin:.2rem 0;
}
.dir-card-info{
display:flex;
flex-direction:column;
gap:.5rem;
flex:1;
}
.dir-card-info-row{
display:flex;
align-items:center;
gap:1rem;
font-size:1.32rem;
color:var(--text-secondary);
text-decoration:none !important;
padding:.55rem .2rem;
border-radius:var(--r-sm);
transition:all var(--t-fast);
min-width:0;
}
.dir-card-info-row:hover{
color:var(--primary);
background:var(--primary-mist);
padding:.55rem .8rem;
}
.dir-card-info-row.is-empty{
color:var(--text-muted);
font-style:italic;
cursor:default;
pointer-events:none;
}
.dir-card-info-row.is-empty:hover{ background:transparent; padding:.55rem .2rem; }
.dir-card-info-icon{
width:3rem;
height:3rem;
display:inline-flex;
align-items:center;
justify-content:center;
background:var(--primary-mist);
color:var(--primary);
border-radius:var(--r-sm);
flex-shrink:0;
font-size:1.25rem;
border:1px solid rgba(var(--primary-rgb),.10);
transition:all var(--t-fast);
}
.dir-card-info-row:hover .dir-card-info-icon{
background:var(--primary);
color:var(--white);
transform:scale(1.06);
}
.dir-card-info-row.is-empty .dir-card-info-icon{
background:var(--gray-50);
color:var(--text-muted);
border-color:var(--border-light);
}
.dir-card-info-text{
flex:1;
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
font-weight:500;
}
/* ── Footer actions ────────────────────────────────── */
.dir-card-footer{
display:flex;
align-items:center;
gap:.6rem;
padding:1.2rem 2rem;
border-top:1px solid var(--border-light);
background:linear-gradient(180deg, var(--gray-25) 0%, var(--white) 100%);
}
.dir-card-action{
width:3.8rem;
height:3.8rem;
display:inline-flex;
align-items:center;
justify-content:center;
background:var(--white);
border:1.5px solid var(--border);
border-radius:50%;
color:var(--primary);
text-decoration:none !important;
font-size:1.3rem;
transition:all var(--t-base);
box-shadow:var(--shadow-xs);
flex-shrink:0;
position:relative;
}
.dir-card-action:hover{
background:var(--primary);
color:var(--white);
border-color:var(--primary);
transform:translateY(-3px);
box-shadow:0 8px 20px var(--primary-glow);
}
.dir-card-action-edit{
color:#0891b2;
border-color:#cffafe;
background:#ecfeff;
}
.dir-card-action-edit:hover{
background:#0891b2;
color:var(--white);
border-color:#0891b2;
box-shadow:0 8px 20px rgba(8,145,178,.30);
}
.dir-card-spacer{ flex:1; }
.dir-card-status-text{
font-size:1.15rem;
font-weight:800;
text-transform:uppercase;
letter-spacing:.06em;
color:var(--text-muted);
padding:.35rem .85rem;
background:var(--gray-100);
border-radius:var(--r-full);
}
.dir-card-status-text.is-active{
color:#15803d;
background:#dcfce7;
border:1px solid #bbf7d0;
position:relative;
padding-left:1.85rem;
}
.dir-card-status-text.is-active::before{
content:'';
position:absolute;
left:.7rem;
top:50%;
transform:translateY(-50%);
width:.55rem;
height:.55rem;
background:#22c55e;
border-radius:50%;
box-shadow:0 0 0 3px rgba(34,197,94,.22);
animation:dirPulse 2s ease-in-out infinite;
}
@keyframes dirPulse{
0%,100%{ box-shadow:0 0 0 3px rgba(34,197,94,.22); }
50%{ box-shadow:0 0 0 6px rgba(34,197,94,.10); }
}
/* ─────────────────────────────────────────────────────
EMPTY STATE
───────────────────────────────────────────────────── */
.dir-empty{
position:relative;
overflow:hidden;
text-align:center;
padding:6rem 2rem;
background:var(--white);
border:1.5px dashed var(--border);
border-radius:var(--r-xl);
color:var(--text-secondary);
box-shadow:var(--shadow-card);
}
.dir-empty[hidden]{ display:none !important; }
.dir-empty-art{ position:absolute; top:-5rem; right:-5rem; width:18rem; height:18rem; border-radius:50%; background:var(--primary-mist); opacity:.55; pointer-events:none; }
.dir-empty-shape{ position:absolute; border-radius:50%; pointer-events:none; }
.dir-empty-shape--1{ width:11rem; height:11rem; top:-2rem; right:6rem; background:var(--primary); opacity:.08; }
.dir-empty-shape--2{ width:7rem; height:7rem; bottom:2rem; right:14rem; background:var(--accent); opacity:.10; }
.dir-empty-shape--3{ width:5rem; height:5rem; top:4rem; left:6rem; background:var(--primary); opacity:.07; }
.dir-empty-icon-wrap{
width:8rem;
height:8rem;
margin:0 auto 2rem;
display:inline-flex;
align-items:center;
justify-content:center;
background:linear-gradient(135deg, var(--primary-mist) 0%, var(--white) 100%);
color:var(--primary);
border-radius:50%;
font-size:3.6rem;
border:1.5px solid rgba(var(--primary-rgb),.14);
box-shadow:0 8px 22px rgba(var(--primary-rgb),.10);
position:relative;
z-index:1;
}
.dir-empty h3{
font-family:var(--font-heading);
font-size:2.1rem;
font-weight:800;
color:var(--text);
margin:0 0 .8rem;
letter-spacing:-.015em;
position:relative;
z-index:1;
}
.dir-empty p{
color:var(--text-muted);
font-size:1.45rem;
max-width:48rem;
margin:0 auto 2.2rem;
line-height:1.65;
position:relative;
z-index:1;
}
.dir-empty-reset{
display:inline-flex;
align-items:center;
gap:.7rem;
padding:1.1rem 2.4rem;
background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
color:var(--white) !important;
border:none;
border-radius:var(--r-full);
font-family:var(--font-heading);
font-size:1.4rem;
font-weight:700;
cursor:pointer;
transition:all var(--t-base);
box-shadow:0 6px 18px var(--primary-glow);
text-decoration:none !important;
position:relative;
z-index:1;
}
.dir-empty-reset i{ font-size:1.3rem; }
.dir-empty-reset:hover{
transform:translateY(-3px);
box-shadow:0 12px 28px var(--primary-glow);
filter:brightness(1.05);
}
/* Card reveal animation + hidden state */
.dir-hidden{ display:none !important; }
.dir-reveal{ animation:dirReveal .55s cubic-bezier(.4,0,.2,1) both; }
@keyframes dirReveal{
from{ opacity:0; transform:translateY(14px) scale(.98); }
to { opacity:1; transform:translateY(0) scale(1); }
}
/* ─────────────────────────────────────────────────────
RESPONSIVE BREAKPOINTS
───────────────────────────────────────────────────── */
@media (max-width:1024px){
.dir-hero{ padding:4rem 2.8rem; }
.dir-hero-stats{ grid-template-columns:repeat(auto-fit, minmax(18rem,1fr)); }
.dir-toolbar{ padding:1.8rem 2rem; }
}
@media (max-width:768px){
.dir-hero{ padding:3.4rem 2rem; }
.dir-hero-title{ font-size:2.8rem; }
.dir-hero-sub{ font-size:1.4rem; }
.dir-hero-stats{ grid-template-columns:1fr 1fr; gap:1rem; }
.dir-hero-stat{ padding:1.2rem 1.4rem; gap:1rem; }
.dir-hero-stat-icon{ width:3.6rem; height:3.6rem; }
.dir-hero-stat-body strong{ font-size:2rem; }
.dir-toolbar-top{ flex-direction:column; align-items:flex-start; gap:1.2rem; }
.dir-toolbar-bottom{ flex-direction:column; align-items:stretch; }
.dir-search-wrapper{ min-width:0; flex-basis:auto; }
.dir-filters{ width:100%; overflow-x:auto; flex-wrap:nowrap; padding-bottom:.4rem; }
.dir-filter{ flex-shrink:0; }
}
@media (max-width:480px){
.dir-hero{ padding:2.8rem 1.6rem; }
.dir-hero-stats{ grid-template-columns:1fr; }
.dir-card-body{ padding:1.6rem 1.6rem 1.2rem; }
.dir-card-footer{ padding:1rem 1.4rem; }
}
/* =====================================================
Fix 13: CERTIFICATE MANAGEMENT PAGE
Consolidated from admin-certificates.css.
===================================================== */
.idcard-container.cert-mgmt{
padding: 1.4rem 0 4rem !important;
max-width: 1320px !important;
overflow-x: hidden !important;
}
.idcard-container.cert-mgmt .page-header{ display: flex !important; }
/* ---- BUTTONS ---- */
.cert-mgmt .btn{
display: inline-flex !important; align-items: center !important; justify-content: center !important;
gap: .5rem !important; padding: .85rem 1.6rem !important; font-size: 1.28rem !important;
font-weight: 700 !important; border-radius: var(--r-md) !important; border: 1.5px solid transparent !important;
cursor: pointer !important; text-decoration: none !important; transition: all var(--t-base) !important;
white-space: nowrap !important; line-height: 1.2 !important; font-family: inherit !important;
}
.cert-mgmt .btn-sm{ padding: .65rem 1.2rem !important; font-size: 1.18rem !important; }
.cert-mgmt .btn-primary{ background: #fff !important; color: var(--primary-dark) !important; }
.cert-mgmt .btn-primary:hover{ background: var(--primary-mist) !important; color: var(--primary-dark) !important; transform: translateY(-2px) !important; }
.cert-mgmt .btn-secondary{ background: rgba(255,255,255,.15) !important; color: var(--white) !important; border-color: rgba(255,255,255,.3) !important; backdrop-filter: blur(6px); }
.cert-mgmt .btn-secondary:hover{ background: rgba(255,255,255,.25) !important; transform: translateY(-2px) !important; }
.cert-mgmt .btn-ghost{ background: var(--white) !important; color: var(--text) !important; border-color: var(--border) !important; }
.cert-mgmt .btn-ghost:hover{ background: var(--primary-mist) !important; border-color: var(--primary) !important; color: var(--primary) !important; }
.cert-mgmt .btn-success{ background: #10b981 !important; color: var(--white) !important; border-color: #10b981 !important; }
.cert-mgmt .btn-success:hover{ background: #059669 !important; border-color: #059669 !important; transform: translateY(-2px) !important; }
.cert-mgmt .btn-info{ background: #0891b2 !important; color: var(--white) !important; border-color: #0891b2 !important; }
.cert-mgmt .btn-info:hover{ background: #0e7490 !important; border-color: #0e7490 !important; transform: translateY(-2px) !important; }
.cert-mgmt .btn-warning{ background: #f59e0b !important; color: var(--white) !important; border-color: #f59e0b !important; }
.cert-mgmt .btn-warning:hover{ background: #d97706 !important; border-color: #d97706 !important; transform: translateY(-2px) !important; }
.cert-mgmt .btn-danger{ background: #ef4444 !important; color: var(--white) !important; border-color: #ef4444 !important; }
.cert-mgmt .btn-danger:hover{ background: #dc2626 !important; border-color: #dc2626 !important; transform: translateY(-2px) !important; }
.cert-mgmt .btn.is-loading, .cert-mgmt .btn.is-loading:hover{ opacity: .85 !important; cursor: progress !important; transform: none !important; }
/* ---- PAGE HEADER ---- */
.cert-mgmt .page-header{
display: flex !important; align-items: center !important; justify-content: space-between !important;
gap: 1.6rem !important; flex-wrap: wrap !important; margin: 0 0 2rem !important;
padding: 2.2rem 2.4rem !important;
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 60%, var(--primary-deeper) 100%) !important;
color: var(--white) !important; border-radius: var(--r-2xl) !important;
box-shadow: var(--shadow-xl) !important; position: relative !important; overflow: hidden !important;
}
.cert-mgmt .page-header::before{
content:'' !important; position: absolute !important; top: -8rem !important; right: -6rem !important;
width: 24rem !important; height: 24rem !important; border-radius: 50% !important;
background: radial-gradient(circle, rgba(255,255,255,.10) 0%, transparent 70%) !important;
pointer-events: none !important;
}
.cert-mgmt .page-header::after{
content:'' !important; position: absolute !important; bottom: -6rem !important; left: -4rem !important;
width: 18rem !important; height: 18rem !important; border-radius: 50% !important;
background: radial-gradient(circle, rgba(245,158,11,.18) 0%, transparent 65%) !important;
pointer-events: none !important;
}
.cert-mgmt .page-header > div{ position: relative !important; z-index: 1 !important; flex: 1 !important; min-width: 22rem !important; }
.cert-mgmt .page-header h2{
margin: 0 0 .5rem !important; font-size: clamp(1.9rem, 3vw, 2.4rem) !important;
font-weight: 800 !important; color: var(--white) !important;
display: flex !important; align-items: center !important; gap: .7rem !important;
letter-spacing: -.02em !important; text-shadow: 0 2px 10px rgba(0,0,0,.18) !important;
}
.cert-mgmt .page-header h2 i{ color: var(--gold) !important; font-size: 1em !important; }
.cert-mgmt .page-header-sub{
margin: 0 !important; color: rgba(255,255,255,.86) !important;
font-size: 1.32rem !important; line-height: 1.55 !important; max-width: 60rem !important;
}
.cert-mgmt .page-header-actions{
position: relative !important; z-index: 1 !important;
display: flex !important; gap: .8rem !important; flex-wrap: wrap !important;
}
/* ---- QUICK DOWNLOAD CARD ---- */
.cert-mgmt .qd-card{
border-left: 4px solid var(--primary) !important; padding: 2rem 2.2rem !important;
background: radial-gradient(circle at 0% 0%, rgba(var(--primary-rgb), .06) 0%, transparent 40%),
radial-gradient(circle at 100% 100%, rgba(245, 158, 11, .05) 0%, transparent 40%), var(--white) !important;
position: relative !important; margin-bottom: 1.8rem !important;
border-radius: var(--r-xl) !important; border: 1px solid var(--border-light) !important;
box-shadow: var(--shadow-card) !important;
}
.cert-mgmt .qd-banner{
display: flex !important; align-items: flex-start !important; gap: 1rem !important;
background: linear-gradient(135deg, #f0fdf5 0%, #ecfeff 100%) !important;
border: 1px solid #bbf7d0 !important; border-left: 4px solid var(--primary) !important;
border-radius: var(--r-md) !important; padding: 1.1rem 1.4rem !important;
margin-bottom: 1.6rem !important; font-size: 1.28rem !important;
color: #334155 !important; line-height: 1.55 !important;
}
.cert-mgmt .qd-banner i{ color: #f59e0b !important; font-size: 1.8rem !important; flex-shrink: 0 !important; margin-top: .15rem !important; }
.cert-mgmt .qd-banner strong{ color: var(--primary-dark) !important; font-weight: 800 !important; }
.cert-mgmt .qd-grid{
display: grid !important; grid-template-columns: 1.2fr 1fr 1fr !important;
gap: 1.6rem !important; align-items: stretch !important;
}
@media (max-width: 900px){ .cert-mgmt .qd-grid{ grid-template-columns: 1fr !important; } }
.cert-mgmt .qd-step{ display: flex !important; align-items: flex-start !important; gap: 1rem !important; }
.cert-mgmt .qd-step-num{
flex: 0 0 auto !important; width: 3.4rem !important; height: 3.4rem !important;
border-radius: 50% !important; background: var(--primary-mist) !important;
color: var(--primary-dark) !important; font-weight: 800 !important; font-size: 1.5rem !important;
display: flex !important; align-items: center !important; justify-content: center !important;
}
.cert-mgmt .qd-step-body{ flex: 1 !important; min-width: 0 !important; }
.cert-mgmt .qd-step-body h3{ margin: 0 0 .7rem !important; font-size: 1.4rem !important; font-weight: 700 !important; color: var(--text) !important; }
.cert-mgmt .qd-step-note{ margin-top: .7rem !important; font-size: 1.22rem !important; color: var(--text-muted) !important; }
.cert-mgmt .qd-step-note strong{ color: var(--primary-dark) !important; font-weight: 800 !important; }
.cert-mgmt .qd-filter-form{ display: flex !important; gap: .8rem !important; align-items: center !important; flex-wrap: wrap !important; }
.cert-mgmt .qd-tpl-row{ display: flex !important; gap: .6rem !important; align-items: stretch !important; flex-wrap: wrap !important; }
.cert-mgmt .qd-tpl-selected{
display: flex !important; align-items: center !important; gap: .7rem !important;
margin-top: .8rem !important; padding: .7rem 1rem !important;
background: var(--gray-50) !important; border: 1px dashed var(--border) !important;
border-radius: var(--r-md) !important; font-size: 1.25rem !important;
}
.cert-mgmt .qd-tpl-swatch{
display: inline-block !important; width: 44px !important; height: 28px !important;
border-radius: var(--r-sm) !important; background: #132340 !important;
border-bottom: 3px solid #c9a24c !important; flex-shrink: 0 !important;
transition: background .25s, border-color .25s !important;
box-shadow: 0 2px 6px rgba(0,0,0,.12) !important;
}
.cert-mgmt .qd-tpl-selected-label{ color: var(--text-muted) !important; font-weight: 500 !important; }
.cert-mgmt .qd-tpl-selected strong{ color: var(--text) !important; font-weight: 800 !important; }
.cert-mgmt .qd-step-action{ border-left: 1px solid var(--border-light) !important; padding-left: 1.6rem !important; }
@media (max-width: 900px){
.cert-mgmt .qd-step-action{ border-left: none !important; padding-left: 0 !important; padding-top: 1rem !important; border-top: 1px dashed var(--border-light) !important; }
}
.cert-mgmt .qd-dl-btn{
padding: 1.2rem 2rem !important; font-size: 1.4rem !important; font-weight: 800 !important;
text-decoration: none !important; white-space: nowrap !important;
border-radius: var(--r-md) !important; width: 100% !important; justify-content: center !important;
}
.cert-mgmt .filter-control,
.cert-mgmt .qd-tpl-select,
.cert-mgmt .qd-filter-form .filter-control{
padding: .85rem 1.2rem !important; border: 1.5px solid var(--border) !important;
border-radius: var(--r-md) !important; font-size: 1.3rem !important;
background: var(--white) !important; color: var(--text) !important;
font-weight: 600 !important; cursor: pointer !important; transition: all var(--t-base) !important;
min-width: 0 !important; font-family: inherit !important; line-height: 1.4 !important;
}
.cert-mgmt .qd-filter-form .filter-control{ flex: 1 !important; min-width: 16rem !important; }
.cert-mgmt .qd-tpl-select{ flex: 1 1 18rem !important; }
.cert-mgmt .filter-control:focus, .cert-mgmt .qd-tpl-select:focus{
outline: none !important; border-color: var(--primary) !important;
box-shadow: 0 0 0 3px var(--primary-glow) !important;
}
/* ---- STATS GRID ---- */
.cert-mgmt .stats-grid{
display: grid !important; grid-template-columns: repeat(4, 1fr) !important;
gap: 1.4rem !important; margin: 0 0 1.8rem !important;
}
@media (max-width: 900px){ .cert-mgmt .stats-grid{ grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 520px){ .cert-mgmt .stats-grid{ grid-template-columns: 1fr !important; } }
.cert-mgmt .stat-card{
background: var(--white) !important; border: 1px solid var(--border-light) !important;
border-radius: var(--r-xl) !important; padding: 1.6rem !important;
box-shadow: var(--shadow-card) !important; display: flex !important; align-items: center !important;
gap: 1.2rem !important; transition: all var(--t-base) !important;
border-top: 4px solid var(--primary) !important; text-align: left !important;
}
.cert-mgmt .stat-card:hover{ transform: translateY(-3px) !important; box-shadow: 0 12px 28px rgba(0,0,0,.10) !important; }
.cert-mgmt .stat-card .stat-icon{
width: 5rem !important; height: 5rem !important; border-radius: var(--r-md) !important;
background: var(--primary-mist) !important; color: var(--primary) !important;
display: inline-flex !important; align-items: center !important; justify-content: center !important;
font-size: 2.2rem !important; flex-shrink: 0 !important; margin: 0 !important;
}
.cert-mgmt .stat-card.generated{ border-top-color: #16a34a !important; }
.cert-mgmt .stat-card.generated .stat-icon{ background: #dcfce7 !important; color: #16a34a !important; }
.cert-mgmt .stat-card.pending{ border-top-color: #d97706 !important; }
.cert-mgmt .stat-card.pending .stat-icon{ background: #fef3c7 !important; color: #d97706 !important; }
.cert-mgmt .stat-card.custom{ border-top-color: #7c3aed !important; }
.cert-mgmt .stat-card.custom .stat-icon{ background: #f3e8ff !important; color: #7c3aed !important; }
.cert-mgmt .stat-card .stat-body{ flex: 1 !important; min-width: 0 !important; }
.cert-mgmt .stat-card .stat-number{
font-family: var(--font-heading) !important; font-size: 2.4rem !important;
font-weight: 800 !important; color: var(--text) !important;
line-height: 1 !important; margin-bottom: .3rem !important;
}
.cert-mgmt .stat-card .stat-label{
font-size: 1.18rem !important; color: var(--text-muted) !important;
text-transform: uppercase !important; letter-spacing: .06em !important; font-weight: 700 !important;
}
/* ---- FORM CARD ---- */
.cert-mgmt .card{
background: var(--white) !important; border: 1px solid var(--border-light) !important;
border-radius: var(--r-xl) !important; box-shadow: var(--shadow-card) !important;
padding: 1.8rem 2rem !important; margin-bottom: 1.8rem !important;
position: relative !important; overflow: hidden !important;
}
.cert-mgmt .collapsible-header{
display: flex !important; align-items: center !important; justify-content: space-between !important;
gap: 1rem !important; margin-bottom: .4rem !important; flex-wrap: wrap !important;
}
.cert-mgmt .collapsible-header h3{
margin: 0 !important; font-size: 1.5rem !important; font-weight: 800 !important;
display: flex !important; align-items: center !important; gap: .6rem !important;
color: var(--text) !important;
}
.cert-mgmt .collapsible-sub{ color: var(--text-muted) !important; font-size: 1.28rem !important; line-height: 1.55 !important; margin: 0 0 1.4rem !important; }
.cert-mgmt .collapsible-sub code{ background: var(--primary-mist) !important; color: var(--primary-dark) !important; padding: 2px 6px !important; border-radius: 4px !important; font-size: 1.1rem !important; font-weight: 700 !important; }
.cert-mgmt .form-group{ margin-bottom: 1.2rem !important; }
.cert-mgmt .form-group label{ display: block !important; font-size: 1.22rem !important; font-weight: 700 !important; color: var(--text) !important; margin-bottom: .5rem !important; }
.cert-mgmt .form-control{
width: 100% !important; padding: .9rem 1.2rem !important; border: 1.5px solid var(--border) !important;
border-radius: var(--r-md) !important; font-size: 1.32rem !important;
background: var(--white) !important; color: var(--text) !important;
transition: all var(--t-base) !important; font-family: inherit !important; line-height: 1.4 !important;
}
.cert-mgmt .form-control:focus{ outline: none !important; border-color: var(--primary) !important; box-shadow: 0 0 0 3px var(--primary-glow) !important; }
.cert-mgmt .form-control::placeholder{ color: var(--text-muted) !important; }
.cert-mgmt textarea.form-control{ resize: vertical !important; min-height: 8rem !important; }
.cert-mgmt .form-row{ display: grid !important; gap: 1.2rem !important; margin-bottom: 1.2rem !important; }
.cert-mgmt .form-row-2{ grid-template-columns: 1fr 1fr !important; }
.cert-mgmt .form-row-3{ grid-template-columns: 1fr 1fr 1fr !important; }
@media (max-width: 720px){ .cert-mgmt .form-row-2, .cert-mgmt .form-row-3{ grid-template-columns: 1fr !important; } }
.cert-mgmt .form-actions{
display: flex !important; gap: .8rem !important; justify-content: flex-end !important;
margin-top: 1.4rem !important; flex-wrap: wrap !important;
padding-top: 1.2rem !important; border-top: 1px solid var(--border-light) !important;
}
.cert-mgmt .bulk-advanced{ margin-top: .8rem !important; padding: 1rem 1.2rem !important; border: 1px dashed var(--border) !important; border-radius: var(--r-md) !important; background: var(--gray-50) !important; }
.cert-mgmt .bulk-advanced summary{ cursor: pointer !important; font-weight: 700 !important; color: var(--primary-dark) !important; font-size: 1.28rem !important; user-select: none !important; display: flex !important; align-items: center !important; gap: .5rem !important; }
.cert-mgmt .bulk-advanced summary i{ font-size: 1.1rem !important; }
.cert-mgmt .muted{ color: var(--text-muted) !important; font-weight: 500 !important; font-size: 1.15rem !important; }
.cert-mgmt code{ background: var(--primary-mist) !important; color: var(--primary-dark) !important; padding: 1px 5px !important; border-radius: 4px !important; font-size: 1.1rem !important; font-weight: 700 !important; }
/* ---- TOOLBAR ---- */
.cert-mgmt .cert-toolbar{
display: flex !important; align-items: center !important; justify-content: space-between !important;
gap: 1.4rem !important; flex-wrap: wrap !important; padding: 1.2rem 1.6rem !important;
margin: -.4rem -.4rem 1.4rem !important; border: 1px solid var(--border-light) !important;
background: linear-gradient(180deg, var(--gray-25, #fbfcfd) 0%, var(--white) 100%) !important;
border-radius: var(--r-lg) !important; box-shadow: var(--shadow-xs) !important;
}
.cert-mgmt .cert-toolbar-leading{ display: flex !important; align-items: center !important; gap: 1.1rem !important; flex: 0 1 auto !important; min-width: 0 !important; }
.cert-mgmt .cert-toolbar-icon{
width: 4.2rem !important; height: 4.2rem !important; border-radius: var(--r-md) !important;
background: var(--primary-mist) !important; color: var(--primary) !important;
display: inline-flex !important; align-items: center !important; justify-content: center !important;
font-size: 1.7rem !important; flex-shrink: 0 !important;
}
.cert-mgmt .cert-toolbar-titles{ display: flex !important; flex-direction: column !important; gap: 2px !important; min-width: 0 !important; }
.cert-mgmt .cert-toolbar-title{ margin: 0 !important; font-family: var(--font-heading) !important; font-size: 1.5rem !important; font-weight: 700 !important; color: var(--text) !important; line-height: 1.2 !important; letter-spacing: -.01em !important; }
.cert-mgmt .cert-toolbar-sub{ margin: 0 !important; color: var(--text-muted) !important; font-size: 1.2rem !important; display: flex !important; align-items: center !important; gap: .5rem !important; flex-wrap: wrap !important; }
.cert-mgmt .cert-toolbar-count{
display: inline-flex !important; align-items: center !important; justify-content: center !important;
min-width: 2.4rem !important; height: 2rem !important; padding: 0 .65rem !important;
background: var(--primary) !important; color: var(--white) !important;
border-radius: 999px !important; font-size: 1.1rem !important; font-weight: 800 !important; line-height: 1 !important;
}
.cert-mgmt .cert-toolbar-scope{ display: inline-flex !important; align-items: center !important; gap: .35rem !important; color: var(--primary-dark) !important; font-weight: 700 !important; }
.cert-mgmt .cert-toolbar-scope::before{ content: '\00b7'; color: var(--text-muted); }
.cert-mgmt .cert-toolbar-filters{ display: flex !important; align-items: center !important; gap: .7rem !important; flex-wrap: wrap !important; flex: 1 1 auto !important; justify-content: flex-end !important; margin: 0 !important; }
.cert-mgmt .cert-search{
position: relative !important; display: inline-flex !important; align-items: center !important;
background: var(--white) !important; border: 1.5px solid var(--border) !important;
border-radius: var(--r-full) !important; padding: 0 1.2rem 0 2.9rem !important;
height: 4.2rem !important; transition: all var(--t-base) !important;
flex: 0 1 28rem !important; min-width: 0 !important;
}
.cert-mgmt .cert-search:focus-within{ border-color: var(--primary) !important; box-shadow: 0 0 0 3px var(--primary-glow) !important; }
.cert-mgmt .cert-search > i{ position: absolute !important; left: 1.1rem !important; top: 50% !important; transform: translateY(-50%) !important; color: var(--text-muted) !important; font-size: 1.3rem !important; pointer-events: none !important; }
.cert-mgmt .cert-search input{ border: none !important; outline: none !important; background: transparent !important; padding: 0 !important; margin: 0 !important; font-size: 1.28rem !important; color: var(--text) !important; width: 100% !important; height: 100% !important; font-family: inherit !important; min-width: 0 !important; }
.cert-mgmt .cert-search input::placeholder{ color: var(--text-muted) !important; }
.cert-mgmt .cert-select-wrap{
position: relative !important; display: inline-flex !important; align-items: center !important;
background: var(--white) !important; border: 1.5px solid var(--border) !important;
border-radius: var(--r-full) !important; height: 4.2rem !important;
padding: 0 2.6rem 0 2.9rem !important; transition: all var(--t-base) !important; flex: 0 0 auto !important;
}
.cert-mgmt .cert-select-wrap:focus-within{ border-color: var(--primary) !important; box-shadow: 0 0 0 3px var(--primary-glow) !important; }
.cert-mgmt .cert-select-wrap > i{ position: absolute !important; left: 1.1rem !important; top: 50% !important; transform: translateY(-50%) !important; color: var(--text-muted) !important; font-size: 1.25rem !important; pointer-events: none !important; }
.cert-mgmt .cert-select{
appearance: none !important; -webkit-appearance: none !important; -moz-appearance: none !important;
border: none !important; outline: none !important; background: transparent !important;
font: inherit !important; font-size: 1.25rem !important; font-weight: 600 !important;
color: var(--text) !important; height: 100% !important; padding: 0 !important;
cursor: pointer !important; width: 100% !important; min-width: 11rem !important;
background-image: url("data:image/svg+xml;utf8,") !important;
background-repeat: no-repeat !important; background-position: right .2rem center !important;
background-size: 10px 7px !important; padding-right: 1.4rem !important;
}
.cert-mgmt .cert-select::-ms-expand{ display: none !important; }
.cert-mgmt .cert-filter-clear{
display: inline-flex !important; align-items: center !important; gap: .4rem;
height: 4.2rem; padding: 0 1.4rem; border-radius: var(--r-full) !important;
background: #fee2e2 !important; color: #991b1b !important;
font-size: 1.22rem !important; font-weight: 700 !important;
text-decoration: none !important; transition: all var(--t-base) !important;
}
.cert-mgmt .cert-filter-clear:hover{ background: #fecaca !important; color: #7f1d1d !important; transform: translateY(-1px) !important; }
/* ---- TABLE SHELL ---- */
.idcard-container.cert-mgmt .table-responsive{
width: 100% !important; overflow-x: auto !important; overflow-y: visible !important;
border-radius: var(--r-lg) !important; border: 1px solid var(--border-light) !important;
background: var(--white) !important; box-shadow: var(--shadow-xs) !important;
position: relative !important; -webkit-overflow-scrolling: touch !important;
}
.cert-mgmt .students-table.cert-table{
width: 100% !important; table-layout: auto !important;
border-collapse: collapse !important; border-spacing: 0 !important;
font-size: 1.28rem !important; background: var(--white) !important; margin: 0 !important;
}
/* CRITICAL: Override the generic .cert-row display:flex from Fix 11
that breaks table row layout. */
.cert-mgmt .students-table.cert-table tbody tr.cert-row{ display: table-row !important; transition: background-color .18s ease !important; }
/* ---- Header row ---- */
.cert-mgmt .students-table.cert-table thead th{
background: linear-gradient(180deg, var(--gray-50) 0%, color-mix(in srgb, var(--gray-50) 80%, var(--white)) 100%) !important;
color: var(--text-secondary) !important; font-family: var(--font-heading) !important;
font-weight: 800 !important; font-size: 1.1rem !important;
text-transform: uppercase !important; letter-spacing: .08em !important;
padding: 1.25rem 1.4rem !important; text-align: left !important;
border: none !important; border-bottom: 2px solid var(--border-light) !important;
white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
vertical-align: middle !important; position: sticky !important; top: 0 !important; z-index: 1 !important;
}
.cert-mgmt .students-table.cert-table thead th.th-status,
.cert-mgmt .students-table.cert-table thead th.th-actions{ text-align: right !important; }
/* ---- Body cells ---- */
.cert-mgmt .students-table.cert-table tbody td{
padding: 1rem 1.4rem !important; vertical-align: middle !important;
border: none !important; border-bottom: 1px solid var(--border-light) !important;
color: var(--text) !important; word-wrap: break-word !important;
overflow-wrap: anywhere !important; background: var(--white) !important;
}
.cert-mgmt .students-table.cert-table tbody tr.cert-row:hover td{ background: var(--primary-mist) !important; }
.cert-mgmt .students-table.cert-table tbody tr.cert-row:last-child td{ border-bottom: none !important; }
.cert-mgmt .students-table.cert-table tbody tr.cert-row:last-child td:first-child{ border-bottom-left-radius: var(--r-lg) !important; }
.cert-mgmt .students-table.cert-table tbody tr.cert-row:last-child td:last-child{ border-bottom-right-radius: var(--r-lg) !important; }
/* ---- RECIPIENT CELL ---- */
.cert-mgmt .students-table.cert-table .td-recipient{ padding-top: 1rem !important; padding-bottom: 1rem !important; }
.cert-mgmt .cell-recipient{ display: flex !important; align-items: center !important; gap: 1rem !important; min-width: 0 !important; }
.cert-mgmt .cell-avatar{
width: 4.2rem !important; height: 4.2rem !important; border-radius: 50% !important;
overflow: hidden !important;
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%) !important;
color: var(--white) !important; display: inline-flex !important; align-items: center !important;
justify-content: center !important; flex-shrink: 0 !important;
box-shadow: 0 4px 10px rgba(var(--primary-rgb),.18) !important; position: relative !important;
}
.cert-mgmt .cell-avatar img{ width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; }
.cert-mgmt .cell-avatar-fallback{ font-family: var(--font-heading) !important; font-weight: 800 !important; font-size: 1.5rem !important; line-height: 1 !important; color: var(--white) !important; text-transform: uppercase !important; }
.cert-mgmt .cell-recipient-text{ display: flex !important; flex-direction: column !important; gap: .25rem !important; min-width: 0 !important; flex: 1 !important; }
.cert-mgmt .cell-recipient-name{ font-weight: 700 !important; color: var(--text) !important; font-size: 1.32rem !important; line-height: 1.25 !important; word-break: break-word !important; display: -webkit-box !important; -webkit-line-clamp: 1 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; }
.cert-mgmt .cell-recipient-sub{ display: flex !important; align-items: center !important; gap: .45rem !important; flex-wrap: wrap !important; font-size: 1.18rem !important; }
.cert-mgmt .cell-recipient-subline{ color: var(--text-muted) !important; font-weight: 500 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; max-width: 18rem !important; }
.cert-mgmt .chip{ display: inline-flex !important; align-items: center !important; gap: .3rem !important; padding: 2px 8px !important; border-radius: 999px !important; font-size: .98rem !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: .06em !important; background: var(--gray-100) !important; color: var(--text-muted) !important; line-height: 1.5 !important; flex-shrink: 0 !important; border: 1px solid transparent !important; }
.cert-mgmt .chip-student{ background: var(--primary-mist) !important; color: var(--primary-dark) !important; }
.cert-mgmt .chip-staff{ background: #dbeafe !important; color: #1d4ed8 !important; }
.cert-mgmt .chip-custom{ background: #f3e8ff !important; color: #7c3aed !important; }
/* ---- CERTIFICATE CELL ---- */
.cert-mgmt .cell-title{ font-weight: 700 !important; color: var(--text) !important; font-size: 1.25rem !important; line-height: 1.3 !important; word-break: break-word !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; white-space: normal !important; }
.cert-mgmt .cell-cert-type{ margin-top: .3rem !important; font-size: 1.08rem !important; color: var(--text-muted) !important; font-style: italic !important; display: -webkit-box !important; -webkit-line-clamp: 1 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; white-space: normal !important; }
/* ---- CERT NO CELL ---- */
.cert-mgmt .students-table.cert-table .td-number{ text-align: left !important; }
.cert-mgmt .cert-number{ display: inline-block !important; padding: 4px 10px !important; border-radius: var(--r-sm) !important; background: var(--gray-50) !important; color: var(--text-secondary) !important; font-family: "JetBrains Mono", "SF Mono", Menlo, monospace !important; font-size: 1.15rem !important; font-weight: 700 !important; border: 1px solid var(--border-light) !important; white-space: nowrap !important; max-width: 100% !important; overflow: hidden !important; text-overflow: ellipsis !important; vertical-align: middle !important; }
/* ---- SESSION CELL ---- */
.cert-mgmt .td-session{ text-align: left !important; }
.cert-mgmt .cell-session-text{ color: var(--text-secondary) !important; font-size: 1.2rem !important; font-weight: 600 !important; line-height: 1.4 !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; white-space: normal !important; }
/* ---- STATUS PILL ---- */
.cert-mgmt .td-status{ text-align: center !important; }
.cert-mgmt .status-pill{ display: inline-flex !important; align-items: center !important; gap: .45rem !important; padding: 4px 12px !important; border-radius: 999px !important; font-size: 1.05rem !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: .04em !important; line-height: 1.4 !important; white-space: nowrap !important; }
.cert-mgmt .status-pill-dot{ width: .55rem !important; height: .55rem !important; border-radius: 50% !important; background: currentColor !important; display: inline-block !important; flex-shrink: 0 !important; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 20%, transparent) !important; }
.cert-mgmt .status-pill.st-issued{ background: #d1fae5 !important; color: #047857 !important; border: 1px solid #a7f3d0 !important; }
.cert-mgmt .status-pill.st-revoked{ background: #fee2e2 !important; color: #b91c1c !important; border: 1px solid #fecaca !important; }
.cert-mgmt .status-pill.st-draft{ background: #fef3c7 !important; color: #92400e !important; border: 1px solid #fde68a !important; }
/* ---- ACTION CLUSTER ---- */
.cert-mgmt .td-actions{ text-align: right !important; }
.cert-mgmt .action-cluster{ display: inline-flex !important; align-items: center !important; gap: .4rem !important; padding: .3rem !important; background: var(--gray-50) !important; border: 1px solid var(--border-light) !important; border-radius: var(--r-full) !important; }
.cert-mgmt .act-btn{
display: inline-flex !important; align-items: center !important; justify-content: center !important;
gap: .4rem !important; padding: .5rem 1rem !important; border-radius: var(--r-full) !important;
font-size: 1.15rem !important; font-weight: 600 !important;
background: var(--white) !important; color: var(--text-secondary) !important;
text-decoration: none !important; border: 1px solid var(--border-light) !important;
transition: transform .18s ease, box-shadow .18s ease, background .18s, color .18s, border-color .18s !important;
flex-shrink: 0 !important; white-space: nowrap !important; line-height: 1 !important;
}
.cert-mgmt .act-btn i{ line-height: 1 !important; font-size: 1.1rem !important; }
.cert-mgmt .act-btn span{ font-size: 1.1rem !important; }
@media (max-width: 820px){
.cert-mgmt .cert-toolbar{ flex-direction: column !important; align-items: stretch !important; padding: 1.2rem !important; }
.cert-mgmt .cert-toolbar-leading{ width: 100% !important; }
.cert-mgmt .cert-toolbar-filters{ width: 100% !important; justify-content: flex-start !important; }
.cert-mgmt .cert-search{ flex: 1 1 100% !important; }
.cert-mgmt .cert-select-wrap{ flex: 1 1 calc(50% - .4rem) !important; min-width: 12rem !important; }
.cert-mgmt .cert-filter-clear{ flex: 1 1 100% !important; justify-content: center !important; }
.idcard-container.cert-mgmt .table-responsive{ overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
.cert-mgmt .students-table.cert-table{ min-width: 720px !important; }
}
@media (max-width: 767px){
.cert-mgmt .page-header{ padding: 1.6rem 1.4rem !important; }
.cert-mgmt .card{ padding: 1.4rem 1.2rem !important; }
.cert-mgmt .qd-card{ padding: 1.4rem 1.2rem !important; }
}
/* =====================================================
Fix 13: MOBILE SIDEBAR + HAMBURGER TOGGLE NOT SHOWING
stylenew.css line 689 sets .hamburger-btn { display:none }
but the @media (max-width:991px) block only overrides
width/height/etc — it never sets display:flex, so the
hamburger stays invisible on mobile. Similarly,
.desktop-nav is never hidden on mobile.
===================================================== */
@media (max-width: 991px) {
.hamburger-btn { display: flex !important; }
.desktop-nav { display: none !important; }
}
/* =====================================================
Fix 14: RESULT LIST PAGES — rl-* family
result_list.php (full-term exam results) and
result_ca_list.php (mid-term / continuous assessment).
Both were rendered as a plain Bootstrap-style table with
a tiny square avatar, no hierarchy, no grouping and no
motion. This block provides a unified, modern card-based
design that uses the existing primary / accent / gold
palette (no gradients), so both pages feel like part of
the same product surface as the rest of the portal.
===================================================== */
/* ---- Shared canvas ---- */
.rl-page{ background:var(--bg); padding:2.4rem 0 5rem; min-height:55vh; }
.rl-page .container{ padding-top:0; padding-bottom:0; }
/* ---- Profile hero card ---- */
.rl-profile{
position:relative;
background:var(--white);
border:1px solid var(--border-light);
border-radius:var(--r-2xl);
box-shadow:var(--shadow-xl);
padding:3rem 3.2rem;
margin-bottom:2.4rem;
overflow:hidden;
}
.rl-profile::before{
content:'';
position:absolute;
top:0; left:0; right:0;
height:5px;
background:var(--primary);
}
.rl-profile::after{
content:'';
position:absolute;
top:-7rem; right:-7rem;
width:22rem; height:22rem;
border-radius:50%;
background:var(--primary-mist);
opacity:.55;
pointer-events:none;
}
.rl-profile-deco{
position:absolute;
border-radius:50%;
pointer-events:none;
}
.rl-profile-deco--1{ width:11rem; height:11rem; bottom:-5rem; left:36%; background:rgba(var(--accent-rgb),.10); }
.rl-profile-deco--2{ width:7rem; height:7rem; top:3.2rem; right:32%; background:rgba(var(--gold-rgb),.18); }
.rl-profile-inner{
position:relative; z-index:1;
display:flex; align-items:center; gap:2.6rem;
flex-wrap:wrap;
}
.rl-avatar-wrap{
position:relative;
flex-shrink:0;
}
.rl-avatar-ring{
width:11rem; height:11rem;
border-radius:50%;
background:var(--primary-mist);
border:4px solid var(--white);
box-shadow:0 0 0 4px var(--primary), 0 10px 28px rgba(var(--primary-rgb),.25);
display:flex; align-items:center; justify-content:center;
overflow:hidden;
position:relative;
transition:transform var(--t-slow);
}
.rl-profile:hover .rl-avatar-ring{ transform:scale(1.04); }
.rl-avatar{
width:100%; height:100%;
object-fit:cover;
display:block;
}
.rl-avatar-fallback{
font-family:var(--font-heading);
font-size:3.6rem; font-weight:800;
color:var(--primary);
letter-spacing:-.02em;
text-transform:uppercase;
}
.rl-status-dot{
position:absolute;
bottom:.8rem; right:.8rem;
width:1.6rem; height:1.6rem;
background:var(--primary-light);
border:3px solid var(--white);
border-radius:50%;
box-shadow:0 2px 8px rgba(0,0,0,.18);
}
.rl-profile-info{ flex:1 1 28rem; min-width:0; }
.rl-eyebrow{
display:inline-flex; align-items:center; gap:.6rem;
padding:.5rem 1.2rem;
background:var(--primary-mist);
color:var(--primary);
font-size:1.1rem; font-weight:800;
text-transform:uppercase; letter-spacing:.14em;
border-radius:var(--r-full);
margin-bottom:1.1rem;
border:1px solid rgba(var(--primary-rgb),.14);
}
.rl-eyebrow i{ font-size:1.15rem; }
.rl-profile-name{
font-family:var(--font-heading);
font-size:clamp(2.2rem,3.2vw,2.9rem);
font-weight:800;
color:var(--text);
margin:0 0 .6rem;
letter-spacing:-.02em;
line-height:1.15;
}
.rl-profile-meta{
display:flex; gap:1.8rem; flex-wrap:wrap;
font-size:1.45rem;
color:var(--text-secondary);
font-weight:500;
}
.rl-profile-meta-item{
display:inline-flex; align-items:center; gap:.7rem;
}
.rl-profile-meta-item i{
color:var(--primary);
font-size:1.35rem;
width:1.7rem; text-align:center;
}
.rl-profile-meta-item strong{ color:var(--text); font-weight:700; }
.rl-profile-actions{
display:flex; gap:1rem; flex-wrap:wrap;
flex-shrink:0;
}
.rl-back-btn{
display:inline-flex; align-items:center; gap:.7rem;
padding:1.1rem 2rem;
background:var(--white);
color:var(--primary) !important;
border:2px solid var(--primary);
border-radius:var(--r-sm);
font-family:var(--font-heading);
font-size:1.35rem; font-weight:700;
text-decoration:none !important;
transition:all var(--t-base);
box-shadow:var(--shadow-sm);
}
.rl-back-btn:hover{
background:var(--primary);
color:var(--white) !important;
transform:translateY(-2px);
box-shadow:0 8px 22px var(--primary-glow);
}
.rl-back-btn i{ transition:transform var(--t-base); }
.rl-back-btn:hover i{ transform:translateX(-3px); }
/* ---- Stats strip ---- */
.rl-stats{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(20rem, 1fr));
gap:1.6rem;
margin-bottom:2.4rem;
}
.rl-stat{
background:var(--white);
border:1px solid var(--border-light);
border-radius:var(--r-lg);
box-shadow:var(--shadow-card);
padding:2rem 2.2rem;
display:flex; align-items:center; gap:1.6rem;
position:relative;
overflow:hidden;
transition:all var(--t-base);
}
.rl-stat::before{
content:'';
position:absolute;
top:0; left:0; bottom:0;
width:4px;
background:var(--primary);
}
.rl-stat--accent::before{ background:var(--accent); }
.rl-stat--gold::before{ background:var(--gold); }
.rl-stat:hover{
transform:translateY(-4px);
box-shadow:var(--shadow-hover);
border-color:rgba(var(--primary-rgb),.18);
}
.rl-stat-icon{
width:5.2rem; height:5.2rem;
display:inline-flex; align-items:center; justify-content:center;
background:var(--primary-mist);
color:var(--primary);
border-radius:var(--r-md);
font-size:2.2rem;
flex-shrink:0;
transition:all var(--t-spring);
}
.rl-stat--accent .rl-stat-icon{ background:rgba(var(--accent-rgb),.14); color:var(--accent); }
.rl-stat--gold .rl-stat-icon{ background:rgba(var(--gold-rgb),.22); color:var(--gold); }
.rl-stat:hover .rl-stat-icon{ transform:scale(1.08) rotate(-6deg); }
.rl-stat-info{ display:flex; flex-direction:column; min-width:0; }
.rl-stat-value{
font-family:var(--font-heading);
font-size:2.6rem; font-weight:800;
color:var(--text);
line-height:1;
letter-spacing:-.02em;
}
.rl-stat-label{
font-size:1.2rem; font-weight:600;
color:var(--text-muted);
text-transform:uppercase; letter-spacing:.08em;
margin-top:.4rem;
}
/* ---- Section card ---- */
.rl-section{
background:var(--white);
border:1px solid var(--border-light);
border-radius:var(--r-2xl);
box-shadow:var(--shadow-card);
overflow:hidden;
margin-bottom:2.4rem;
}
.rl-section-head{
display:flex; align-items:center; justify-content:space-between;
gap:1.4rem; flex-wrap:wrap;
padding:2rem 2.4rem;
border-bottom:1px solid var(--border-light);
background:var(--gray-50);
position:relative;
}
.rl-section-head::before{
content:'';
position:absolute;
top:0; left:0; bottom:0;
width:4px;
background:var(--primary);
}
.rl-section-title{
display:flex; align-items:center; gap:1.2rem;
font-family:var(--font-heading);
font-size:1.7rem; font-weight:800;
color:var(--text);
margin:0;
letter-spacing:-.01em;
}
.rl-section-title-icon{
width:3.6rem; height:3.6rem;
display:inline-flex; align-items:center; justify-content:center;
background:var(--primary-mist);
color:var(--primary);
border-radius:var(--r-sm);
font-size:1.55rem;
flex-shrink:0;
}
.rl-section-count{
display:inline-flex; align-items:center; gap:.5rem;
padding:.45rem 1.1rem;
background:var(--primary);
color:var(--white);
font-size:1.2rem; font-weight:700;
border-radius:var(--r-full);
letter-spacing:.04em;
text-transform:uppercase;
}
.rl-section-count i{ font-size:1.1rem; }
.rl-section-body{ padding:2rem 2.4rem 2.4rem; }
/* ---- Result cards grid ---- */
.rl-grid{
display:grid;
grid-template-columns:repeat(auto-fill, minmax(30rem, 1fr));
gap:1.6rem;
}
.rl-card{
position:relative;
display:flex; align-items:stretch;
background:var(--white);
border:1px solid var(--border-light);
border-radius:var(--r-lg);
overflow:hidden;
transition:all var(--t-base);
box-shadow:var(--shadow-sm);
}
.rl-card::before{
content:'';
position:absolute;
top:0; left:0; bottom:0;
width:5px;
background:var(--primary);
transition:width var(--t-base);
}
.rl-card--accent::before{ background:var(--accent); }
.rl-card--gold::before{ background:var(--gold); }
.rl-card--primary-light::before{ background:var(--primary-light); }
.rl-card:hover{
transform:translateY(-4px);
box-shadow:var(--shadow-hover);
border-color:rgba(var(--primary-rgb),.25);
}
.rl-card:hover::before{ width:8px; }
.rl-card-icon{
flex-shrink:0;
width:7.2rem;
display:flex; align-items:center; justify-content:center;
background:var(--primary-mist);
color:var(--primary);
font-size:2.4rem;
position:relative;
}
.rl-card--accent .rl-card-icon{ background:rgba(var(--accent-rgb),.10); color:var(--accent); }
.rl-card--gold .rl-card-icon{ background:rgba(var(--gold-rgb),.18); color:var(--gold); }
.rl-card--primary-light .rl-card-icon{ background:rgba(var(--primary-light-rgb),.12); color:var(--primary-light); }
.rl-card-icon::after{
content:'';
position:absolute;
right:-1px; top:0; bottom:0;
width:1px;
background:rgba(0,0,0,.06);
}
.rl-card-icon i{ transition:transform var(--t-spring); }
.rl-card:hover .rl-card-icon i{ transform:scale(1.15) rotate(-6deg); }
.rl-card-body{
flex:1 1 auto;
min-width:0;
padding:1.6rem 1.8rem;
display:flex; flex-direction:column;
justify-content:center;
gap:.4rem;
}
.rl-card-class{
display:inline-flex; align-items:center; gap:.6rem;
font-family:var(--font-heading);
font-size:1.6rem; font-weight:800;
color:var(--text);
margin:0;
line-height:1.25;
letter-spacing:-.01em;
}
.rl-card-class i{ color:var(--primary); font-size:1.4rem; }
.rl-card-term{
font-size:1.3rem;
color:var(--text-secondary);
font-weight:500;
display:flex; align-items:center; gap:.5rem;
flex-wrap:wrap;
}
.rl-card-term i{ color:var(--text-muted); font-size:1.2rem; }
.rl-card-session{
display:inline-flex; align-items:center; gap:.4rem;
padding:.2rem .8rem;
background:var(--gray-50);
border:1px solid var(--border-light);
border-radius:var(--r-full);
font-size:1.15rem; font-weight:700;
color:var(--text-secondary);
margin-top:.3rem;
width:max-content;
}
.rl-card-session i{ color:var(--accent); font-size:1.1rem; }
.rl-card-action{
display:flex; align-items:center; justify-content:center;
flex-shrink:0;
padding:0 1.6rem;
background:transparent;
color:var(--primary) !important;
font-family:var(--font-heading);
font-size:1.3rem; font-weight:700;
text-decoration:none !important;
border-left:1px solid var(--border-light);
transition:all var(--t-base);
gap:.5rem;
white-space:nowrap;
}
.rl-card-action i{ font-size:1.2rem; transition:transform var(--t-base); }
.rl-card:hover .rl-card-action{
background:var(--primary);
color:var(--white) !important;
}
.rl-card:hover .rl-card-action i{ transform:translateX(3px); }
/* ---- Empty state ---- */
.rl-empty{
text-align:center;
padding:4rem 2rem;
background:var(--gray-25);
border:2px dashed var(--border);
border-radius:var(--r-lg);
color:var(--text-secondary);
position:relative;
overflow:hidden;
}
.rl-empty::before{
content:'';
position:absolute;
top:-5rem; right:-5rem;
width:14rem; height:14rem;
border-radius:50%;
background:var(--primary-mist);
opacity:.5;
pointer-events:none;
}
.rl-empty-icon{
width:7rem; height:7rem;
display:inline-flex; align-items:center; justify-content:center;
background:var(--white);
color:var(--primary);
border-radius:50%;
font-size:2.8rem;
box-shadow:var(--shadow-sm);
margin-bottom:1.4rem;
position:relative; z-index:1;
border:2px solid var(--primary-mist);
}
.rl-empty h4{
font-family:var(--font-heading);
font-size:1.8rem; font-weight:700;
color:var(--text);
margin:0 0 .6rem;
position:relative; z-index:1;
}
.rl-empty p{
font-size:1.4rem;
color:var(--text-muted);
margin:0;
max-width:36rem;
margin-left:auto; margin-right:auto;
line-height:1.7;
position:relative; z-index:1;
}
/* ---- Card entry animation ---- */
@keyframes rlFadeIn{
from{ opacity:0; transform:translateY(12px); }
to{ opacity:1; transform:translateY(0); }
}
.rl-card, .rl-stat, .rl-section, .rl-profile{
animation:rlFadeIn .45s cubic-bezier(.4,0,.2,1) both;
}
.rl-card:nth-child(1){ animation-delay:.04s; }
.rl-card:nth-child(2){ animation-delay:.08s; }
.rl-card:nth-child(3){ animation-delay:.12s; }
.rl-card:nth-child(4){ animation-delay:.16s; }
.rl-card:nth-child(5){ animation-delay:.20s; }
.rl-card:nth-child(6){ animation-delay:.24s; }
.rl-card:nth-child(7){ animation-delay:.28s; }
.rl-card:nth-child(8){ animation-delay:.32s; }
/* ---- Responsive ---- */
@media (max-width: 768px){
.rl-profile{ padding:2.2rem 2rem; }
.rl-profile-inner{ gap:1.8rem; }
.rl-avatar-ring{ width:8.6rem; height:8.6rem; }
.rl-avatar-fallback{ font-size:2.8rem; }
.rl-grid{ grid-template-columns:1fr; }
.rl-card{ flex-wrap:wrap; }
.rl-card-icon{ width:5.6rem; }
.rl-card-action{
width:100%;
padding:1.2rem 1.4rem;
border-left:none;
border-top:1px solid var(--border-light);
background:var(--primary-mist);
}
.rl-section-body{ padding:1.6rem 1.6rem 2rem; }
.rl-section-head{ padding:1.6rem 1.8rem; }
}
/* =====================================================
Fix 13: AUTH PAGE v2 SYSTEM
admin.php and admin_school_settings_auth.php use a v2
naming scheme (auth-page-v2 / auth-card-v2 / btn-login-v2
/ form-control-v2 / pwd-toggle-v2 / forgot-link-v2 /
role-note-v2 / input-wrap / input-icon) that was never
defined in stylenew.css or template.css — both pages
therefore render as plain unstyled HTML. The .auth-page /
.auth-card base system is in template.css (lines 19741+);
this block layers the v2 "icon-in-input" + "role-note" +
"forgot-link" + "full-width brand button" patterns on top
using the same design tokens (--primary, --primary-dark,
--primary-mist, --border, --r-*, --shadow-*, --font-*).
Also includes the .--dev modifier used by the
developer-only School Settings gate (red security
palette using the same #b91c1c / #7f1d1d / #dc2626 /
#991b1b tokens already used by .adm-btn.danger).
===================================================== */
/* ---- Page canvas (matches the .auth-page gradient) ---- */
.auth-page-v2{
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
position: relative;
overflow: hidden;
}
.auth-page-v2::before{
content: ''; position: absolute; top: -10rem; right: -10rem;
width: 36rem; height: 36rem; border-radius: 50%;
background: rgba(255,255,255,.05); pointer-events: none;
}
.auth-page-v2::after{
content: ''; position: absolute; bottom: -12rem; left: -12rem;
width: 42rem; height: 42rem; border-radius: 50%;
background: rgba(255,255,255,.04); pointer-events: none;
}
/* ---- Card (white floating panel) ---- */
.auth-card-v2{
background: var(--white);
border-radius: var(--r-lg);
box-shadow: var(--shadow-2xl);
padding: 3rem;
max-width: 42rem;
width: 100%;
margin: 0 auto;
position: relative;
z-index: 1;
}
.auth-card-v2 h1{
font-family: var(--font-heading);
font-size: 2.2rem;
font-weight: 800;
color: var(--text);
margin: 0 0 .6rem;
letter-spacing: -.01em;
text-align: center;
}
.auth-card-v2 .auth-sub{
color: var(--text-secondary);
font-size: 1.4rem;
margin: 0 0 2rem;
text-align: center;
}
/* ---- Icon wrap (circular logo/icon above title) ---- */
.auth-icon-wrap{
width: 6rem; height: 6rem;
margin: 0 auto 1.6rem;
border-radius: 50%;
background: var(--primary-mist);
color: var(--primary);
display: flex; align-items: center; justify-content: center;
overflow: hidden;
border: 3px solid var(--white);
box-shadow: 0 6px 20px rgba(0,0,0,.18);
}
.auth-icon-wrap img{ width: 100%; height: 100%; object-fit: cover; }
.auth-icon-wrap i{ font-size: 2.6rem; line-height: 1; }
/* ---- Form row + labelled field ---- */
.form-row-v2{ margin-bottom: 1.6rem; }
.form-row-v2 label{
display: block;
font-weight: 600;
font-size: 1.3rem;
color: var(--text);
margin-bottom: .5rem;
letter-spacing: .01em;
}
/* ---- Input with floating icon ---- */
.input-wrap{ position: relative; }
.form-control-v2{
width: 100%;
padding: 1.2rem 1.6rem 1.2rem 4.4rem;
font-size: 1.5rem;
font-family: var(--font-body);
color: var(--text);
background: var(--white);
border: 2px solid var(--border);
border-radius: var(--r-sm);
transition: border-color var(--t-base), box-shadow var(--t-base);
outline: none;
line-height: 1.4;
}
.form-control-v2:focus{
border-color: var(--primary);
box-shadow: 0 0 0 4px var(--primary-glow);
}
.input-icon{
position: absolute;
left: 1.6rem;
top: 50%;
transform: translateY(-50%);
color: var(--text-muted);
font-size: 1.5rem;
pointer-events: none;
}
.pwd-wrap-v2 .form-control-v2{ padding-right: 4.4rem; }
.pwd-toggle-v2{
position: absolute;
right: 1.2rem;
top: 50%;
transform: translateY(-50%);
color: var(--text-muted);
font-size: 1.5rem;
cursor: pointer;
padding: .6rem;
border-radius: 50%;
transition: color var(--t-fast), background var(--t-fast);
}
.pwd-toggle-v2:hover{ color: var(--primary); background: var(--primary-mist); }
/* ---- Submit button (full-width brand) ---- */
.btn-login-v2{
display: inline-flex;
align-items: center;
justify-content: center;
gap: .6rem;
width: 100%;
padding: 1.3rem 2rem;
margin-top: .6rem;
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
color: var(--white) !important;
border: none;
border-radius: var(--r-sm);
font-family: var(--font-heading);
font-size: 1.5rem;
font-weight: 700;
cursor: pointer;
box-shadow: 0 6px 18px var(--primary-glow);
transition: all var(--t-base);
text-decoration: none !important;
}
.btn-login-v2:hover{
transform: translateY(-2px);
box-shadow: 0 10px 24px var(--primary-glow);
filter: brightness(1.05);
color: var(--white) !important;
}
.btn-login-v2:active{ transform: translateY(0); }
.btn-login-v2 i{ font-size: 1.4rem; }
/* ---- Forgot / back link (centred) ---- */
.forgot-link-v2{
text-align: center;
margin-top: 1.6rem;
}
.forgot-link-v2 a{
color: var(--primary);
font-size: 1.35rem;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: .5rem;
text-decoration: none !important;
transition: color var(--t-fast);
}
.forgot-link-v2 a:hover{ color: var(--primary-dark); }
/* ---- Info / role note (centred helper) ---- */
.role-note-v2{
display: flex;
align-items: flex-start;
gap: .9rem;
padding: 1.2rem 1.4rem;
margin-top: 1.6rem;
background: var(--primary-mist);
border: 1px solid rgba(var(--primary-rgb), .18);
border-left: 4px solid var(--primary);
border-radius: var(--r-sm);
color: var(--text-secondary);
font-size: 1.25rem;
line-height: 1.55;
}
.role-note-v2 i{
color: var(--primary);
font-size: 1.4rem;
flex-shrink: 0;
margin-top: .15rem;
}
.role-note-v2 strong{ color: var(--text); }
.role-note-v2 code{
background: rgba(0,0,0,.06);
padding: 0 .4rem;
border-radius: var(--r-xs);
font-size: 1.15rem;
}
/* ---- Responsive ---- */
@media (max-width: 480px){
.auth-card-v2{ padding: 2.2rem 1.6rem; }
.auth-card-v2 h1{ font-size: 1.9rem; }
.form-control-v2{ font-size: 1.4rem; padding: 1.1rem 1.4rem 1.1rem 4rem; }
}
/* ---- DEV GATE MODIFIER (red security theme) ----
Applied to the v2 auth card on the developer-only School
Settings gate. Re-skins card top border, icon, submit
button and info note in a clear "restricted area"
palette. Uses the same #b91c1c / #7f1d1d / #dc2626 /
#991b1b values already used by .adm-btn.danger so no
new design tokens are introduced. */
.auth-card-v2--dev{ border-top: 4px solid #b91c1c; }
.auth-icon-wrap--dev{
background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
color: #b91c1c;
border-color: #fecaca;
}
.btn-login-v2--dev{
background: linear-gradient(135deg, #b91c1c 0%, #7f1d1d 100%) !important;
box-shadow: 0 6px 18px rgba(185, 28, 28, .35) !important;
}
.btn-login-v2--dev:hover{
box-shadow: 0 10px 24px rgba(185, 28, 28, .45) !important;
filter: brightness(1.08);
}
.role-note-v2--dev{
background: #fef2f2;
border-color: #fecaca;
border-left-color: #b91c1c;
color: #7f1d1d;
}
.role-note-v2--dev i{ color: #b91c1c; }
.role-note-v2--dev strong{ color: #7f1d1d; }
.role-note-v2--dev code{ background: rgba(185, 28, 28, .08); color: #7f1d1d; }
/* =====================================================
Fix 20: Parent Fees — Google Material Fee Chips & Actions
parent_view_fees.php + parent_make_payment.php
Fee-structure "pill" restyled as a Google Material 3
filter-chip: white surface, #dadce0 border, subtle
elevation, circular icon avatar, single-emoji.
Action buttons also elevated to Google-style pill
buttons (blue filled, tonal, outlined) with proper
hover/press elevation, matching stylenew tokens.
===================================================== */
.g-fee-chip{
display:inline-flex;align-items:center;gap:.55rem;
background:#fff;border:1px solid #dadce0;
padding:.30rem .88rem .30rem .34rem;
border-radius:9999px;
box-shadow:0 1px 2px rgba(60,64,67,.30), 0 1px 3px 1px rgba(60,64,67,.15);
font-size:1.22rem;font-weight:500;color:#202124;letter-spacing:.01em;line-height:1;
max-width:100%;transition:box-shadow .18s,border-color .18s,background .18s,transform .18s;
}
.g-fee-chip:hover{box-shadow:0 2px 6px rgba(60,64,67,.30),0 1px 4px rgba(60,64,67,.15);border-color:#d2d4d7;background:#f8f9fa;transform:translateY(-1px);}
.g-fee-chip-icon{
width:2.7rem;height:2.7rem;border-radius:50%;
background:#e8f0fe;color:#1967d2;
display:inline-flex;align-items:center;justify-content:center;
font-size:1.38rem;flex-shrink:0;
}
.g-fee-chip-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:38rem;}
@media(max-width:560px){.g-fee-chip-text{max-width:20rem;}}
/* Google-style action buttons inside fee-card */
.fee-card .gbtn{
display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
padding:.72rem 1.35rem;border-radius:9999px;
font-family:var(--font-body);font-size:1.32rem;font-weight:600;
letter-spacing:.01em;line-height:1;white-space:nowrap;
border:1px solid transparent;cursor:pointer;
transition:box-shadow .18s,background .18s,border-color .18s,transform .18s,color .18s;
text-decoration:none !important;
}
.fee-card .gbtn:active{transform:translateY(0);}
.fee-card .gbtn-primary{
background:#1a73e8;color:#fff !important;border-color:#1a73e8;
box-shadow:0 1px 2px rgba(60,64,67,.30),0 1px 3px 1px rgba(60,64,67,.15);
}
.fee-card .gbtn-primary:hover{background:#1765cc;border-color:#1765cc;box-shadow:0 2px 6px rgba(60,64,67,.30),0 1px 4px rgba(60,64,67,.15);transform:translateY(-1px);color:#fff !important;}
.fee-card .gbtn-tonal{
background:#e8f0fe;color:#1967d2 !important;border-color:#e8f0fe;
box-shadow:0 1px 2px rgba(60,64,67,.12);
}
.fee-card .gbtn-tonal:hover{background:#d2e3fc;border-color:#d2e3fc;box-shadow:0 1px 3px rgba(60,64,67,.18);transform:translateY(-1px);}
.fee-card .gbtn-outline{
background:#fff;color:#202124 !important;border-color:#dadce0;
box-shadow:0 1px 2px rgba(60,64,67,.12);
}
.fee-card .gbtn-outline:hover{background:#f8f9fa;border-color:#d2d4d7;box-shadow:0 1px 3px rgba(60,64,67,.18);transform:translateY(-1px);}
.fee-card .gbtn-success{
background:#0d652d;color:#fff !important;border-color:#0d652d;
box-shadow:0 1px 2px rgba(60,64,67,.30),0 1px 3px 1px rgba(60,64,67,.10);
}
.fee-card .gbtn-success:hover{background:#0b5426;border-color:#0b5426;box-shadow:0 2px 6px rgba(60,64,67,.22);transform:translateY(-1px);}
.fee-card .gbtn-sm{padding:.52rem 1rem;font-size:1.22rem;}
.fee-card .gbtn .gbtn-ico{font-size:1.35rem;line-height:1;}
/* =====================================================
Fix 21: Yearbook Form � Sets / Toolbar / Tree styling
yearbook_form.php � collapsible set groupings
===================================================== */
.entries-toolbar{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:1rem 1.4rem;
padding:1.2rem 1.6rem;
background:var(--bg);
border:1px solid var(--border-light);
border-radius:var(--r-md);
margin-bottom:1.6rem;
}
.entries-toolbar-group{ display:flex; align-items:center; gap:.6rem; font-size:1.25rem; color:var(--text-secondary); font-weight:600; }
.entries-toolbar-group label{ text-transform:uppercase; letter-spacing:.05em; font-size:1.1rem; }
.entries-filter{
background:var(--white);
border:1px solid var(--border);
border-radius:var(--r-sm);
padding:.55rem .9rem;
font-size:1.25rem;
font-family:inherit;
color:var(--text);
min-width:13rem;
}
.entries-filter:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-mist); }
.btn-expand-all, .btn-collapse-all{
display:inline-flex; align-items:center; gap:.5rem;
background:var(--white); border:1px solid var(--border);
border-radius:var(--r-sm); padding:.6rem 1.1rem;
font-family:var(--font-heading); font-size:1.2rem; font-weight:700;
color:var(--text-secondary); cursor:pointer; transition:all var(--t-fast);
margin-left:auto;
}
.btn-expand-all:hover, .btn-collapse-all:hover{ background:var(--primary); color:var(--white); border-color:var(--primary); }
.btn-collapse-all{ margin-left:0; }
/* -- Set cards (collapsible groups) -- */
.entries-tree{ display:flex; flex-direction:column; gap:1.4rem; }
.set-card{
background:var(--white);
border:1px solid var(--border-light);
border-radius:var(--r-lg);
box-shadow:var(--shadow-sm);
overflow:hidden;
transition:box-shadow var(--t-base);
}
.set-card:hover{ box-shadow:var(--shadow-md); }
.set-head{
display:flex; align-items:center; justify-content:space-between;
width:100%; gap:1rem;
background:linear-gradient(135deg, color-mix(in srgb, var(--primary) 8%, var(--white)) 0%, var(--white) 100%);
border:none; border-bottom:1px solid var(--border-light);
padding:1.4rem 1.8rem;
cursor:pointer; text-align:left;
font-family:inherit;
transition:background var(--t-base);
}
.set-head:hover{ background:linear-gradient(135deg, var(--primary-mist) 0%, var(--white) 100%); }
.set-head.collapsed{ border-bottom-color:transparent; }
.set-caret{
display:inline-flex; align-items:center; justify-content:center;
width:2.4rem; height:2.4rem;
background:var(--white); border:1px solid var(--border-light);
border-radius:var(--r-sm); color:var(--primary);
transition:transform var(--t-base);
flex-shrink:0;
}
.set-head.collapsed .set-caret{ transform:rotate(-90deg); }
.set-title{
display:flex; align-items:center; gap:.8rem;
flex-wrap:wrap; flex:1;
font-family:var(--font-heading); font-size:1.5rem; font-weight:800; color:var(--text);
}
.set-pill{
display:inline-block; font-size:1rem; font-weight:800;
letter-spacing:.06em; text-transform:uppercase;
padding:.35rem .8rem; border-radius:var(--r-full); color:var(--white);
flex-shrink:0;
}
.set-pill-primary{ background:linear-gradient(135deg, #f59e0b, #d97706); }
.set-pill-secondary{ background:linear-gradient(135deg, var(--primary), var(--primary-dark)); }
.set-year{
font-size:1.4rem; color:var(--text); font-weight:800;
}
.set-dept{
font-size:1.3rem; color:var(--text-muted); font-weight:600;
}
.set-meta{
display:flex; align-items:center; gap:.8rem;
flex-shrink:0;
}
.set-count{
display:inline-flex; align-items:center; justify-content:center;
min-width:3rem; height:2.8rem; padding:0 .9rem;
background:var(--primary); color:var(--white);
border-radius:var(--r-full);
font-family:var(--font-heading); font-size:1.4rem; font-weight:900;
}
.set-count-lbl{ font-size:1.1rem; color:var(--text-secondary); font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
.set-book-btn{
display:inline-flex; align-items:center; gap:.5rem;
background:var(--white); border:1.5px solid var(--primary); color:var(--primary) !important;
padding:.6rem 1.1rem; border-radius:var(--r-sm);
font-family:var(--font-heading); font-size:1.15rem; font-weight:700;
text-decoration:none !important;
transition:all var(--t-fast);
margin-left:.4rem;
}
.set-book-btn:hover{ background:var(--primary); color:var(--white) !important; }
.set-body{
padding:1.6rem 1.8rem 1.8rem;
background:var(--bg);
}
/* -- Level badge on entry card -- */
.entry-level{
position:absolute; top:.8rem; left:.8rem;
font-family:var(--font-heading); font-size:1rem; font-weight:800;
letter-spacing:.06em; text-transform:uppercase;
padding:.35rem .8rem; border-radius:var(--r-full); color:var(--white);
box-shadow:0 2px 6px rgba(0,0,0,.18);
}
@media(max-width:768px){
.set-head{ flex-wrap:wrap; }
.set-meta{ width:100%; justify-content:space-between; padding-top:.6rem; border-top:1px dashed var(--border-light); }
.entries-toolbar{ padding:1rem; gap:.8rem; }
.btn-expand-all, .btn-collapse-all{ width:100%; justify-content:center; margin-left:0; }
}
/* ── Empty / error states ── */
.yb-empty-state{
text-align:center;
padding:4rem 2rem;
background:var(--bg);
border:2px dashed var(--border);
border-radius:var(--r-lg);
}
.yb-empty-state .yb-empty-icon{ font-size:5rem; margin-bottom:1rem; opacity:.7; }
.yb-empty-state h3{ font-family:var(--font-heading); font-size:1.8rem; font-weight:800; color:var(--text); margin:0 0 .6rem; }
.yb-empty-state p{ color:var(--text-muted); font-size:1.4rem; margin:0; max-width:46rem; margin-left:auto; margin-right:auto; }
.yb-empty-state a{ color:var(--primary); text-decoration:underline; font-weight:700; }
/* ── Year picker prompt (no ?class_year supplied) ── */
.yb-year-prompt{
min-height:50vh;
display:flex;
align-items:center;
justify-content:center;
padding:4rem 2rem;
}
.yb-year-prompt-card{
max-width:46rem;
background:var(--white);
border:1px solid var(--border-light);
border-radius:var(--r-2xl);
box-shadow:var(--shadow-card);
padding:4rem 3rem;
text-align:center;
}
.yb-year-prompt-icon{ font-size:5rem; margin-bottom:1.6rem; opacity:.8; }
.yb-year-prompt-card h2{
font-family:var(--font-heading);
font-size:2.4rem;
font-weight:800;
color:var(--text);
margin:0 0 1rem;
}
.yb-year-prompt-card p{
color:var(--text-secondary);
font-size:1.45rem;
line-height:1.7;
margin:0 0 2.4rem;
}
.yb-year-prompt-btn{
display:inline-flex;
align-items:center;
gap:.6rem;
background:var(--primary);
color:var(--white);
padding:1rem 2rem;
border-radius:var(--r-md);
font-family:var(--font-heading);
font-size:1.4rem;
font-weight:700;
text-decoration:none !important;
box-shadow:0 6px 18px rgba(var(--primary-rgb),.3);
transition:transform var(--t-fast), box-shadow var(--t-fast);
}
.yb-year-prompt-btn:hover{
transform:translateY(-2px);
box-shadow:0 10px 24px rgba(var(--primary-rgb),.4);
color:var(--white);
}
/* ── Set Type radio picker (beautiful cards) ── */
.yb-level-picker{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(24rem, 1fr));
gap:1.4rem;
margin-bottom:1rem;
}
.yb-level-picker--compact{ grid-template-columns:repeat(auto-fit, minmax(20rem, 1fr)); gap:1rem; }
.yb-level-radio{
position:relative;
cursor:pointer;
display:block;
}
.yb-level-radio input[type="radio"]{
position:absolute;
opacity:0;
inset:0;
cursor:pointer;
}
.yb-level-radio-inner{
display:flex;
align-items:center;
gap:1.4rem;
padding:1.8rem 1.6rem;
background:var(--white);
border:2px solid var(--border-light);
border-radius:var(--r-lg);
transition:all var(--t-base);
position:relative;
box-shadow:var(--shadow-sm);
}
.yb-level-radio:hover .yb-level-radio-inner{
border-color:var(--primary);
transform:translateY(-2px);
box-shadow:var(--shadow-md);
}
.yb-level-radio input[type="radio"]:checked + .yb-level-radio-inner{
border-color:var(--primary);
background:linear-gradient(135deg, var(--primary-mist) 0%, var(--white) 100%);
box-shadow:0 0 0 4px var(--primary-mist), var(--shadow-md);
}
.yb-level-radio-icon{
font-size:3rem;
flex-shrink:0;
width:5rem;
height:5rem;
display:inline-flex;
align-items:center;
justify-content:center;
background:var(--primary-mist);
border-radius:var(--r-md);
}
.yb-level-radio--primary .yb-level-radio-icon{ background:linear-gradient(135deg, #fef3c7, #fde68a); }
.yb-level-radio--secondary .yb-level-radio-icon{ background:linear-gradient(135deg, var(--primary-mist), color-mix(in srgb, var(--primary) 8%, var(--white))); }
.yb-level-radio-meta{ flex:1 1 auto; min-width:0; }
.yb-level-radio-title{
font-family:var(--font-heading);
font-size:1.6rem;
font-weight:800;
color:var(--text);
line-height:1.2;
}
.yb-level-radio-sub{
font-size:1.2rem;
color:var(--text-muted);
margin-top:.3rem;
line-height:1.4;
}
.yb-level-radio-check{
width:2.6rem;
height:2.6rem;
border-radius:50%;
background:var(--primary-mist);
border:2px solid var(--border-light);
color:var(--primary);
display:inline-flex;
align-items:center;
justify-content:center;
font-size:1.3rem;
transition:all var(--t-fast);
flex-shrink:0;
}
.yb-level-radio input[type="radio"]:checked ~ .yb-level-radio-check,
.yb-level-radio input[type="radio"]:checked + .yb-level-radio-inner .yb-level-radio-check{
background:var(--primary);
border-color:var(--primary);
color:var(--white);
}
/* ── Locked single-level badge (when school has only primary OR only secondary) ── */
.yb-level-locked{
display:flex;
align-items:center;
gap:1.4rem;
padding:1.4rem 1.6rem;
background:linear-gradient(135deg, var(--bg) 0%, var(--white) 100%);
border:1.5px dashed var(--border);
border-radius:var(--r-md);
flex-wrap:wrap;
}
.yb-level-locked--compact{ padding:.8rem 1.2rem; }
.yb-level-locked-pill{
display:inline-flex;
align-items:center;
gap:.5rem;
padding:.6rem 1.2rem;
border-radius:var(--r-full);
font-family:var(--font-heading);
font-size:1.3rem;
font-weight:800;
letter-spacing:.04em;
color:var(--white);
}
.yb-level-locked-pill--primary{ background:linear-gradient(135deg, #f59e0b, #d97706); }
.yb-level-locked-pill--secondary{ background:linear-gradient(135deg, var(--primary), var(--primary-dark)); }
.yb-level-locked-note{ font-size:1.25rem; color:var(--text-secondary); }
@media(max-width:600px){
.yb-level-picker{ grid-template-columns:1fr; }
.yb-level-locked{ flex-direction:column; align-items:flex-start; }
.yb-year-prompt-card{ padding:2.4rem 1.6rem; }
}
/* ───────────────────────────────────────────────────────────────────────
YEARBOOK VIEWER MODE (.yb-viewer-student vs .yb-viewer-admin)
Students who arrive from portal.php must never see the floating
"Switch Template" or cover-design switcher panels, but the server-saved
design is still applied by the JS scripts. Admins see everything.
─────────────────────────────────────────────────────────────────────── */
body.yb-viewer-student #ybs-toggle-btn,
body.yb-viewer-student #yb-template-switcher,
body.yb-viewer-student .ybs-toast,
body.yb-viewer-student #ybc-toggle-btn,
body.yb-viewer-student #ybc-panel,
body.yb-viewer-student .ybc-toast{ display:none !important; }
/* =====================================================
Fix 22: ALUMNI GIVING PLATFORM � ag-* framework
alumni_portal.php, admin_alumni_giving.php,
alumni_signup.php, alumni_login.php
Uses theme tokens (var(--primary), var(--border-light) etc.)
so the platform automatically follows School Settings theme.
No inline