/* Wahloon SiteSafe: supervisor screens 21-24 (Compliance Dashboard, Team
   Roster, Worker Detail, Assign Training). Sizes follow the app's own real
   viewport scale rather than the 280px design board mock frame, the same
   translation app.css already made for the rest of the build. Colours,
   tokens and shared classes (.avatar, .stamp, .stat-row, .stat-box,
   .hist-row, .section-label, .btn-primary) are reused from app.css. */

/* ---------- compliance dashboard ---------- */
.dash-head{padding:22px 18px 6px;}
.dash-eyebrow{font-family:var(--mono);font-size:11px;color:var(--steel);letter-spacing:.05em;text-transform:uppercase;}
.dash-title{font-family:var(--display);font-weight:700;font-size:23px;margin:6px 0 4px;}
.dash-sub{font-size:13px;color:var(--steel-dark);}

.dash-stat-row{display:flex;gap:10px;padding:14px 18px 4px;}
.dash-stat{flex:1;border-radius:12px;padding:14px 12px;text-align:center;}
.dash-stat.ok{background:var(--green-tint);}
.dash-stat.warn{background:#FBF1DF;}
.dash-stat.bad{background:var(--crimson-tint);}
.dash-stat .num{font-family:var(--display);font-weight:700;font-size:21px;}
.dash-stat.ok .num{color:var(--green);}
.dash-stat.warn .num{color:var(--amber);}
.dash-stat.bad .num{color:var(--crimson);}
.dash-stat .lbl{font-family:var(--mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--steel-dark);margin-top:4px;line-height:1.3;}

.section-label button{color:inherit;}

.dash-alert-list{padding:6px 18px 16px;display:flex;flex-direction:column;gap:9px;}
.dash-alert-item{display:flex;gap:11px;align-items:center;background:#fff;border:1px solid var(--line);border-left:3px solid var(--crimson);border-radius:10px;padding:12px 13px;width:100%;text-align:left;}
.dash-alert-item .avatar{width:36px;height:36px;font-size:13px;margin-bottom:0;flex-shrink:0;}
.dash-alert-item .a-name{font-size:14px;font-weight:700;color:var(--ink);}
.dash-alert-item .a-detail{font-size:12px;color:var(--steel-dark);margin-top:2px;}

/* ---------- team roster ---------- */
.filter-chip-row{display:flex;gap:8px;padding:14px 18px;overflow-x:auto;flex-shrink:0;}
.filter-chip{font-family:var(--mono);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;padding:8px 14px;border-radius:20px;background:#fff;border:1.5px solid var(--line);color:var(--steel-dark);white-space:nowrap;flex-shrink:0;}
.filter-chip.active{background:var(--ink);border-color:var(--ink);color:#fff;}

.roster-list{padding:0 18px 18px;display:flex;flex-direction:column;gap:9px;}
.roster-item{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 13px;width:100%;text-align:left;}
.roster-item .avatar{margin-bottom:0;flex-shrink:0;}
.roster-body{flex:1;min-width:0;}
.roster-name{font-size:14.5px;font-weight:700;color:var(--ink);}
.roster-role{font-family:var(--mono);font-size:11px;color:var(--steel-dark);margin-top:3px;}
.roster-pct{flex-shrink:0;}

/* ---------- worker detail ---------- */
.stat-row.three{display:flex;gap:9px;padding:16px 18px 6px;}
.stat-num-bad{color:var(--crimson);}

.worker-actions{padding:0 18px;display:flex;gap:9px;margin-top:16px;}
.worker-actions .btn-primary,
.worker-actions .btn-secondary{flex:1;margin-top:0;}
.btn-secondary{background:#fff;color:var(--ink);border:1.5px solid var(--line);border-radius:9px;padding:13px;font-family:var(--display);font-weight:600;font-size:14px;text-align:center;display:flex;align-items:center;justify-content:center;gap:6px;}
.btn-secondary .ic{font-size:15px;}

.reminder-note{font-family:var(--mono);font-size:11.5px;color:var(--steel-dark);margin-top:10px;}

/* Training history rows in this view are read-only, not a link into the
   viewed worker's own course player, so they stay plain divs, not buttons. */
.worker-history .hist-row{cursor:default;}

/* ---------- assign training ---------- */
.assign-section{padding:16px 18px 4px;}
.assign-label{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--steel-dark);margin-bottom:9px;}

.select-course{width:100%;text-align:left;background:#fff;border:1.5px solid var(--line);border-radius:10px;padding:14px 15px;font-size:14.5px;color:var(--ink);font-weight:600;display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:16px;}
.select-course .placeholder{color:var(--steel);font-weight:500;}
.select-course .ic{color:var(--steel);flex-shrink:0;}

.course-pick-list{padding:6px 18px 18px;display:flex;flex-direction:column;}
.course-pick-item{display:flex;align-items:center;gap:12px;padding:13px 0;width:100%;text-align:left;border-bottom:1px solid var(--line);}
.course-pick-item .cp-icon{width:36px;height:36px;border-radius:9px;background:var(--crimson-tint);color:var(--crimson);display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0;}
.course-pick-item .cp-title{font-size:14px;font-weight:600;flex:1;}
.course-pick-item .cp-check{color:var(--crimson);flex-shrink:0;}

/* The board mocked four workers here, so its Due Date, Mandatory switch and
   Assign button all sat on screen at once. The real roster is 42, which would
   push those three controls a long way down the page. Capping the list and
   letting it scroll inside itself keeps the whole form reachable without
   changing the order the board set out. */
.worker-check-list{
  display:flex; flex-direction:column; gap:8px; margin-bottom:16px;
  max-height:296px; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:2px; border-radius:10px;
}
.worker-check-item{display:flex;align-items:center;gap:11px;background:#fff;border:1.5px solid var(--line);border-radius:10px;padding:11px 13px;width:100%;text-align:left;}
.worker-check-item.checked{border-color:var(--crimson);background:var(--crimson-tint);}
.chkbox{width:19px;height:19px;border-radius:5px;border:1.5px solid var(--steel);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:11px;color:#fff;}
.worker-check-item.checked .chkbox{background:var(--crimson);border-color:var(--crimson);}
.wname{font-size:13.5px;font-weight:600;color:var(--ink);flex:1;min-width:0;}
.wname .wsub{display:block;font-family:var(--mono);font-size:10.5px;color:var(--steel-dark);font-weight:500;margin-top:2px;text-transform:none;letter-spacing:0;}

.due-choice-row{display:flex;gap:8px;margin-bottom:12px;}
.due-choice{flex:1;font-family:var(--mono);font-size:11.5px;font-weight:600;padding:9px 6px;border-radius:9px;background:#fff;border:1.5px solid var(--line);color:var(--steel-dark);text-align:center;}
.due-choice.active{background:var(--ink);border-color:var(--ink);color:#fff;}
.due-input{background:#fff;border:1.5px solid var(--line);border-radius:10px;padding:13px 15px;font-family:var(--mono);font-size:13px;color:var(--ink);margin-bottom:16px;}

.mand-row{display:flex;justify-content:space-between;align-items:center;gap:10px;background:#fff;border:1.5px solid var(--line);border-radius:10px;padding:13px 15px;margin-bottom:18px;width:100%;text-align:left;}
.mand-row .m-lbl{font-size:14px;font-weight:600;color:var(--ink);}
.mand-row .m-sub{font-size:12px;color:var(--steel-dark);margin-top:3px;}

/* The learner side of the Mark as Mandatory switch on screen 24. Lives here
   rather than in app.css because it exists only because of the supervisor
   assign flow. */
.locked-note{
  background:var(--crimson-tint); border:1.5px solid #F0CBD0; border-radius:11px;
  padding:14px 15px; margin-bottom:12px;
}
.locked-head{
  display:flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:var(--crimson); margin-bottom:7px;
}
.locked-body{ font-size:13.5px; line-height:1.55; color:var(--steel-dark); }
.locked-body b{ color:var(--ink); }