/* لوحة المدرسة: فوق panel.css (admin.css نفسه: الرموز والهيكل والبطاقات والأزرار)، بلا لون جديد ولا قيمة جديدة */

/* the selects of the forms, as the console's schools tab draws them */
.panel label > select { display: block; width: 100%; margin-top: 4px; padding: 9px 10px; font-size: 15px; border-radius: 8px; border: 1px solid var(--line); background: var(--frame); }
.panel .card + .card { margin-top: 12px; }
.panel > .muted:first-child { margin-top: 0; }
.sc-head { justify-content: space-between; margin-top: 0; }
.sc-head h2 { margin: 0; }
.sc-pick { width: 100%; text-align: start; cursor: pointer; font: inherit; color: inherit; }
#gCodeRow input, #gMfaRow input, #mfaSetup .row input { flex: 1 1 140px; }
/* a QR code is read only black on white, in the dark theme too: the one literal colour here, on purpose */
#mfaSetup img { display: block; margin: 10px auto; background: #fff; border-radius: 8px; }

/* the school's name in the side bar, and "another school" under it */
.ws { flex-wrap: wrap; }
.ws-switch { flex-basis: 100%; text-align: start; font-size: 12.5px; padding-inline-start: 38px; }

/* the language menu: every registered language, named in itself (school.js builds it from the dictionaries) */
.lang-wrap { position: relative; display: inline-flex; }
.lang-menu { top: 40px; inset-inline-end: 0; max-height: 60vh; overflow: auto; }
.lang-menu button[aria-current="true"] { font-weight: 700; }

/* the audit rows reuse the console's list grid */
.line.cols-audit .ttl .dim { display: inline; }
.updates { display: flex; flex-direction: column; gap: 8px; }

/* a narrow screen: the top bar's buttons keep their words on one line and the row wraps instead */
.topbar .who { flex-wrap: wrap; }
.topbar .who .btn { white-space: nowrap; }

/* the school's tree: one row per node, indented by its depth, a caret folds what is under it */
.list.tree { gap: 6px; }
.tree-row .line { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px 10px; min-height: 48px; }
/* one line on a phone too: the name and its tag keep their size, the counts wrap inside their own space */
.tree-row .ttl { min-width: 0; overflow-wrap: anywhere; }
.tree-row .tag { flex: none; }
.tree-row .dim { flex: 1 1 0; min-width: 0; white-space: normal; overflow: visible; text-overflow: clip; }
.tree-row.depth-1 .line { padding-inline-start: 34px; }
.tree-row.depth-2 .line { padding-inline-start: 54px; }
.tree-row.depth-3 .line { padding-inline-start: 74px; }
.tree-row .dots { flex: none; margin-inline-start: auto; }
@media (max-width: 480px) { .tree-row.depth-1 .line { padding-inline-start: 24px; } .tree-row.depth-2 .line { padding-inline-start: 36px; } .tree-row.depth-3 .line { padding-inline-start: 48px; } }
.tree-row.is-archived .ttl, .chip.is-archived { color: var(--ink-60); }
.tree-tools { margin-top: 0; }
.tree-tools .chip { margin: 0; display: inline-flex; align-items: center; gap: 6px; }
.caret { border: 0; background: transparent; color: var(--ink-60); width: 26px; height: 26px; border-radius: 6px; cursor: pointer; display: grid; place-items: center; flex: none; }
.caret:hover { background: var(--hover); color: var(--ink); }
.caret svg { transition: rotate 160ms var(--ease-out); }
.caret[aria-expanded="true"] svg { rotate: 90deg; }
[dir="rtl"] .caret svg { scale: -1 1; }
[dir="rtl"] .caret[aria-expanded="true"] svg { rotate: -90deg; }
.caret-gap { width: 26px; flex: none; }
@media (prefers-reduced-motion: reduce) { .caret svg { transition: none; } }

