/* ---------- Modal (fits any viewport) ---------- */
.modal-backdrop{ position:fixed; inset:0; background:rgba(11,46,91,.45); display:flex; align-items:flex-start; justify-content:center; padding:12px; z-index:200; overflow-y:auto; }
.modal{ background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--r-lg); width:100%; max-width:calc(100vw - 24px); box-shadow:var(--shadow-pop); animation:mIn .18s ease; margin:auto; }
@keyframes mIn{ from{ transform:translateY(14px); opacity:0; } to{ transform:none; opacity:1; } }
.modal-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 14px; border-bottom:1px solid var(--line); }
.modal-head h3{ font-size:15px; min-width:0; overflow-wrap:anywhere; }
.modal-x{ font-size:20px; line-height:1; padding:4px 10px; min-height:36px; flex:none; }
.modal-body{ padding:14px; max-height:calc(100dvh - 170px); overflow-y:auto; -webkit-overflow-scrolling:touch; }
.modal-foot{ display:flex; justify-content:flex-end; gap:10px; padding:12px 14px; border-top:1px solid var(--line); flex-wrap:wrap; }
.modal-foot .btn{ flex:1 1 auto; }
@media (min-width: 640px){
  .modal-backdrop{ padding:40px 16px; }
  .modal-head{ padding:14px 20px; }
  .modal-body{ padding:20px; max-height:70vh; }
  .modal-foot{ padding:14px 20px; }
  .modal-foot .btn{ flex:0 0 auto; }
}

