/* Course and learning-path assignments (academy/assignments). Every colour is
   a token from styles.css, so the dark theme and tenant accents follow for
   free; the status chips pair colour with a glyph and a label, never colour
   alone. Nothing here may push the page wider than its viewport: only the
   board's own region scrolls, horizontally, and it is keyboard-focusable
   while it overflows. */

.achip{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:700;
  padding:2px 8px;border-radius:999px;border:1px solid var(--edge);background:var(--raise);color:var(--ink-2);
  white-space:nowrap}
.achip .glyph{font-size:11px}
.achip-complete{background:var(--good-wash);border-color:var(--good);color:var(--good)}
.achip-overdue{background:var(--bad-wash);border-color:var(--bad);color:var(--bad)}
.achip-due_soon{background:var(--accent-wash);border-color:var(--accent);color:var(--accent-deep)}
.achip-in_progress{background:var(--raise);border-color:var(--edge);color:var(--ink)}
.achip-not_started{background:transparent;border:1px dashed var(--edge);color:var(--mute)}

/* ---- assign screen ---- */
.assign-step{margin:18px 0}
.assign-step h2{font-size:16px;margin:0 0 10px}
.assign-controls{display:flex;flex-wrap:wrap;gap:10px;align-items:end;margin-bottom:10px}
.assign-controls label{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:650;color:var(--ink-2)}
.assign-controls input,.assign-controls select{min-width:0}
.assign-controls input[type="search"]{width:min(230px,100%)}
.assign-controls select{max-width:100%}
.assign-roster{list-style:none;margin:0;padding:0;max-height:320px;overflow-y:auto;border:1px solid var(--grid);
  border-radius:10px;background:var(--surface)}
.assign-roster li{border-bottom:1px solid var(--grid)}
.assign-roster li:last-child{border-bottom:none}
.assign-roster li.muted{padding:10px 12px;color:var(--mute)}
.assign-person{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;padding:8px 12px;cursor:pointer}
.assign-person:hover{background:var(--raise)}
.assign-person input{flex:none;transform:translateY(1px)}
.assign-person-name{font-weight:650}
.assign-person-meta{font-size:12px;color:var(--mute)}
.assign-count{margin:8px 0 0}
.assign-problems ul{margin:6px 0 0;padding-left:20px}
#view .assign-page .manager-actions{margin-top:14px}

/* ---- compliance board ---- */
.board-controls{margin:6px 0 4px}
.board-controls select{max-width:100%}
.board-inactive-label{flex-direction:row!important;align-items:center;gap:6px;padding-bottom:6px}
.board-totals{margin:6px 0 10px}
.board-mount{position:relative}
.scroll-hint{margin:4px 0 0;font-size:12px}
.board-scroll{overflow-x:auto;max-width:100%;border:1px solid var(--grid);border-radius:10px;
  -webkit-overflow-scrolling:touch}
.board-scroll:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.board-table{margin:0;min-width:100%;border-collapse:separate;border-spacing:0;width:max-content;max-width:none}
.board-table th,.board-table td{border-bottom:1px solid var(--grid);border-right:1px solid var(--grid);
  padding:8px 10px;text-align:left;vertical-align:top;font-size:13px}
.board-table thead th{position:sticky;top:0;background:var(--surface);z-index:2}
.board-table tfoot td,.board-table tfoot th{border-top:2px solid var(--edge);border-bottom:none;font-weight:650;color:var(--ink-2)}
.board-item-head{min-width:150px;max-width:220px}
.board-item-title{display:block;font-weight:700}
.board-item-kind{display:block;font-size:11px;color:var(--mute);font-weight:600}
.board-person-head{position:sticky;left:0;background:var(--surface);z-index:2}
.board-person{position:sticky;left:0;background:var(--surface);z-index:1;min-width:130px;max-width:190px;
  font-weight:650;text-align:left}
.board-person-name{display:block}
.board-person-meta{display:block;font-size:11px;color:var(--mute);font-weight:500}
.board-cell{min-width:130px}
.board-cell .achip{margin-bottom:4px}
.board-cell-meta{display:flex;flex-direction:column;gap:1px}
.board-cell-due{font-size:11.5px;color:var(--ink-2)}
.board-cell-progress{font-size:11px;color:var(--mute)}
.board-empty{color:var(--mute)}
.board-total{font-size:11.5px;color:var(--ink-2);white-space:nowrap}

/* the first column stays readable against the scrolled columns on top of it */
.board-table tbody tr:hover .board-person{background:var(--raise)}

/* ---- rules ---- */
.rule-list{display:flex;flex-direction:column;gap:14px;margin:14px 0}
.rule-card.inactive{opacity:.72}
.rule-head{display:flex;align-items:center;gap:10px;justify-content:space-between}
.rule-head h2{font-size:15px;margin:0}
.rule-sentence{margin:8px 0 2px}
.rule-days{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:650;color:var(--ink-2)}
.rule-days input{width:5.5em}
.rule-create{margin-top:20px}
.rule-create h2{font-size:15px}

/* ---- learner panel ---- */
.assigned-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.assigned-item{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;justify-content:space-between}
.assigned-link{font-weight:650;color:var(--ink);text-decoration:none}
.assigned-link:hover{color:var(--accent-deep);text-decoration:underline}
.assigned-meta{display:inline-flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:11.5px;color:var(--mute)}
.assigned-kind{font-weight:650}
.assigned-due:empty{display:none}

/* ---- person panel ---- */
.person-assignments{margin-top:8px}
.person-assignments td .person-due{width:9.5em;margin-right:6px}

/* ---- narrow screens ---- */
@media (max-width:640px){
  .assign-controls{align-items:stretch}
  .assign-controls input[type="search"]{width:100%}
  .assigned-item{flex-direction:column;gap:2px}
  /* the board keeps its own horizontal scroll; only its cells compress */
  .board-item-head{min-width:120px;max-width:160px}
  .board-person{min-width:110px;max-width:150px}
}