/* ============================================================
   Baraem GradeFlow — printable mark sheets + analysis surfaces
   ------------------------------------------------------------
   .print-only is hidden on screen and revealed for printing, so the
   exam/grade sheet can be laid out independently of the app chrome.
   ============================================================ */

.print-only { display: none; }

/* ---------- the printable sheet ---------- */
#printArea {
  font-family: 'Segoe UI', Tahoma, Arial, sans-serif;
  color: #111;
  direction: rtl;
  padding: 10mm 8mm;
}
#printArea[dir="ltr"] { direction: ltr; }

.ps-head {
  display: flex;
  align-items: center;
  gap: 14px;
  justify-content: center;
  border-bottom: 2.5px solid #1F3A93;
  padding-bottom: 8px;
  margin-bottom: 12px;
}
.ps-crest { width: 54px; flex: 0 0 auto; }
.ps-crest img { width: 100%; height: auto; display: block; }
.ps-head h1 { font-size: 19pt; margin: 0; color: #1F3A93; font-weight: 800; letter-spacing: .2px; }
.ps-sub { margin: 2px 0 0; font-size: 10pt; color: #555; }

.ps-title {
  text-align: center;
  font-size: 14pt;
  margin: 0 0 10px;
  color: #1F3A93;
}

.ps-meta {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 12px;
  font-size: 10.5pt;
}
.ps-meta th, .ps-meta td {
  border: 1px solid #b9c2d6;
  padding: 5px 8px;
  text-align: right;
}
.ps-meta th { background: #EAF0FA; color: #1F3A93; font-weight: 700; width: 14%; }

.ps-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 10.5pt;
}
.ps-table th, .ps-table td {
  border: 1px solid #b9c2d6;
  padding: 5px 7px;
  text-align: center;
}
.ps-table thead th {
  background: #1F3A93;
  color: #fff;
  font-weight: 700;
  font-size: 9.5pt;
}
.ps-table thead th small { font-weight: 400; opacity: .85; }
.ps-table tbody tr:nth-child(even) { background: #F6F8FC; }
.ps-name { text-align: right !important; font-weight: 600; }
.ps-mark { width: 62px; }
.ps-total { font-weight: 700; background: #EAF0FA; }

.ps-band {
  display: inline-block;
  min-width: 34px;
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 9.5pt;
  border: 1px solid rgba(0,0,0,.18);
}
.ps-band.ap { background: #C6EFCE; color: #0B6623; }
.ps-band.a  { background: #D9EAD3; color: #274E13; }
.ps-band.b  { background: #FFF2CC; color: #7F6000; }
.ps-band.c  { background: #FCE5CD; color: #974706; }
.ps-band.d  { background: #F4CCCC; color: #990000; }
.ps-band.e  { background: #E8E8E8; color: #333; }

.ps-foot {
  display: flex;
  justify-content: space-between;
  margin-top: 18px;
  font-size: 10pt;
  color: #333;
}
[dir="ltr"] .ps-foot { direction: ltr; }

/* ---------- on-screen analysis ---------- */
.ana-wrap { display: grid; gap: 16px; }

.ana-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 12px;
}
.ana-card {
  background: #fff;
  border: 1px solid var(--border, #e3e8f2);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 2px 8px rgba(20,40,90,.05);
}
.ana-card .k { font-size: 11.5px; color: #64748b; font-weight: 600; }
.ana-card .v { font-size: 26px; font-weight: 800; color: #1F3A93; margin-top: 4px; line-height: 1.1; }
.ana-card .v small { font-size: 14px; font-weight: 700; color: #64748b; }

.ana-panel {
  background: #fff;
  border: 1px solid var(--border, #e3e8f2);
  border-radius: 14px;
  padding: 16px 18px;
  box-shadow: 0 2px 8px rgba(20,40,90,.05);
}
.ana-panel h3 {
  margin: 0 0 12px;
  font-size: 15px;
  color: #1F3A93;
  display: flex;
  align-items: center;
  gap: 8px;
}
/* The heading icon carried no intrinsic width/height, so the global
   `img, svg { max-width: 100% }` rule let it stretch to fill the flex
   line and it rendered as a 1092px block of brand blue. Pin it. */
.ana-panel h3 svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

/* ---------- charts ---------- */
.ch-wrap {
  width: 100%;
  overflow: hidden;
}
.ch {
  width: 100%;
  max-width: 720px;          /* a chart stretched to 1900px looks amateur */
  height: auto;
  display: block;
  font-family: inherit;
  overflow: visible;
  margin: 0 auto;
  /* The page is dir="rtl" in Arabic, which mirrors SVG text anchors and sends
     every value label off the right edge of the viewBox. The CSS property
     wins over the dir attribute, so it has to be set here too. */
  direction: ltr;
}
.ch text { direction: ltr; unicode-bidi: isolate; }
.ch-strip .ch { max-width: 860px; }

.ch text { user-select: none; }
.ch rect, .ch circle, .ch line { transition: opacity .15s ease; }

.ch-empty {
  padding: 18px 0;
  text-align: center;
  color: var(--muted-fg, #94a3b8);
  font-size: 13px;
}

.ch-note {
  margin: 8px 0 0;
  font-size: 11.5px;
  color: var(--muted-fg, #7A879E);
  text-align: center;
}

/* legend now carries the count and the share */
.ana-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-top: 14px;
  font-size: 12.5px;
}
.ana-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px 3px 7px;
  border: 1px solid var(--border, #e7ecf4);
  border-radius: 999px;
  background: #fff;
  white-space: nowrap;
}
.ana-legend i {
  width: 9px; height: 9px; border-radius: 3px; display: inline-block;
  flex: 0 0 auto;
}
.ana-legend .ap i { background: #1F8A5B; }
.ana-legend .a  i { background: #4CA64C; }
.ana-legend .b  i { background: #D4A017; }
.ana-legend .c  i { background: #E07B39; }
.ana-legend .d  i { background: #C0392B; }
.ana-legend .e  i { background: #7A8290; }
.ana-legend .lg-k { color: #47536B; font-weight: 600; }
.ana-legend b { color: #1B2A4A; font-weight: 800; font-variant-numeric: tabular-nums; }
.ana-legend .lg-p { color: var(--muted-fg, #7A879E); font-size: 11px; }

/* per-student table */
.ana-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ana-table th, .ana-table td { padding: 7px 9px; border-bottom: 1px solid #eef2f8; }
.ana-table thead th {
  text-align: right;
  color: #1F3A93;
  font-size: 12px;
  font-weight: 700;
  border-bottom: 2px solid #dbe3f0;
  white-space: nowrap;
}
.ana-table td.num { text-align: center; font-variant-numeric: tabular-nums; font-weight: 700; }
.ana-table tbody tr:hover { background: #F7F9FD; }
.ana-table .rank {
  display: inline-block;
  min-width: 22px;
  text-align: center;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 800;
  padding: 1px 5px;
  background: #EAF0FA;
  color: #1F3A93;
}

/* ---------- print rules ---------- */
@media print {
  body * { visibility: hidden !important; }
  .print-only, .print-only * { visibility: visible !important; }
  .print-only {
    display: block !important;
    position: absolute;
    inset: 0;
    width: 100%;
  }
  .ps-table thead { display: table-header-group; }   /* repeat on every page */
  .ps-table tr { page-break-inside: avoid; }
  .ana-cards, .ana-panel { box-shadow: none; border-color: #ccc; }
  @page { size: A4 landscape; margin: 8mm; }
}