/* ============================================================
   BISA GOLD PRIVATE SCHOOLS — report-card.css
   Exact digital replica of the two paper report card templates
   (Normal: Basic 1–SS3, Preschool: Creche–Nursery2). Shared by
   staff.php's report card builder (teachers fill this in directly,
   in place, so what they're building IS what gets printed) and
   view_report.php's viewer (students/parents see the identical
   layout, and it's what gets exported to PDF).

   Structure/text transcribed directly from the two report card
   images provided — table columns, header order, section labels,
   grading key values, footer wording, signature lines. Colors are
   a careful visual match within Bisagold's established purple/
   pink/gold brand palette (exact print hex values aren't
   extractable from a photo, so these are the closest faithful
   match, not invented from scratch).
   ============================================================ */

:root {
    --rc-navy: #1e1147;
    --rc-purple: #3d1a78;
    --rc-purple-mid: #5b2a9e;
    --rc-pink: #e91e63;
    --rc-pink-deep: #c2185b;
    --rc-gold: #eaa221;
    --rc-pink-tint: #fbe4ec;
    --rc-pink-pale: #fdf1f5;
    --rc-border: #e7d9ec;
}

.rc-doc {
    background: #fff;
    max-width: 900px;
    margin: 0 auto;
    border-radius: 26px;
    padding: 26px 28px 20px;
    position: relative;
    border: 2px solid var(--rc-pink);
    box-shadow: 0 18px 50px rgba(30, 17, 71, .18);
    font-family: 'Segoe UI', Arial, sans-serif;
    color: var(--rc-navy);
    overflow: hidden;
}
.rc-doc::before, .rc-doc::after {
    content: '';
    position: absolute;
    width: 130px; height: 130px;
    border-radius: 50%;
    z-index: 0;
    opacity: .5;
}
.rc-doc::before { top: -70px; left: -70px; background: radial-gradient(circle, var(--rc-pink) 0%, transparent 70%); }
.rc-doc::after { bottom: -70px; right: -70px; background: radial-gradient(circle, var(--rc-gold) 0%, transparent 70%); }
.rc-doc > * { position: relative; z-index: 1; }