/* the wizard: four steps, the stages of each division with a section count per grade, then a preview */
.wz-steps { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 4px 0 14px; counter-reset: wz; }
.wz-steps li { counter-increment: wz; padding: 3px 11px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-60); font-size: 12.5px; }
.wz-steps li::before { content: counter(wz) " · "; }
.wz-steps li.on { color: var(--ink); border-color: var(--brand-teal); }
.wz-steps li.done { color: var(--brand-teal); }
.wz-pane .seg { flex-wrap: wrap; margin-bottom: 4px; }
.wz-division { margin-top: 8px; }
.wz-division .chip, .wz-stage .chip { margin: 0; display: inline-flex; align-items: center; gap: 6px; }
.panel .wz-division input[type="text"], .panel .wz-stage .row input[type="text"] { flex: 1 1 160px; width: auto; margin-top: 0; }
.wz-div + .wz-div { margin-top: 16px; }
.wz-div h3 { margin: 0 0 8px; font-size: 15px; }
.wz-stage { border: 1px solid var(--line); border-radius: 10px; padding: 0 10px 10px; margin-bottom: 8px; }
.wz-stage.off { border-style: dashed; }
.wz-n { display: inline-flex; align-items: center; gap: 6px; margin: 0; white-space: nowrap; }
.panel .wz-n input, .panel .wz-grade input[type="number"] { width: 64px; flex: none; margin-top: 0; }
.wz-grades { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; margin-top: 8px; }
.wz-grade { display: flex; gap: 6px; }
.panel .wz-grade input[type="text"] { flex: 1; min-width: 0; width: auto; margin-top: 0; }
.wz-preview ul { margin: 4px 0; padding-inline-start: 18px; }
.wz-preview li { margin: 3px 0; }
#sjRow input { flex: 1 1 200px; width: auto; margin-top: 0; }

