/* Attendance tab: sign-in card and records view. */
/* ---------- attendance view ---------- */
#attn{display:none}
body.view-attn #attn{display:block}
body.view-attn #app{display:none}
body.view-attn .board-only{display:none}

.lockwrap{max-width:430px;margin:70px auto;background:#fff;border:1px solid var(--line);border-radius:16px;
  overflow:hidden;box-shadow:0 4px 24px rgba(16,24,40,.07)}
.lockhead{background:radial-gradient(80% 160% at 0% 0%,rgba(226,0,116,.6) 0%,rgba(226,0,116,0) 65%),
    radial-gradient(70% 140% at 100% 100%,rgba(123,47,191,.45) 0%,rgba(123,47,191,0) 60%),linear-gradient(135deg,#2A1328,#1B1120);
  padding:26px 28px;color:#fff}
.lockhead h2{margin:0;font-size:19px;font-weight:750;letter-spacing:-.02em;display:flex;align-items:center;gap:10px}
.lockhead p{margin:7px 0 0;font-size:13px;color:rgba(255,255,255,.82);line-height:1.5}
.lockbody{padding:22px 28px 24px;display:flex;flex-direction:column;gap:14px}
.lockbody input{width:100%;padding:12px;border:1px solid var(--line);border-radius:10px;
  font-size:15px;font-family:inherit;box-sizing:border-box}
.lockbody input[type=password]{letter-spacing:.06em}
.lockbody input:focus{outline:none;border-color:var(--mag);box-shadow:0 0 0 3px var(--mag-soft)}
.lockbody label{display:block;font-size:13px;font-weight:600;color:var(--ink-2);margin-bottom:6px}
.lockid{display:flex;align-items:center;gap:9px;background:#F7F9FA;border:1px solid var(--line-2);
  border-radius:10px;padding:9px 11px;font-size:13px;font-weight:640;color:var(--ink-2)}
.lockid .chg{margin-left:auto;color:var(--mag);font-weight:700;font-size:12px;cursor:pointer}
.lockhint{font-size:12px;color:var(--ink-4);line-height:1.5}

/* role badges */
.rbadge{display:inline-flex;align-items:center;font-size:10px;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;border-radius:999px;padding:3px 8px;flex:none}
.rbadge.admin{background:#FDE7F3;color:#A1004F}
.rbadge.manager{background:#E6F0FB;color:#1A4E8A}
.rbadge.viewer{background:#EDF0F3;color:#4B535B}
.rbadge.disabled{background:#FDF2F2;color:#A93028}
.rbadge.invited{background:#FFF1F0;color:#8A0A12}
.urow{display:flex;align-items:center;gap:10px;padding:12px 2px;border-bottom:1px solid var(--line-2)}
.urow:last-child{border-bottom:0}
.urow .uinfo{flex:1;min-width:0}
.urow .uname{font-size:13.5px;font-weight:700;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.urow .umail{font-size:11.5px;color:var(--ink-4);margin-top:2px;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.urow select{width:auto;padding:6px 8px;font-size:12px}
.lockerr{background:#FDF2F2;border:1px solid #F6D2CE;color:#A93028;border-radius:9px;padding:9px 12px;
  font-size:12.5px;font-weight:600;display:none}
.lockerr.on{display:block}

.atop{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.atop h2{margin:0;font-size:22px;font-weight:750;letter-spacing:-.022em}
.atop p{margin:4px 0 0;font-size:13px;color:var(--ink-3)}
.atop-sp{flex:1}

.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(288px,1fr));gap:12px}
.ecard{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 17px;
  box-shadow:0 1px 2px rgba(16,24,40,.04);border-left:4px solid var(--sc,#D7DCE1)}
.ecard.ok{--sc:#0E8A5F}
.ecard.warn{--sc:#D70015}
.ecard.term{--sc:#B42318}
.ecard.abandon{--sc:#7A0F0A;background:#FFFAFA}
.ehead{display:flex;align-items:center;gap:11px}
.ename{font-size:15px;font-weight:700;letter-spacing:-.015em}
.erole{font-size:11.5px;color:var(--ink-4);font-weight:600;margin-top:1px}
.estat{margin-top:13px;display:flex;gap:8px}
.sbox{flex:1;background:#F7F9FA;border:1px solid var(--line-2);border-radius:10px;padding:9px 10px;text-align:center}
.sbox b{display:block;font-size:19px;font-weight:750;letter-spacing:-.02em;line-height:1.15}
.sbox span{display:block;font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-4);margin-top:3px;line-height:1.3}
.sbox.hot{background:#FFF1F0;border-color:#FFD3D0}
.sbox.hot b{color:#D70015}
.sbox.bad{background:#FDF2F2;border-color:#F6D2CE}
.sbox.bad b{color:#B42318}
.sflag{margin-top:12px;border-radius:9px;padding:9px 11px;font-size:12px;font-weight:650;line-height:1.4;
  display:flex;gap:7px;align-items:flex-start}
.sflag.ok{background:#EAF7F1;color:#0A6B4A}
.sflag.warn{background:#FFF1F0;color:#8A0A12}
.sflag.term{background:#FDF2F2;color:#A93028}
.sflag.abandon{background:#7A0F0A;color:#fff}
.sflag .fi{font-weight:800;flex:none}
.snote{margin-top:8px;font-size:11.5px;color:var(--ink-4);line-height:1.45}

.sect{margin-top:26px}
.secth{display:flex;align-items:center;gap:12px;margin-bottom:11px}
.secth h3{margin:0;font-size:15px;font-weight:700;letter-spacing:-.015em}
.secth .sp{flex:1}

.ltable{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.lrow{display:grid;grid-template-columns:104px 1fr 190px 96px 1fr 40px;gap:12px;padding:11px 15px;
  border-bottom:1px solid var(--line-2);font-size:13px;align-items:center}
.lrow:last-child{border-bottom:0}
.lrow.lhead{background:#FBFCFD;font-size:10.5px;font-weight:750;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-4);border-bottom:1px solid var(--line)}
.lrow .who{display:flex;align-items:center;gap:8px;font-weight:620;min-width:0}
.lrow .who span.t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lrow .nt{color:var(--ink-4);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lrow .del{border:0;background:transparent;color:var(--ink-4);cursor:pointer;font-size:16px;line-height:1;
  justify-self:end;border-radius:6px;padding:2px 6px}
.lrow .del:hover{color:#B42318;background:#FDF2F2}
.tchip{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:11px;
  font-weight:680;border:1px solid transparent;white-space:nowrap}
.tchip.exc{background:#EAF7F1;border-color:#C7E9D8;color:#0A6B4A}
.tchip.une{background:#FFF1F0;border-color:#FFD3D0;color:#8A0A12}
.tchip.early{background:#F3EEFC;border-color:#DFD3F6;color:#5B2DA3}
.tchip.ncns{background:#FDF2F2;border-color:#F6D2CE;color:#A93028}
.tchip.pres{background:#F1F4F7;border-color:#E2E7EC;color:#4A5158}
.yn{font-size:11.5px;font-weight:650;color:var(--ink-3)}
.yn.no{color:#B42318}
.empty-row{padding:28px 16px;text-align:center;color:var(--ink-4);font-size:13px}

.policy{margin-top:26px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 20px}
.policy h4{margin:0 0 10px;font-size:12px;font-weight:750;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-4)}
.policy ul{margin:0;padding-left:18px;font-size:12.5px;color:var(--ink-2);line-height:1.75}
.policy b{color:var(--ink)}

@media(max-width:900px){
  .lockwrap{margin:26px auto;border-radius:14px}
  .lockhead{padding:20px 20px}
  .lockhead h2{font-size:17px}
  .lockbody{padding:18px 20px 20px}
  .lockbody input[type=password]{font-size:16px}   /* stops iOS zooming on focus */

  .atop{gap:10px;margin-bottom:14px}
  .atop h2{font-size:19px}
  .atop p{font-size:12px}
  .atop-sp{display:none}
  .atop .btn{flex:1}

  .cards{grid-template-columns:1fr;gap:10px}
  .ecard{padding:14px 15px}
  .sbox b{font-size:17px}
  .sbox span{font-size:9px}

  .sect{margin-top:20px}
  /* each entry becomes a stacked card instead of a squashed table row */
  .ltable{border-radius:12px}
  .lrow{grid-template-columns:1fr auto;gap:7px 10px;padding:13px 14px;align-items:center}
  .lrow.lhead{display:none}
  .lrow > div:nth-child(1){grid-column:1;grid-row:1;font-size:12.5px;font-weight:700;color:var(--ink-3)}
  .lrow .del{grid-column:2;grid-row:1;justify-self:end;font-size:20px;padding:2px 6px}
  .lrow .who{grid-column:1 / -1;grid-row:2;font-size:14px}
  .lrow > div:nth-child(3){grid-column:1;grid-row:3}
  .lrow .yn{grid-column:2;grid-row:3;justify-self:end;font-size:11.5px}
  .lrow .yn::before{content:'Notified ';color:var(--ink-4);font-weight:600}
  .lrow .nt{grid-column:1 / -1;grid-row:4;white-space:normal;font-size:12.5px;line-height:1.45}
  .lrow .nt:empty{display:none}

  .policy{padding:16px;margin-top:20px}
  .policy ul{font-size:12px;padding-left:16px}
}

/* team manager rows */
.team-row{gap:10px;padding:6px 8px}
.team-row .tname{flex:1;min-width:0;font-weight:600}
.team-row select{width:auto;min-width:120px;padding:8px 10px}
.team-rm{min-height:36px;padding:0 12px;font-size:13px}

.team-row{flex-wrap:wrap}
.team-row .tname{display:flex;flex-direction:column}
.team-row .tname small{font-size:12px;font-weight:500;color:var(--ink-3)}
.pos-add{display:flex;gap:8px;margin-top:9px}
.pos-add input{flex:1}
.pos-n{margin-left:auto;margin-right:8px;font-size:12px;color:var(--ink-3)}
@media(max-width:900px){
  .team-row .tname{flex-basis:calc(100% - 40px)}
  .team-row select{flex:1}
}