/* ==================== HEADER ==================== */
.rc-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.rc-brand { display: flex; align-items: center; gap: 14px; }
.rc-brand img { width: 76px; height: 76px; object-fit: contain; flex-shrink: 0; }
.rc-brand-text .rc-name-1 { font-size: 26px; font-weight: 900; color: var(--rc-purple); line-height: 1.05; letter-spacing: .5px; }
.rc-brand-text .rc-name-2 { font-size: 20px; font-weight: 900; color: var(--rc-pink); line-height: 1.1; letter-spacing: .5px; }
.rc-brand-text .rc-motto { font-size: 11.5px; font-style: italic; color: var(--rc-gold); font-weight: 700; margin-top: 3px; letter-spacing: .3px; }
.rc-brand-text .rc-address { font-size: 10.5px; color: #6b5b8a; margin-top: 4px; display: flex; align-items: center; gap: 5px; }

/* Preschool-style top fields (session/term/class/arm, no box) */
.rc-top-fields-plain { text-align: right; font-size: 11.5px; color: var(--rc-navy); font-weight: 600; line-height: 1.9; min-width: 190px; }
.rc-top-fields-plain span { border-bottom: 1px solid #c9bfe0; padding-bottom: 1px; display: inline-block; min-width: 90px; }

/* Normal-style top box (student name/admission/class/section/session/term + photo) */
.rc-info-box {
    border: 1.5px solid var(--rc-border);
    border-radius: 16px;
    padding: 14px 18px;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    min-width: 260px;
}
.rc-info-box .rc-info-lines { font-size: 11.5px; font-weight: 600; line-height: 2.1; }
.rc-info-box .rc-info-lines span { border-bottom: 1px solid #c9bfe0; padding-bottom: 1px; display: inline-block; min-width: 110px; font-weight: 400; }
.rc-photo-box {
    width: 66px; height: 78px; border: 1.5px dashed #b9acd4; border-radius: 8px;
    display: flex; align-items: center; justify-content: center; text-align: center;
    font-size: 8.5px; color: #a89bc4; flex-shrink: 0; overflow: hidden; background: #faf8fc;
}
.rc-photo-box img { width: 100%; height: 100%; object-fit: cover; }

/* Preschool pupil-info bar (name/admission/dob/house | class teacher/term dates | photo) */
.rc-pupil-bar {
    border: 1.5px solid var(--rc-border);
    border-radius: 16px;
    padding: 14px 18px;
    display: flex;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.rc-pupil-bar .rc-pupil-col { font-size: 11.5px; font-weight: 700; line-height: 2.1; flex: 1; min-width: 200px; }
.rc-pupil-bar .rc-pupil-col span { border-bottom: 1px solid #c9bfe0; padding-bottom: 1px; display: inline-block; min-width: 110px; font-weight: 400; }

/* ==================== SECTION HEADER BARS ==================== */
.rc-bar {
    background: linear-gradient(135deg, var(--rc-purple), var(--rc-navy));
    color: #fff;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 9px 16px;
    border-radius: 10px 10px 0 0;
    display: flex;
    align-items: center;
    gap: 9px;
}
.rc-bar.rc-bar-pink { background: linear-gradient(135deg, var(--rc-pink), var(--rc-pink-deep)); }
.rc-bar.rc-bar-gold { background: linear-gradient(135deg, var(--rc-gold), #c97f0f); }
.rc-bar i { font-size: 12px; background: rgba(255,255,255,.2); width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* ==================== LAYOUT GRID ==================== */
/* minmax(0, ...) instead of bare fr units: without this, each grid
   track's implicit minimum size is its content's min-content width, so
   a wide subjects table inside .rc-col can never actually shrink the
   track — it just overflows .rc-grid, which then gets silently clipped
   by .rc-doc's overflow:hidden instead of scrolling. minmax(0, Nfr)
   removes that implicit floor and lets the track shrink to the
   container's real available width. */
.rc-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 16px; margin-bottom: 16px; align-items: start; }
/* min-width: 0 overrides the same min-width:auto default on the GRID
   ITEM itself (not just the track) — grid items, like flex items,
   refuse to shrink below their content's intrinsic width unless told
   otherwise. Without this, .rc-table-wrap.rc-scroll-x's overflow-x:auto
   never gets the chance to engage, because .rc-col never lets the
   table's 640px min-width become a horizontal-scroll problem — it just
   pushes .rc-grid wider instead. */
.rc-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

/* ==================== TABLES ==================== */
.rc-table-wrap { border: 1.5px solid var(--rc-border); border-top: none; border-radius: 0 0 10px 10px; overflow: hidden; }
.rc-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.rc-table th {
    background: var(--rc-pink-tint); color: var(--rc-pink-deep); font-weight: 800;
    font-size: 9.5px; text-transform: uppercase; letter-spacing: .02em; padding: 7px 6px; text-align: center; white-space: nowrap;
}
.rc-table th:first-child, .rc-table td:first-child { text-align: left; padding-left: 10px; }
.rc-table td { padding: 7px 6px; text-align: center; border-top: 1px solid #f3ecf7; }
.rc-table tr:nth-child(even) td { background: #fdfaff; }
.rc-table .rc-total-row td { background: var(--rc-pink-tint) !important; font-weight: 800; }
.rc-table .rc-avg-row td { background: var(--rc-pink-pale) !important; font-weight: 800; }
.rc-table input {
    width: 100%; border: none; background: transparent; text-align: center; font-size: 11px;
    font-family: inherit; color: var(--rc-navy); padding: 2px; border-radius: 4px;
}
.rc-table input:focus { outline: 1.5px solid var(--rc-pink); background: #fff; }
.rc-table input.rc-name-input { text-align: left; }

/* Assessment key (normal) */
.rc-key-table td:first-child { font-weight: 900; font-size: 12px; }
.rc-key-table tr.key-a1 td { background: #dcf5d2 !important; }
.rc-key-table tr.key-b2 td { background: #eaf7dc !important; }
.rc-key-table tr.key-b3 td { background: #f7f3d2 !important; }
.rc-key-table tr.key-c4 td { background: #fdecc8 !important; }
.rc-key-table tr.key-c5 td { background: #fbdcc0 !important; }
.rc-key-table tr.key-f9 td { background: #fbd4d4 !important; }

/* Preschool grading key (5 boxes in a row) */
.rc-grading-key-row { display: grid; grid-template-columns: repeat(5, 1fr); border: 1.5px solid var(--rc-border); border-top: none; border-radius: 0 0 10px 10px; overflow: hidden; }
.rc-grading-key-row > div { text-align: center; padding: 10px 4px; border-left: 1px solid var(--rc-border); }
.rc-grading-key-row > div:first-child { border-left: none; }
.rc-grading-key-row .gk-letter { font-size: 20px; font-weight: 900; }
.rc-grading-key-row .gk-range { font-size: 10px; color: #6b5b8a; margin: 2px 0; }
.rc-grading-key-row .gk-label { font-size: 9px; font-weight: 700; letter-spacing: .03em; }
.rc-grading-key-row .gk-a .gk-letter, .rc-grading-key-row .gk-a .gk-label { color: #c0392b; }
.rc-grading-key-row .gk-b .gk-letter, .rc-grading-key-row .gk-b .gk-label { color: var(--rc-purple); }
.rc-grading-key-row .gk-c .gk-letter, .rc-grading-key-row .gk-c .gk-label { color: #2b8a3e; }
.rc-grading-key-row .gk-d .gk-letter, .rc-grading-key-row .gk-d .gk-label { color: #b8860b; }
.rc-grading-key-row .gk-e .gk-letter, .rc-grading-key-row .gk-e .gk-label { color: #6b5b8a; }

/* Stars (normal psychomotor/affective) */
.rc-stars { display: inline-flex; gap: 2px; cursor: pointer; }
.rc-stars i { color: var(--rc-pink); font-size: 13px; }
.rc-stars i.far { color: #e8c7d4; }

/* Letter grid (preschool psychomotor/affective — A B C D E radio-style cells) */
.rc-letter-grid-table th.rc-letter-col { width: 30px; }
.rc-letter-grid-table td.rc-letter-cell { cursor: pointer; font-size: 11px; color: #c9bfe0; }
.rc-letter-grid-table td.rc-letter-cell.selected { color: #fff; }
.rc-letter-grid-table td.rc-letter-cell.selected .rc-letter-dot { background: var(--rc-purple); color: #fff; border-color: var(--rc-purple); }
.rc-letter-dot {
    width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid #d8cce8; display: inline-flex;
    align-items: center; justify-content: center; font-size: 9.5px; font-weight: 800; color: #b9acd4;
}
.rc-key-note { font-size: 9px; color: var(--rc-pink-deep); padding: 8px 12px; background: var(--rc-pink-pale); border-radius: 0 0 10px 10px; border: 1.5px solid var(--rc-border); border-top: none; }

/* ==================== COMMENT / RESULT BOXES ==================== */
.rc-box-row { display: grid; gap: 14px; margin-bottom: 14px; }
.rc-box-row.rc-two { grid-template-columns: 1fr 1fr; }
.rc-box-row.rc-comment-result { grid-template-columns: 1.3fr 1fr; }
.rc-comment-box { border: 1.5px solid var(--rc-border); border-radius: 0 0 10px 10px; border-top: none; padding: 10px 14px; min-height: 66px; }
.rc-comment-box textarea, .rc-comment-box .rc-comment-line {
    width: 100%; border: none; background: transparent; font-size: 11px; font-family: inherit; color: var(--rc-navy);
    resize: none; min-height: 50px;
}
.rc-comment-box textarea:focus { outline: none; }

.rc-result-box { border: 1.5px solid var(--rc-border); border-radius: 0 0 10px 10px; border-top: none; padding: 12px 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
.rc-result-item { font-size: 10.5px; color: #6b5b8a; font-weight: 700; }
.rc-result-item input { width: 60px; border: none; border-bottom: 1.5px solid #c9bfe0; text-align: center; font-size: 12px; font-weight: 800; color: var(--rc-navy); background: transparent; font-family: inherit; }
.rc-result-item.rc-overall-grade-box input { width: 34px; height: 24px; border: 1.5px solid var(--rc-purple); border-radius: 6px; }

/* ==================== ATTENDANCE (preschool) ==================== */
.rc-attendance-box { border: 1.5px solid var(--rc-border); border-radius: 0 0 10px 10px; border-top: none; padding: 10px 14px; font-size: 10.5px; }
.rc-attendance-box .rc-att-row { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; border-bottom: 1px dashed #e7d9ec; }
.rc-attendance-box .rc-att-row:last-child { border-bottom: none; }
.rc-attendance-box input { width: 50px; border: none; border-bottom: 1.5px solid #c9bfe0; text-align: center; font-weight: 800; background: transparent; font-family: inherit; }

/* ==================== OVERALL REMARK CHECKBOXES (preschool) ==================== */
.rc-remark-box { border: 1.5px solid var(--rc-border); border-radius: 0 0 10px 10px; border-top: none; padding: 12px 14px; display: flex; flex-direction: column; gap: 7px; }
.rc-remark-check { display: flex; align-items: center; gap: 8px; font-size: 11px; cursor: pointer; }
.rc-remark-check .rc-checkbox { width: 15px; height: 15px; border: 1.5px solid var(--rc-purple); border-radius: 3px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; }
.rc-remark-check.selected .rc-checkbox { background: var(--rc-purple); color: #fff; }
.rc-remark-check.selected .rc-checkbox::after { content: '✓'; font-size: 10px; }

/* ==================== SIGNATURES ==================== */
.rc-sig-row { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1.5px solid var(--rc-border); padding-top: 14px; margin-top: 6px; gap: 10px; }
.rc-sig-item { font-size: 10.5px; color: #6b5b8a; display: flex; align-items: flex-start; gap: 8px; padding: 0 10px; border-left: 1px solid var(--rc-border); }
.rc-sig-item:first-child { border-left: none; padding-left: 0; }
.rc-sig-item i { color: var(--rc-purple); font-size: 13px; margin-top: 1px; }
.rc-sig-item b { display: block; font-weight: 700; color: var(--rc-navy); margin-bottom: 2px; }
.rc-sig-item .rc-sig-line { border-bottom: 1px solid #c9bfe0; display: inline-block; min-width: 80px; }

/* Preschool signature block also includes stamp circle + quote */
.rc-sig-extra { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; gap: 14px; flex-wrap: wrap; }
.rc-stamp-circle {
    width: 78px; height: 78px; border-radius: 50%; border: 1.5px dashed #b9acd4; display: flex; align-items: center;
    justify-content: center; text-align: center; font-size: 8px; color: #a89bc4; flex-shrink: 0; line-height: 1.3;
}
.rc-quote-box { flex: 1; background: var(--rc-pink-pale); border-radius: 12px; padding: 10px 16px; font-size: 10.5px; color: var(--rc-pink-deep); font-style: italic; position: relative; min-width: 200px; }

/* ==================== FOOTER ==================== */
.rc-footer-bar { background: linear-gradient(135deg, var(--rc-navy), var(--rc-purple)); color: #fff; border-radius: 14px; padding: 10px 18px; display: flex; justify-content: space-between; align-items: center; margin-top: 16px; font-size: 10px; flex-wrap: wrap; gap: 8px; }
.rc-footer-bar .rc-footer-addr { display: flex; align-items: center; gap: 6px; color: #f3d9e4; }
.rc-footer-bar .rc-footer-values { display: flex; gap: 14px; color: var(--rc-gold); font-weight: 800; letter-spacing: .03em; }
.rc-footer-bar .rc-footer-values span { display: flex; align-items: center; gap: 5px; }

/* Preschool footer sits on white background, not a dark bar */
.rc-footer-plain { display: flex; justify-content: center; gap: 22px; margin-top: 16px; padding-top: 12px; border-top: 1.5px solid var(--rc-border); flex-wrap: wrap; }
.rc-footer-plain span { display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 800; color: var(--rc-purple); letter-spacing: .02em; }
.rc-footer-plain i { color: var(--rc-pink); }

/* ==================== BUILDER-ONLY CONTROLS (staff.php report builder) ====================
   These never appear on view_report.php's read-only render — only staff.php loads
   them, since only the builder has add/remove-subject affordances. */
.rc-row-remove { background: none; border: none; color: var(--rc-pink-deep); cursor: pointer; font-size: 11px; padding: 4px; opacity: .6; }
.rc-row-remove:hover { opacity: 1; }
.rc-add-row-btn {
    display: flex; align-items: center; gap: 6px; margin-top: 8px; padding: 8px 14px;
    background: var(--rc-pink-pale); color: var(--rc-pink-deep); border: 1.5px dashed var(--rc-pink);
    border-radius: 9px; font-size: 11px; font-weight: 700; cursor: pointer; font-family: inherit;
}
.rc-add-row-btn:hover { background: var(--rc-pink-tint); }
.rc-builder-hint { font-size: 10px; color: #6b5b8a; padding: 6px 2px 0; font-style: italic; }
.rc-stars.rc-stars-input i { cursor: pointer; }
.rc-letter-grid-table td.rc-letter-cell { padding: 4px; }
.rc-letter-grid-table .rc-letter-dot { cursor: pointer; transition: transform .1s; }
.rc-letter-grid-table .rc-letter-dot:hover { transform: scale(1.12); }

/* ==================== BUILDER MOBILE FIX (staff.php) ====================
   On the read-only viewer (view_report.php) shrinking the whole table to fit
   is fine — nobody's typing into it. But teachers TYPING scores into CA1/
   CA2/CA3/Exam need a comfortably-sized, tappable input, so for the builder
   we let just the academic-performance table scroll horizontally at full
   size instead of shrinking text down to 9px. Applied via .rc-scroll-x,
   added only on the two subject tables in staff.php — never on view_report.php,
   which keeps its existing shrink-to-fit behaviour untouched. */
.rc-table-wrap.rc-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.rc-table-wrap.rc-scroll-x .rc-table { min-width: 640px; font-size: 12.5px; }
.rc-table-wrap.rc-scroll-x .rc-table th { font-size: 10px; padding: 8px 7px; }
.rc-table-wrap.rc-scroll-x .rc-table td { padding: 8px 7px; }
.rc-table-wrap.rc-scroll-x .rc-table input { font-size: 13px; min-width: 34px; padding: 5px 3px; }
.rc-scroll-hint { display: none; font-size: 10.5px; color: var(--rc-pink-deep); margin: 0 0 6px; align-items: center; gap: 6px; }
.rc-scroll-hint i { font-size: 11px; }

/* Suggest landscape only where it actually helps: narrow + portrait phones,
   only inside the builder (.rc-landscape-hint is only ever placed in
   staff.php's markup). Auto-hides itself the moment the phone is rotated,
   via the orientation media query below — no JS/orientation-lock needed,
   and nothing is forced, since true forced rotation is unreliable across
   mobile browsers and can break the page chrome. Rotating is the person's
   choice; this just tells them it will help. */
.rc-landscape-hint {
    display: none; align-items: center; gap: 8px; background: var(--rc-pink-pale);
    color: var(--rc-pink-deep); border: 1.5px solid var(--rc-pink); border-radius: 10px;
    padding: 9px 14px; font-size: 11.5px; font-weight: 600; margin-bottom: 14px;
}
.rc-landscape-hint i { font-size: 15px; }

@media (max-width: 620px) {
    .rc-scroll-hint { display: flex; }
    .rc-table-wrap:not(.rc-scroll-x) .rc-table { font-size: 9px; }
}
@media (max-width: 620px) and (orientation: portrait) {
    .rc-landscape-hint { display: flex; }
}
@media (orientation: landscape) {
    .rc-landscape-hint { display: none !important; }
}

/* ==================== RESPONSIVE — mobile: NEVER horizontal-scroll the whole card ==================== */
@media (max-width: 820px) {
    .rc-grid { grid-template-columns: 1fr; }
    .rc-box-row.rc-two, .rc-box-row.rc-comment-result { grid-template-columns: 1fr; }
    .rc-sig-row { grid-template-columns: 1fr; }
    .rc-sig-item { border-left: none; border-top: 1px solid var(--rc-border); padding: 10px 0 0; }
    .rc-sig-item:first-child { border-top: none; }
}
@media (max-width: 620px) {
    .rc-doc { padding: 18px 14px 14px; border-radius: 18px; }
    .rc-brand img { width: 54px; height: 54px; }
    .rc-brand-text .rc-name-1 { font-size: 19px; }
    .rc-brand-text .rc-name-2 { font-size: 15px; }
    .rc-top { flex-direction: column; }
    .rc-info-box, .rc-pupil-bar { flex-direction: column; align-items: flex-start; }
    .rc-photo-box { align-self: center; }
    /* Table itself scales DOWN rather than causing the page to scroll —
       this is what keeps mobile from ever needing horizontal swiping. */
    .rc-table { font-size: 9px; }
    .rc-table th { font-size: 7.5px; padding: 5px 3px; }
    .rc-table td { padding: 5px 3px; }
    .rc-grading-key-row .gk-letter { font-size: 15px; }
    .rc-grading-key-row .gk-range, .rc-grading-key-row .gk-label { font-size: 7.5px; }
    .rc-footer-bar, .rc-footer-plain { justify-content: center; text-align: center; }
}