/* people and their appointments: each appointment a line under the person, its keys in words */
.person .ap-list { flex-basis: 100%; display: flex; flex-direction: column; gap: 6px; margin-top: 4px; padding-inline-start: 12px; border-inline-start: 2px solid var(--line); }
.ap-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.ap-row .ap-caps-line { flex-basis: 100%; }
.ap-group + .ap-group { margin-top: 6px; }
.ap-group .chips { margin-top: 4px; }
.chip.is-off { opacity: 0.45; cursor: not-allowed; }
/* the teaching card: the sections under their grade */
.tc-sections { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.tc-grade .chips { margin-top: 4px; }

/* the students (phase 4): the list with its picks, the form, the import wizard, and the slips printed eight to an A4 page */
.sv-tools { align-items: flex-end; gap: 8px 14px; flex-wrap: wrap; }
.sv-filter { flex: 1 1 260px; margin: 0; }
.sv-tools .chip { margin: 0; display: inline-flex; align-items: center; gap: 6px; }
.sv-purge { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sv-bulk { flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; margin: 8px 0; }
.sv-move { margin: 0; gap: 6px; flex-wrap: nowrap; }
.panel .sv-move select { margin-top: 0; width: auto; max-width: 240px; }
.seat-pick { display: inline-flex; align-items: center; margin: 0; }
.seat-item .ttl { flex: 0 1 auto; }
.seat-item .dim { flex: 1 1 200px; }
.seat-tags { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.tag.ok { background: var(--accent-soft); color: var(--accent); }
.seat-g { flex-basis: 100%; }
.sa-g { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px; margin-top: 6px; }
.panel .sa-g input { margin-top: 0; }
.sa-more { margin-top: 8px; }
.sa-more summary { cursor: pointer; color: var(--ink-60); font-size: 13px; }
.sa-dup:empty { display: none; }
.sb-row { align-items: flex-end; gap: 8px 14px; flex-wrap: wrap; }
.sb-row label { flex: 1 1 260px; margin: 0; }
.sb-row .sb-n { flex: 0 0 120px; }
.si-map { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; margin: 8px 0; }
.si-col { display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; min-width: 0; }
.si-col .si-h { font-weight: 600; overflow-wrap: anywhere; }
.si-col .dim { font-size: 12.5px; overflow-wrap: anywhere; }
.panel .si-col select { margin-top: 4px; }
.si-preset { gap: 6px; flex-wrap: wrap; }
.panel .si-preset select, .panel .si-preset input { flex: 1 1 180px; width: auto; margin-top: 0; }
.si-group .chip { margin: 0; display: inline-flex; align-items: center; gap: 6px; }
.panel .si-group select { flex: 1 1 240px; width: auto; margin-top: 0; }
.si-row.is-bad { border-color: var(--danger); }
.panel .si-row input { flex: 0 1 180px; width: auto; margin-top: 0; }
.panel .si-row select { flex: 0 1 200px; width: auto; margin-top: 0; }
.si-bar { height: 8px; border-radius: 999px; background: var(--hover); overflow: hidden; }
.si-bar i { display: block; height: 100%; width: 0; background: var(--brand-teal); transition: width 200ms var(--ease-out); }
.slips { display: none; }
@media print {
  body.printing-slips > *:not(.slips) { display: none !important; }
  body.printing-slips .slips { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 66mm; gap: 4mm; padding: 0; }
  body.printing-slips { background: #fff; color: #000; }
  @page { size: A4; margin: 10mm; }
  .slip { display: flex; gap: 4mm; border: 1px dashed #999; border-radius: 3mm; padding: 4mm; break-inside: avoid; overflow: hidden; }
  .slip-qr { flex: 0 0 30mm; }
  .slip-qr svg { width: 30mm; height: 30mm; }
  .slip-body { display: flex; flex-direction: column; gap: 1mm; min-width: 0; font-size: 9pt; line-height: 1.35; }
  .slip-name { font-size: 13pt; }
  .slip-code { font: 700 13pt/1.2 ui-monospace, Menlo, monospace; letter-spacing: 0.5px; }
  .slip-sec, .slip-until { color: #333; }
  .slip-steps { margin: 0; padding-inline-start: 4mm; font-size: 7.5pt; }
}

/* the guardian's portal (phase 5): a guardian-only session shows its own tab and nothing of a school's */
body.family-only .tabs > :not([data-family]) { display: none; }
/* the teacher's face (school/teacher.js): only its own tabs */
body.teacher-only .tabs > :not([data-teacher]) { display: none; }
/* the face picker in the school-name area, for someone who holds more than one role */
.ws-face { margin-inline-start: auto; max-width: 120px; padding: 3px 6px; font-size: 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--card); color: var(--ink); }
/* the week plan: a day's new lines, one row each, wrapping on a narrow screen */
.tw-day + .tw-day { margin-top: 12px; }
.tw-line { gap: 6px; flex-wrap: wrap; align-items: center; margin: 6px 0; }
.tw-line input[data-tw="title"] { flex: 1 1 200px; width: auto; margin: 0; }
.tw-line input[data-tw="url"] { flex: 1 1 220px; width: auto; margin: 0; }
.tw-line select { width: auto; margin: 0; padding: 8px 10px; font-size: 14px; border-radius: var(--r-ctl); border: 1px solid var(--line); background: var(--card); color: var(--ink); }
/* the hand-in list: one homework a card, its students inside */
.th-item summary { cursor: pointer; list-style: none; }
.th-item summary::-webkit-details-marker { display: none; }
.th-item .list { margin-top: 8px; }
.fm-kid h2 { margin: 0; }
.fm-week-nav { align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0 8px; }
.fm-day + .fm-day { margin-top: 8px; }
.fm-item .ttl { flex: 1 1 200px; }
.fm-done { margin-inline-start: auto; }
/* the slip's card (school/family.js codeHtml): the children as chips, the consent text beside its box */
/* a radio inside a chip (the slip's children, the students page's guardians): admin.css's .panel input rule is
   meant for text boxes and outranks .chip input, so the radio got a text box's width, padding and border */
.panel .chip input[type="radio"] { display: inline-block; width: 15px; height: 15px; padding: 0; margin: 0; border: 0; flex: none; }
.fm-who { display: flex; flex-wrap: wrap; gap: 6px; }
.fm-who .chip { margin: 0; display: inline-flex; align-items: center; gap: 6px; }
.fm-consent { align-items: flex-start; line-height: 1.7; }
.fm-consent input { flex: none; margin-top: 4px; }
/* the announcements (school/notices.js, phase 6b) */
.nt-check { margin: 8px 0; }
.nt-item .nt-body { flex-basis: 100%; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink); margin: 4px 0; }
.nt-item .nt-read { flex-basis: auto; }
.nt-item .nt-wait { flex-basis: 100%; margin-top: 4px; }
.nt-item .nt-wait summary { cursor: pointer; color: var(--ink-60); }
/* the service providers (school/activities.js, F-17): offers to pick, each round's votes as bars */
.ac-offer { cursor: pointer; }
.ac-offer.on { outline: 2px solid var(--accent); outline-offset: -2px; }
.panel .ac-offer input[type="checkbox"] { display: inline-block; width: 16px; height: 16px; padding: 0; margin: 0; margin-inline-end: 6px; border: 0; flex: none; vertical-align: -2px; }
.ac-offer .nt-body, .ac-round .nt-body { flex-basis: 100%; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink); margin: 4px 0; }
.ac-round .ac-counts { flex-basis: 100%; }
.ac-votes { flex-basis: 100%; display: grid; gap: 6px; margin: 6px 0; }
.ac-vote { display: grid; grid-template-columns: minmax(120px, 2fr) 3fr auto; gap: 10px; align-items: center; }
.ac-vote.on b, .ac-vote.on bdi { color: var(--accent); }
.ac-bar { width: 100%; height: 8px; accent-color: var(--accent); }
.ac-decide { flex-basis: 100%; border-top: 1px solid var(--line); margin-top: 8px; padding-top: 8px; }
@media (max-width: 600px) { .ac-vote { grid-template-columns: 1fr auto; } .ac-bar { grid-column: 1 / -1; } }

/* class invitations waiting for review (school/invites.js): the card as the guests will see it beside its details; the
   card's drawing is the app's own (invite-art.js), its words in HTML over it, in the panel's tokens */
.iv-item { display: grid; grid-template-columns: minmax(150px, 200px) minmax(0, 1fr); gap: 14px; align-items: start; }
.iv-main { display: grid; gap: 6px; min-width: 0; justify-items: start; }
.iv-head { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.iv-facts-list { display: grid; gap: 2px; font-size: 14px; }
.iv-fact { overflow-wrap: anywhere; }
.iv-mates-box summary { cursor: pointer; color: var(--ink-60); }
.iv-why { display: grid; gap: 8px; justify-self: stretch; }
.iv-why textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--frame); color: var(--ink); font: inherit; }
@media (max-width: 640px) { .iv-item { grid-template-columns: minmax(0, 1fr); } .iv-side { max-width: 240px; } }
.iv-card {
  --iv-bg: var(--card); --iv-a: var(--brand-ink); --iv-b: var(--brand-teal); --iv-c: var(--lv1-soft);
  position: relative; overflow: hidden; aspect-ratio: 320 / 440; border-radius: 14px; border: 1px solid var(--line); color: var(--ink);
}
.iv-card[data-ink='dark'] { color: var(--btn); }
.iv-card[data-ink='light'] { color: var(--on-btn); }
.iv-card > .iv-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.iv-card > .iv-words { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; gap: 2px; padding: 34px 16px; text-align: center; }
.iv-card .iv-words > * { margin: 0; overflow-wrap: anywhere; }
.iv-card .iv-occ, .iv-card .iv-line, .iv-card .iv-facts { font-size: 11px; line-height: 1.5; }
.iv-card .iv-title { font-size: 17px; line-height: 1.3; font-weight: 800; }
.iv-card[data-font='light'] .iv-title { font-weight: 400; }
.iv-side .iv-facts { display: none; }

/* the vendors' market and the school's agreement (activities.js, F-17 marketplace) */
.mk-logo { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; border: 1px solid var(--line); }
.mk-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin: 8px 0; }
.mk-photos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-ctl); border: 1px solid var(--line); background: var(--frame); }
.ac-terms { max-height: 320px; overflow: auto; border: 1px solid var(--line); border-radius: var(--r-card); padding: 8px 12px; margin: 8px 0; background: var(--frame); }
.ac-thread, .ac-dispute, .ac-rate { margin-top: 8px; }
.ac-terms > h2 { display: none; }
.iv-card.iv-photo { aspect-ratio: auto; min-height: 140px; display: grid; place-items: center; background: var(--frame); }
.iv-card.iv-photo > img { display: block; width: 100%; height: auto; }
.iv-side { display: grid; gap: 6px; }
.iv-full { max-width: min(92vw, 900px); max-height: 92vh; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); color: var(--ink); }
.iv-full::backdrop { background: var(--bg); opacity: .9; }
.iv-full img { display: block; max-width: 100%; max-height: calc(92vh - 80px); margin: 8px auto 0; }