/* Area: staffreports — reports centre, report documents, tasks, class panels, staff, visits. Phone first. */

/* ---------- reports centre */
.xsr-group { margin-top: 6px; }
.xsr-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.xsr-card { display: flex; gap: 12px; align-items: flex-start; text-decoration: none; color: inherit; margin: 0; text-align: left; font: inherit; cursor: pointer; width: 100%; }
.xsr-card:hover { border-color: var(--gold, #C29A45); }
.xsr-card strong { display: block; font-size: 15px; }
.xsr-card small { display: block; color: var(--mute); font-size: 12.5px; line-height: 1.45; margin-top: 2px; }
.xsr-card-ic { flex: none; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--gold-soft, #f6ecd5); color: #9c7630; }
.xsr-linkrow { display: grid; grid-template-columns: 110px 1fr auto auto; gap: 8px; align-items: center; }
.xsr-linkrow input { min-width: 0; font-size: 12.5px; }
@media (max-width: 520px) { .xsr-linkrow { grid-template-columns: 1fr auto auto; } .xsr-linkrow strong { grid-column: 1 / -1; } }

/* ---------- report document */
.xsr-body { margin-top: 18px; }
.xsr-loading { padding: 24px 0; }
.xsr-doc-head { margin: 4px 0 10px; }
.xsr-doc-head h2 { margin: 2px 0; font-size: 22px; }
.xsr-h { font-family: var(--serif, Georgia, serif); font-size: 17px; margin: 20px 0 8px; color: var(--navy, #0B1F4B); }
@media (prefers-color-scheme: dark) { .xsr-h { color: var(--gold-light, #e3c27a); } }
.xsr-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.xsr-stat { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; box-shadow: var(--shadow); }
.xsr-stat b { display: block; font-size: 21px; font-variant-numeric: tabular-nums; line-height: 1.2; }
.xsr-stat span { font-size: 12.5px; color: var(--mute); }
.xsr-text p { margin: 0 0 6px; line-height: 1.6; }
.xsr-text p:last-child { margin-bottom: 0; }
.xsr-table td, .xsr-table th { white-space: nowrap; }
.xsr-table td:last-child { white-space: normal; min-width: 140px; }
.xsr-bars { display: grid; gap: 8px; }
.xsr-bar { display: grid; grid-template-columns: minmax(110px, 38%) 1fr auto; gap: 10px; align-items: center; font-size: 13.5px; }
.xsr-bar b { font-variant-numeric: tabular-nums; font-size: 13px; }
.xsr-quotes { display: grid; gap: 8px; }
.xsr-quote { margin: 0; background: var(--paper); border: 1px solid var(--line); border-left: 4px solid #C29A45; border-radius: 10px; padding: 10px 14px; font-style: italic; }
.xsr-quote small { display: block; font-style: normal; color: var(--mute); margin-top: 4px; }
.xsr-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.xsr-photo { margin: 0; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; break-inside: avoid; }
.xsr-photo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--chip); }
.xsr-photo figcaption { font-size: 12.5px; padding: 8px 10px; }
.xsr-nophoto { aspect-ratio: 4 / 3; display: grid; place-items: center; color: var(--mute); font-size: 13px; background: var(--chip); }
.xsr-mapbox { padding: 10px; }
.xsr-map { display: block; width: 100%; max-width: 680px; height: auto; margin: 0 auto; }
.xsr-map-land { fill: var(--chip, #efeadf); stroke: var(--line-strong, #d3ccb9); stroke-width: 1.5; }
.xsr-map-pt circle { fill: rgba(11, 31, 75, .55); stroke: #0B1F4B; }
.xsr-map-pt text { font-size: 11px; fill: currentColor; }
@media (prefers-color-scheme: dark) { .xsr-map-pt circle { fill: rgba(227, 194, 122, .55); stroke: #e3c27a; } }

/* ---------- tasks and home */
.xsr-home { display: grid; gap: 10px; }
.xsr-home:empty { display: none; }
.xsr-taskcard { display: flex; gap: 12px; align-items: center; text-decoration: none; color: inherit; margin: 0; }
.xsr-taskcard strong { display: block; } .xsr-taskcard small { color: var(--mute); }
.xsr-taskcard.late { border-color: var(--red, #c71e1e); }
.xsr-pinbanner { display: block; text-decoration: none; }
.xsr-tasklist { padding: 4px 14px; }
.xsr-task { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--line); }
.xsr-task:last-child { border-bottom: 0; }
.xsr-task.late strong { color: var(--red, #c71e1e); }
.xsr-task p { margin: 4px 0; }
.xsr-calls { margin: 6px 0 0; padding-left: 18px; line-height: 1.7; }
.xsr-subcard h3 { margin-top: 0; }

/* ---------- call dialog */
.xsr-callbox { display: grid; gap: 8px; }
.xsr-script { background: var(--gold-soft, #f8f0dc); border: 1px solid #e6d3a4; border-radius: 12px; padding: 10px 12px; }
.xsr-script p { margin: 4px 0 0; line-height: 1.55; font-size: 15px; }
@media (prefers-color-scheme: dark) { .xsr-script { background: rgba(194, 154, 69, .14); border-color: rgba(194, 154, 69, .35); } }
.xsr-hist summary { cursor: pointer; font-weight: 600; font-size: 13.5px; }
.xsr-hist ul { margin: 6px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.6; max-height: 180px; overflow: auto; }
.xsr-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 4px 14px; margin-top: 8px; font-size: 13px; }
.xsr-facts div { display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px dashed var(--line); padding: 3px 0; }
.xsr-facts span { color: var(--mute); }

/* ---------- class screen panels, resources */
.xsr-classpanels:empty { display: none; }
.xsr-sub select { flex: 1; min-width: 0; }
.xsr-reslist { display: grid; gap: 8px; }
.xsr-reslist > .row { flex-wrap: nowrap; }
.xsr-res { display: flex; gap: 10px; align-items: center; width: 100%; text-align: left; font: inherit; color: inherit; background: var(--paper); border: 1px solid var(--line);
  border-radius: 12px; padding: 10px 12px; cursor: pointer; min-height: 48px; }
.xsr-res:hover { border-color: #C29A45; }
.xsr-res strong { display: block; } .xsr-res small { color: var(--mute); }
.xsr-sreport textarea { width: 100%; box-sizing: border-box; }
.xsr-sreport .field { margin-bottom: 8px; }
.xsr-tsub p { margin: 6px 0 0; }

/* ---------- staff, visits, stories */
.xsr-staff td { vertical-align: middle; }
.xsr-check { display: flex; gap: 8px; align-items: flex-start; }
.xsr-checks { display: grid; gap: 6px; }
.xsr-checkrow { display: flex; gap: 10px; align-items: center; justify-content: space-between; border-bottom: 1px dashed var(--line); padding: 4px 0; flex-wrap: wrap; }
.xsr-checkrow .chips { flex-wrap: nowrap; }
.xsr-vphoto img, .xsr-vimg { max-width: 220px; max-height: 160px; border-radius: 10px; display: block; margin-top: 6px; }
.xsr-ckview { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.xsr-ckview span { font-size: 12.5px; padding: 3px 8px; border-radius: 999px; background: var(--chip); }
.xsr-ckview .ok { color: var(--leaf, #2e7d4f); } .xsr-ckview .no { color: var(--red, #c71e1e); }
.xsr-centre { margin: 0; }
.xsr-centre.late { border-color: var(--red, #c71e1e); }
.xsr-clip { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.xsr-more { display: block; margin: 8px 0 12px; text-decoration: none; }

@media (max-width: 520px) {
  .xsr-bar { grid-template-columns: 1fr auto; } .xsr-bar .bar { grid-column: 1 / -1; grid-row: 2; }
  .xsr-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .xsr-photos { grid-template-columns: 1fr; }
}

@media print {
  .xsr-photos { grid-template-columns: repeat(2, 1fr); }
  .xsr-stat, .xsr-photo, .xsr-quote, tr { break-inside: avoid; }
  .xsr-h { break-after: avoid; }
  .xsr-map-pt circle { fill: rgba(11, 31, 75, .55); stroke: #0B1F4B; }
}

/* voice */
.ai-tool { border: 1px solid #d9cfb6; background: #fff; border-radius: 10px; padding: 6px 9px; font-size: 16px; cursor: pointer; }
.ai-tool.on { background: #0B1F4B; border-color: #0B1F4B; filter: none; }
.ai-acts { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.ai-say { border: 1px solid #e6dcc4; background: #fff; color: #0B1F4B; border-radius: 999px; padding: 3px 10px; font-size: 12px; cursor: pointer; }
.ai-hints .chip.ai-brief { background: #0B1F4B; color: #fff; border-color: #0B1F4B; }
.xbr-card { border-left: 4px solid #C29A45; }
.xbr-text { margin: 8px 0 4px; line-height: 1.55; }