/* Academic progress (public/js/progress-ui.js): admin page and teacher portal. */
.ap { --ap-up: var(--success, #16a34a); --ap-down: var(--danger, #dc2626); --ap-warn: var(--warning, #d97706); color: var(--text); }
.ap-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin: 4px 0 12px; }
.ap-toolbar label { display: block; font-size: 12px; color: var(--text-muted); margin-bottom: 3px; }
.ap-toolbar select, .ap-toolbar input { min-width: 160px; max-width: 100%; }
.ap-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; border-bottom: 1px solid var(--border); padding-bottom: 8px; }
.ap-tab { border: 1px solid var(--border); background: var(--card); color: var(--text-secondary); border-radius: 999px; padding: 6px 14px; font-size: 13px; cursor: pointer; }
.ap-tab[aria-selected="true"] { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600; }
.ap-note { font-size: 12px; color: var(--text-muted); margin: 4px 0 12px; line-height: 1.5; }
.ap-muted { color: var(--text-muted); }
.ap-error { color: var(--danger); padding: 10px 0; }
.ap-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-bottom: 14px; }
.ap-tile { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; background: var(--card); }
.ap-tile .ap-tile-label { font-size: 12px; color: var(--text-muted); }
.ap-tile .ap-tile-value { font-size: 22px; font-weight: 700; margin-top: 4px; color: var(--text); }
.ap-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; margin-bottom: 14px; }
.ap-card { border: 1px solid var(--border); border-radius: 10px; padding: 14px; background: var(--card); min-width: 0; margin-bottom: 14px; }
.ap-card h4 { margin: 0 0 8px; font-size: 14px; }
.ap-up { color: var(--ap-up); font-weight: 600; white-space: nowrap; }
.ap-down { color: var(--ap-down); font-weight: 600; white-space: nowrap; }
.ap-flat { color: var(--text-muted); white-space: nowrap; }
/* Badges wrap inside a narrow card rather than overflow it (a phone, a long label). */
.ap-badge { display: inline-block; max-width: 100%; border-radius: 999px; padding: 1px 8px; font-size: 11px; font-weight: 600; margin: 1px 4px 1px 0; white-space: normal; overflow-wrap: break-word; vertical-align: middle; }
.ap-badge-danger { background: var(--danger-bg); color: var(--danger); }
.ap-badge-warn { background: var(--warning-bg); color: var(--warning); }
.ap-badge-ok { background: var(--success-bg); color: var(--success); }
.ap-badge-info { background: var(--primary-light); color: var(--primary); }
.ap-badge-muted { background: var(--bg-alt); color: var(--text-muted); }
.ap-scroll { overflow-x: auto; max-width: 100%; }
.ap-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ap-table th, .ap-table td { padding: 7px 8px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.ap-table th { font-size: 12px; color: var(--text-muted); font-weight: 600; background: var(--bg-alt); position: sticky; top: 0; }
.ap-table td.ap-num, .ap-table th.ap-num { text-align: right; font-variant-numeric: tabular-nums; }
.ap-matrix td:first-child, .ap-matrix th:first-child { position: sticky; left: 0; background: var(--card); z-index: 1; min-width: 150px; }
.ap-matrix th:first-child { background: var(--bg-alt); }
.ap-cell { white-space: nowrap; font-variant-numeric: tabular-nums; }
.ap-cell small { display: block; font-size: 11px; }
.ap-cell-ns { color: var(--text-faint); font-style: italic; font-size: 12px; }
.ap-cell-declining { background: var(--danger-bg); }
.ap-link { background: none; border: 0; padding: 0; margin: 0; min-height: 0; height: auto; line-height: 1.4; box-shadow: none; color: var(--primary); cursor: pointer; font: inherit; text-align: left; }
.ap-link:hover { text-decoration: underline; }
.ap-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.ap-btn { border: 1px solid var(--border); background: var(--card); color: var(--text); border-radius: 6px; padding: 5px 10px; font-size: 12px; cursor: pointer; }
.ap-btn:hover { background: var(--card-hover); }
.ap-btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.ap-btn-primary:hover { background: var(--primary-hover); }
.ap-btn-danger { color: var(--danger); }
.ap-btn[disabled] { opacity: .55; cursor: default; }
.ap-chart { width: 100%; max-width: 760px; height: auto; display: block; }
.ap-chart .ap-grid { stroke: var(--border); stroke-width: 1; }
.ap-chart .ap-axis-label { fill: var(--text-muted); font-size: 11px; }
.ap-chart .ap-line { fill: none; stroke: var(--primary); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ap-chart .ap-point { fill: var(--primary); stroke: var(--card); stroke-width: 2; }
.ap-chart .ap-hit { fill: transparent; cursor: default; }
.ap-chart .ap-hit:hover + .ap-point, .ap-chart .ap-point:hover { r: 6; }
.ap-chart .ap-target { stroke: var(--ap-warn); stroke-width: 1.5; stroke-dasharray: 4 3; }
.ap-chart .ap-value-label { fill: var(--text); font-size: 11px; font-weight: 600; }
.ap-bars { display: flex; flex-direction: column; gap: 8px; }
.ap-bar-row { display: grid; grid-template-columns: minmax(70px, 110px) 1fr minmax(92px, auto); gap: 8px; align-items: center; font-size: 13px; }
.ap-bar-track { position: relative; height: 14px; background: var(--bg-alt); border-radius: 4px; }
.ap-bar-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--primary); border-radius: 0 4px 4px 0; min-width: 2px; }
.ap-bar-target { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--ap-warn); }
.ap-bar-value { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ap-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--text-muted); margin-top: 8px; }
.ap-legend i { display: inline-block; width: 14px; height: 3px; vertical-align: middle; margin-right: 4px; border-radius: 2px; }
.ap-modal { position: fixed; inset: 0; background: rgba(15, 23, 42, .45); display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; z-index: 1000; overflow-y: auto; }
.ap-modal-card { background: var(--card); color: var(--text); border-radius: 12px; padding: 18px; width: 100%; max-width: 560px; box-shadow: var(--shadow-lg); }
.ap-modal-card h3 { margin: 0 0 10px; }
.ap-form { display: grid; gap: 10px; }
.ap-form label { font-size: 12px; color: var(--text-muted); display: block; margin-bottom: 3px; }
.ap-form input, .ap-form select, .ap-form textarea { width: 100%; box-sizing: border-box; padding: 7px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--card); color: var(--text); font: inherit; }
.ap-form textarea { min-height: 60px; resize: vertical; }
.ap-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ap-picker { position: relative; min-width: 240px; max-width: 100%; }
.ap-picker input { width: 100%; box-sizing: border-box; }
.ap-picker-results { display: grid; gap: 2px; margin-top: 4px; max-height: 260px; overflow-y: auto; }
.ap-picker-results:empty { display: none; }
.ap-picker-item { display: block; width: 100%; text-align: left; border: 1px solid var(--border); background: var(--card); color: var(--text); border-radius: 6px; padding: 6px 8px; font: inherit; font-size: 13px; cursor: pointer; }
.ap-picker-item:hover, .ap-picker-item:focus-visible { background: var(--card-hover); }
.ap-year { margin-bottom: 18px; }
.ap-year h4 { margin: 0 0 6px; }
.ap-intv { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; background: var(--card); }
.ap-intv dl { display: grid; grid-template-columns: max-content 1fr; gap: 3px 10px; margin: 6px 0; font-size: 13px; }
.ap-intv dt { color: var(--text-muted); }
.ap-intv dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
/* Teacher portal on a phone: portal-ui.js stacks tables into cards (portal.css
   .portal-cards, label from data-label). Labels and values keep whole words:
   the label takes its natural width and the values share the rest, moving
   under it when there is no room, instead of breaking "Mathematics" or an ID. */
@media (max-width: 639px) {
  .ap-table.portal-cards tbody td { flex-wrap: wrap; align-items: baseline; justify-content: flex-end; gap: 4px 12px; overflow-wrap: break-word; word-break: normal; position: static; min-width: 0; }
  .ap-table.portal-cards tbody td::before { flex: 1 0 auto; max-width: 100%; text-align: left; overflow-wrap: normal; word-break: normal; }
  .ap-table.portal-cards tbody td > * { text-align: right; max-width: 100%; }
  .ap-table.portal-cards tbody td .ap-link { text-align: right; }
}
@media (max-width: 640px) {
  .ap-form-row { grid-template-columns: 1fr; }
  .ap-bar-row { grid-template-columns: 70px 1fr 84px; font-size: 12px; }
  .ap-tile .ap-tile-value { font-size: 18px; }
  .ap-modal { padding: 12px; }
}