/* ---------- Toast ---------- */
.toast-wrap{ position:fixed; bottom:16px; left:12px; right:12px; z-index:400; display:flex; flex-direction:column; gap:8px; align-items:center; }
.toast{ background:var(--blue-800); color:#fff; padding:12px 16px; border-radius:var(--r-md); font-size:13px; box-shadow:var(--shadow-pop); max-width:420px; width:100%; animation:mIn .2s ease; border-left:3px solid var(--blue-300); }
.toast.warn{ background:var(--warn-solid); border-left-color:#FFE3BB; }
.toast.bad{ background:var(--bad-solid); border-left-color:#FFD6D0; }
.toast.out{ opacity:0; transition:.3s; }
@media (min-width: 640px){
  .toast-wrap{ left:auto; right:20px; bottom:20px; align-items:flex-end; }
  .toast{ width:auto; max-width:340px; }
}

/* ---------- Upload ---------- */
.upload-preview{ margin-top:8px; display:flex; flex-wrap:wrap; gap:8px; }
.photo-thumb{ position:relative; }
.photo-thumb img{ width:72px; height:72px; border-radius:var(--r-md); object-fit:cover; border:1px solid var(--line-strong); }
.photo-thumb button, .doc-chip button{ position:absolute; top:-6px; right:-6px; width:24px; height:24px; border-radius:50%; border:none; background:var(--bad-solid); color:#fff; font-size:13px; cursor:pointer; line-height:1; }
.photo-empty{ font-size:11.5px; color:var(--ink-faint); border:1px dashed var(--line-strong); border-radius:var(--r-md); padding:14px 16px; }
.doc-chip{ position:relative; display:inline-flex; align-items:center; gap:6px; background:var(--surface-raised); border:1px solid var(--line-strong); border-radius:20px; padding:6px 14px; font-size:12px; margin-right:6px; margin-top:6px; }
.upload-btn{ margin-top:6px; min-height:40px; }

/* ---------- Month grid (fee collection) ---------- */
.month-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:8px; margin:12px 0; }
.month-cell{ border:2px solid var(--bad-line); background:var(--bad-bg); color:var(--bad-text); border-radius:var(--r-md); padding:10px 8px; text-align:center; cursor:pointer; user-select:none; transition:.12s; }
.month-cell .m-name{ font-weight:700; font-size:12.5px; }
.month-cell .m-amt{ font-size:11.5px; opacity:.85; }
.month-cell .m-state{ font-size:9.5px; letter-spacing:.6px; margin-top:3px; font-weight:700; }
.month-cell.paid{ border-color:var(--ok-line); background:var(--ok-bg); color:var(--ok-text); cursor:default; }
.month-cell.selected{ border-color:var(--blue-600); background:var(--blue-600); color:#fff; box-shadow:var(--focus-ring); }
.month-cell:not(.paid):hover{ transform:translateY(-1px); }

/* ---------- Payment method pills ---------- */
.pay-methods{ display:flex; flex-wrap:wrap; gap:8px; margin:10px 0; }
.pay-method{ border:1.5px solid var(--line-strong); background:var(--surface-raised); color:var(--ink-soft); border-radius:20px; padding:9px 16px; font-size:12.5px; font-weight:600; cursor:pointer; transition:.12s; min-height:40px; }
.pay-method.active{ border-color:var(--blue-600); background:var(--blue-600); color:#fff; box-shadow:var(--focus-ring); }

/* ---------- First-time fee collection (new student) ---------- */
.ft-wrap .detail-photo-row{ margin-bottom:12px; }
.ft-name{ font-size:17px; font-weight:700; }
.ft-flag{ margin-left:auto; flex:none; }
.ft-table{ min-width:420px; }
.ft-table td, .ft-table th{ padding:8px 10px; }
.ft-check{ width:38px; text-align:center; }
.ft-check input[type="checkbox"]{ width:20px; height:20px; accent-color:var(--blue-600); cursor:pointer; margin:0; }
.ft-in{ width:88px; padding:7px 8px; border:1px solid var(--line-strong); border-radius:var(--r-sm); background:var(--surface-raised); color:var(--ink); text-align:right; font-size:13px; }
.ft-in:focus{ border-color:var(--blue-500); box-shadow:var(--focus-ring); outline:none; }
.ft-row.off{ opacity:.45; }
.ft-row.off td:nth-child(2){ text-decoration:line-through; }
.ft-extra{ display:grid; grid-template-columns:1fr; gap:var(--sp-3); margin-top:var(--sp-3); }
.ft-totals{ margin-top:var(--sp-4); padding-top:var(--sp-3); border-top:1px solid var(--line); max-width:360px; margin-left:auto; }
@media (min-width: 640px){
  .ft-extra{ grid-template-columns:1fr 1fr; }
  .ft-extra .full{ grid-column:1 / -1; }
}

/* ---------- POS receipt (screen) ---------- */
.pos-receipt{ width:100%; max-width:310px; margin:0 auto; background:#fff; color:#111; padding:16px 14px; font-family:'Courier New',monospace; font-size:12px; border:1px dashed #bbb; border-radius:6px; }
.pos-receipt.a4-embedded{ border:none; width:100%; max-width:340px; }
.rc-head{ text-align:center; }
.rc-logo{ width:46px; height:46px; margin:0 auto 6px; border-radius:50%; background:var(--blue-800); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:16px; font-family:var(--font-sans); }
.rc-logo-img{ width:46px; height:46px; border-radius:50%; object-fit:cover; margin:0 auto 6px; display:block; }
.rc-head h4{ font-size:15px; text-align:center; margin-bottom:2px; }
.rc-sub{ text-align:center; font-size:10.5px; color:#444; }
.rc-sep{ border-top:1px dashed #999; margin:8px 0; }
.rc-meta{ display:flex; justify-content:space-between; gap:8px; font-size:11px; padding:1px 0; flex-wrap:wrap; }
.rc-table{ width:100%; border-collapse:collapse; font-size:11px; }
.rc-table th{ text-align:left; border-bottom:1px solid #999; padding:3px 2px; font-size:10.5px; background:transparent; }
.rc-table td{ padding:3px 2px; border-bottom:1px dotted #ccc; }
.rc-num{ text-align:right; }
.rc-student-row td{ font-weight:700; padding-top:6px; border-bottom:none; }
.rc-student-row small{ font-weight:400; color:#555; }
.rc-row{ display:flex; justify-content:space-between; padding:2px 0; font-size:12px; gap:8px; }
.rc-grand{ font-size:14px; font-weight:800; border-top:1px solid #111; border-bottom:3px double #111; padding:4px 0; }
.rc-words{ font-size:10.5px; font-style:italic; color:#333; margin-top:3px; }
.rc-note{ font-size:10.5px; color:#555; margin-top:3px; }
.rc-qr-wrap{ text-align:center; margin-top:8px; }
.rc-qr-cap{ font-size:9.5px; color:#555; margin-top:3px; }
.rc-qr-fallback{ font-size:10px; color:#777; padding:10px; border:1px dashed #aaa; }
.rc-foot{ text-align:center; font-size:10.5px; color:#555; margin-top:5px; letter-spacing:1px; }
.rc-actions{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:16px; }
.rc-actions .btn{ flex:1 1 130px; }
.btn-ok-share{ background:var(--ok-solid); color:#fff; border-color:transparent; }
.btn-ok-share:hover{ background:#178A4C; color:#fff; }
.btn-tg-share{ background:#2AABEE; color:#fff; border-color:transparent; }
.btn-tg-share:hover{ background:#1E96D4; color:#fff; }

/* ---------- A4 sheet ---------- */
.a4-sheet{ background:#fff; color:#111; padding:24px; min-height:500px; }
.a4-sheet h2{ font-size:18px; margin-bottom:14px; text-align:center; }

/* ---------- Detail list (view modals) ---------- */
.detail-grid{ display:grid; grid-template-columns:1fr; gap:10px 20px; font-size:13px; }
.detail-grid .d-item{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.detail-grid .d-label{ font-size:11px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.4px; }
.detail-grid .d-value{ font-weight:600; overflow-wrap:anywhere; }
.detail-photo-row{ display:flex; gap:16px; align-items:center; margin-bottom:16px; flex-wrap:wrap; }
.detail-photo{ width:92px; height:92px; border-radius:var(--r-md); object-fit:cover; border:1px solid var(--line-strong); }
.section-title{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:var(--blue-700); margin:16px 0 8px; border-bottom:1px solid var(--line); padding-bottom:4px; }
.doc-list a{ display:inline-flex; align-items:center; gap:6px; font-size:12px; margin:2px 10px 2px 0; color:var(--blue-600); font-weight:600; }
@media (min-width: 640px){
  .detail-grid{ grid-template-columns:1fr 1fr; }
}

/* ---------- Search result rows ---------- */
.search-results{ border:1px solid var(--line); border-radius:var(--r-md); max-height:320px; overflow-y:auto; margin-top:8px; }
.search-row{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-bottom:1px solid var(--line); cursor:pointer; font-size:13px; }
.search-row:hover{ background:var(--blue-050); }
.search-row .sr-meta{ color:var(--ink-faint); font-size:11.5px; overflow-wrap:anywhere; }
.search-row:last-child{ border-bottom:none; }
.search-row .btn{ flex:none; }

/* ---------- ID counter chips ---------- */
.id-chips{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin-bottom:16px; }
.id-chip{ background:var(--surface-raised); border:1px solid var(--line); border-left:3px solid var(--blue-500); border-radius:var(--r-md); padding:10px 14px; font-size:12px; min-width:0; }
.id-chip b{ display:block; font-size:16px; font-family:var(--font-serif); color:var(--blue-800); }
.id-chip .text-faint{ overflow-wrap:anywhere; }

/* ---------- Toggle switch small ---------- */
.badge-clickable{ cursor:pointer; }

/* ---------- Exam marks table ---------- */
.marks-table{ min-width:520px; }
.marks-table input{ width:64px; padding:8px; border:1px solid var(--line-strong); border-radius:var(--r-sm); background:var(--surface-raised); color:var(--ink); text-align:center; font-size:13px; }
.marks-table input:disabled{ background:var(--bg); color:var(--ink-faint); cursor:not-allowed; }
.marks-table td.num, .marks-table th.num{ text-align:center; }
.lock-note{ font-size:12px; color:var(--warn-text); background:var(--warn-bg); border:1px solid var(--warn-line); border-radius:var(--r-md); padding:8px 12px; margin-bottom:10px; }

/* ---------- Report card ---------- */
.report-card{ background:#fff; color:#111; padding:20px; font-family:var(--font-sans); max-width:760px; margin:0 auto; }
.report-card h2{ text-align:center; font-size:18px; }
.report-card .rpt-sub{ text-align:center; font-size:12px; color:#555; margin-bottom:14px; }
.report-card table{ width:100%; border-collapse:collapse; font-size:12.5px; margin-top:10px; }
.report-card th, .report-card td{ border:1px solid #999; padding:6px 8px; }
.report-card th{ background:var(--blue-050); }
.report-card .rpt-head-row td{ border:none; padding:2px 4px; font-size:13px; }
.rpt-total-box{ display:flex; justify-content:space-between; margin-top:12px; font-size:13px; font-weight:700; gap:10px; flex-wrap:wrap; }
@media (min-width: 640px){ .report-card{ padding:26px 30px; } .report-card h2{ font-size:19px; } }

/* ---------- Verify page ---------- */
.verify-banner{ text-align:center; padding:14px; border-radius:var(--r-md); font-weight:700; margin-bottom:16px; }
.verify-banner.ok{ background:var(--ok-bg); color:var(--ok-text); border:1px solid var(--ok-line); }
.verify-banner.bad{ background:var(--bad-bg); color:var(--bad-text); border:1px solid var(--bad-line); }

/* ---------- Signed-in user chip ---------- */
.user-chip{ display:flex; align-items:center; gap:8px; padding:4px 10px 4px 4px; border:1px solid var(--line); border-radius:20px; background:var(--surface-raised); }
.user-chip-avatar{ width:26px; height:26px; border-radius:50%; background:var(--blue-600); color:#fff; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; flex:none; }
.user-chip-meta{ display:none; flex-direction:column; line-height:1.15; }
.user-chip-meta b{ font-size:12px; color:var(--ink); }
.user-chip-meta small{ font-size:10.5px; color:var(--ink-faint); }
@media (min-width: 1100px){ .user-chip-meta{ display:flex; } }

/* ---------- Role access control ---------- */
.no-access-banner{ margin:12px 12px 0; padding:12px 16px; border:1px solid var(--bad-line); background:var(--bad-bg); color:var(--bad-text); border-radius:var(--r-md); font-size:13px; }
.no-access-banner a{ color:inherit; font-weight:700; text-decoration:underline; margin-left:6px; }
.content.locked{ pointer-events:none; opacity:.45; user-select:none; }
.perm-table td.locked-cell{ text-align:center; }
.perm-lock-note{ font-size:11.5px; color:var(--ink-faint); }
@media (min-width: 1024px){ .no-access-banner{ margin:16px 20px 0; } }

/* ---------- Settings page ---------- */
.pw-cell{ font-family:var(--font-mono,monospace); letter-spacing:1px; }
.acct-actions{ display:flex; gap:6px; flex-wrap:wrap; }
.role-note{ font-size:12px; color:var(--ink-faint); margin:0; }

/* ---------- Print helpers ---------- */
.no-print{}

@media print{
  body *{ visibility:hidden; }
  #printArea, #printArea *{ visibility:visible; }
  #printArea{ position:absolute; left:0; top:0; width:100%; margin:0; background:#fff; color:#000; }
  #printArea[data-print-mode="pos"]{ width:76mm; font-family:'Courier New',monospace; }
  #printArea[data-print-mode="pos"] .pos-receipt{ border:none; width:100%; max-width:none; }
  #printArea[data-print-mode="a4"]{ width:100%; }
  #printArea .rc-actions, #printArea .no-print{ display:none !important; }
  @page{ margin:6mm; }
}

/* ---------- Create Structure (Exams & Grading) ---------- */
.cs-head{ display:flex; flex-wrap:wrap; gap:var(--sp-4); align-items:flex-start; justify-content:space-between; }
.cs-head-left{ display:flex; gap:var(--sp-3); align-items:flex-start; min-width:0; }
.cs-ic{
  width:44px; height:44px; flex:none; border-radius:10px; background:var(--blue-600); color:#fff;
  display:flex; align-items:center; justify-content:center;
}
.cs-ic svg{ width:22px; height:22px; }
.cs-sub{ font-family:var(--font-serif); font-size:15px; font-weight:600; color:var(--blue-600); margin:2px 0 4px; }
.cs-head-right{ display:flex; gap:var(--sp-3); flex-wrap:wrap; }
.cs-head-right .field{ min-width:170px; flex:1 1 170px; }
.cs-table{ min-width:560px; }
.cs-table .cs-total-row td{ background:var(--blue-050); border-top:1px solid var(--line); }
.cs-sum-card{
  background:var(--blue-050); border:1px solid var(--line); border-radius:var(--r-md);
  padding:14px 16px;
}
.cs-sum-title{ font-weight:700; font-size:13px; color:var(--blue-800); margin-bottom:6px; }
.cs-sum-list{ margin:0 0 8px; padding-left:18px; font-size:12.5px; color:var(--ink-soft); line-height:1.8; }
.cs-sum-total{ font-size:12.5px; font-weight:700; color:var(--blue-700); }
.cs-sum-sub{ font-size:11px; color:var(--ink-faint); margin-top:2px; }
.cs-note{
  background:var(--info-bg); border:1px solid var(--info-line); border-radius:var(--r-md);
  padding:14px 16px; font-size:12.5px; color:var(--info-text);
}
.cs-note b{ display:flex; align-items:center; gap:6px; font-size:12.5px; }
.cs-note p{ margin:6px 0 0; }
@media (max-width: 719px){
  .cs-head-right{ width:100%; }
  .cs-head-right .field{ min-width:calc(50% - 6px); flex:1 1 calc(50% - 6px); }
}

/* ---------- Report Structure builder (Exams & Grading) ---------- */
.rs-tabs{ display:flex; gap:10px; flex-wrap:wrap; }
.rs-tab{
  display:flex; align-items:center; gap:8px; cursor:pointer;
  border:1px solid var(--line); background:#fff; color:var(--ink-soft);
  border-radius:var(--r-md); padding:8px 14px; font:inherit; transition:.15s;
}
.rs-tab:hover{ border-color:var(--blue-300); }
.rs-tab.active{ background:var(--blue-600); border-color:var(--blue-600); color:#fff; }
.rs-tab-code{
  display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; border-radius:50%; font-weight:700; font-size:12px;
  background:rgba(0,0,0,.08);
}
.rs-tab.active .rs-tab-code{ background:rgba(255,255,255,.22); }
.rs-tab-name{ font-weight:600; font-size:13px; }
.rs-table{ min-width:600px; }
.rs-act{ display:flex; gap:6px; justify-content:flex-end; }

/* ---------- Report Cards: selection + list ---------- */
.rc-select{ grid-template-columns:1fr 1fr auto; }
.rc-list{ min-width:560px; }
@media (max-width:640px){ .rc-select{ grid-template-columns:1fr; } }

/* ---------- Student profile modal ---------- */
.rc-profile-top{ display:flex; align-items:center; gap:14px; margin-bottom:14px; }
.rc-profile-table th{ text-align:left; color:var(--ink-soft); font-weight:600; }

/* ---------- Report card template (v2) ---------- */
.rc2{
  background:#fff; color:#111; width:100%; max-width:760px; margin:0 auto;
  padding:30px 34px 34px; font-family:var(--font-sans); box-sizing:border-box;
  position:relative; border:4px double var(--blue-800); border-radius:4px;
}
.rc2::before{
  content:''; position:absolute; inset:7px; border:1.5px solid var(--blue-600);
  border-radius:2px; pointer-events:none;
}
.rc-modal-wrap{ max-height:70vh; overflow:auto; }
.rc2-head{ display:flex; align-items:center; justify-content:space-between; gap:14px; }
.rc2-headtext{ flex:1 1 auto; text-align:center; }
.rc2-som{ font-size:14px; letter-spacing:.6px; color:var(--blue-700); font-weight:800; }
.rc2-amh{ font-family:'Noto Sans Ethiopic',var(--font-sans); font-size:25px; font-weight:800; color:var(--blue-900); line-height:1.5; }
.rc2-eng{ font-family:var(--font-serif); font-size:30px; font-weight:900; letter-spacing:1.5px; color:var(--blue-900); }
.rc2-contact{ font-size:11.5px; color:#444; margin-top:2px; }
.rc2-logo{ width:74px; height:74px; flex:none; border-radius:8px; object-fit:cover; border:1px solid var(--line); }
.rc2-logo-ph{
  display:flex; align-items:center; justify-content:center;
  background:var(--blue-600); color:#fff; font-weight:800; font-size:22px; border:none;
}
.rc2-titlebar{
  margin:14px 0 18px; background:#111; color:#fff; text-align:center;
  font-weight:700; letter-spacing:.6px; font-size:13.5px; padding:9px 10px; border-radius:3px;
}
.rc2-info{ display:flex; gap:14px; align-items:flex-start; margin-bottom:16px; }
.rc2-photo{
  width:88px; height:88px; flex:none; border:1px solid #999; border-radius:4px;
  display:flex; align-items:center; justify-content:center; overflow:hidden; background:#fafafa;
}
.rc2-photo .avatar{ width:100%!important; height:100%!important; border-radius:0!important; font-size:26px!important; }
.rc2-photo img{ width:100%; height:100%; object-fit:cover; }
.rc2-infotable{ flex:1 1 auto; border-collapse:collapse; font-size:12.5px; }
.rc2-infotable th{ text-align:left; font-weight:700; color:#222; padding:4px 6px; white-space:nowrap; }
.rc2-infotable td{ padding:4px 6px; color:#111; }
.rc2-infotable th::after{ content:":"; }

.rc2-subjects{ width:100%; border-collapse:collapse; font-size:12.5px; margin-top:6px; }
.rc2-subjects th, .rc2-subjects td{ border:1px solid #888; padding:11px 10px; }
.rc2-subjects thead th{ background:var(--blue-050); text-align:center; font-size:12px; }
.rc2-subjects .rc2-subj{ text-align:left; font-weight:600; }
.rc2-c{ text-align:center; }
.rc2-avg b{ color:var(--blue-800); }

.rc2-system{ width:100%; border-collapse:collapse; font-size:12.5px; margin-top:-1px; }
.rc2-system td{ border:1px solid #888; padding:9px 10px; }
.rc2-sysrow td{ background:#f6f8fc; }
.rc2-sysrow td:first-child{ text-align:left; font-weight:600; color:#333; }

.rc2-foot{ display:flex; justify-content:space-between; gap:24px; margin-top:60px; }
.rc2-foot-cell{ flex:1; text-align:center; font-size:11.5px; color:#333; }
.rc2-foot-cell i{ display:block; border-bottom:1px solid #333; margin-top:44px; }

/* ---------- Multi-page print / export ---------- */
.rc-bulk{ position:absolute; left:-10000px; top:0; width:210mm; }
.rc-bulk .rc2{ max-width:none; }
.rpt-page{ page-break-after:always; break-after:page; }
.rpt-page-last{ page-break-after:auto; break-after:auto; }
@media print{
  .rc2{ max-width:none; }
  .rc2, .rc2::before{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  #printArea .rpt-page{ page-break-after:always; break-after:page; }
  #printArea .rpt-page-last{ page-break-after:auto; break-after:auto; }
  .rc2-titlebar{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .rc2-subjects thead th, .rc2-sysrow td{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }
}