/* ============================================================================
   crew.css — tweaks specific to the Crew module ONLY.
   No fonts/colors/global styles here (core.css owns all tokens).
   Crew is the EMPLOYEES · ACCESS · PAYROLL · HR · PRESENCE hub: a top tab bar
   swaps a host panel. Everything leans on documented .card/.kpi/.table/.list/
   .pdot/.role-badge classes; this file adds the tab bar, roster/access/payroll
   tables, leave bars, onboarding, and the presence board. All colors via
   var(--...) tokens — zero hardcoded hex.
   ========================================================================== */

/* ── TAB BAR ────────────────────────────────────────────────────────────── */
.crew-tabs{
  display:flex;gap:5px;flex-wrap:wrap;
  margin-bottom:var(--gap);padding-bottom:2px;
  border-bottom:1px solid var(--border);
}
.crew-tab{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 15px;border-radius:9px 9px 0 0;flex:none;
  color:var(--text-muted);border:1px solid transparent;border-bottom:none;
  font-size:13px;font-weight:600;letter-spacing:.1px;white-space:nowrap;
  transition:all .15s var(--ease);position:relative;top:1px;
}
.crew-tab .crew-tab-ico{font-size:14px;line-height:1}
.crew-tab:hover{background:var(--panel);color:var(--text)}
.crew-tab.active{
  background:var(--panel-hi);color:var(--text);
  border-color:var(--border-hi);border-bottom-color:var(--panel-hi);
  box-shadow:inset 0 2px 0 var(--accent1);
}
.crew-tab.active span:last-child{color:var(--accent1)}

.crew-host{animation:viewIn .32s var(--ease)}
.crew-panel{display:block}

/* ── KPI STRIP (per tab) ────────────────────────────────────────────────── */
.crew-kpis{margin-bottom:var(--gap)}
.crew-kpi{display:flex;flex-direction:column;gap:3px}
.crew-kpi .kpi-sub{font-size:11px;color:var(--text-faint);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── SHARED: member cell + tables ───────────────────────────────────────── */
.crew-tablewrap{max-height:440px;overflow-y:auto;overflow-x:auto}
.crew-tablewrap .table{min-width:560px}
.crew-tablewrap .table thead th{position:sticky;top:0;background:var(--panel);z-index:1}
.crew-roster tbody tr{cursor:pointer}

.crew-member{display:flex;align-items:center;gap:10px;min-width:0}
.crew-member .avatar{width:30px;height:30px;font-size:11px;flex:none}
.crew-mwrap{display:flex;flex-direction:column;min-width:0}
.crew-mname{font-weight:600;color:var(--text);white-space:nowrap}
.crew-mname small{color:var(--text-faint);font-weight:400}
.crew-memail{font-size:10.5px;color:var(--text-faint);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:200px}

/* department tag with a colored leading dot */
.crew-dept{display:inline-flex;align-items:center;gap:6px}
.crew-dept i{width:7px;height:7px;border-radius:50%;flex:none;box-shadow:0 0 6px currentColor}

/* presence cell */
.crew-presence{display:inline-flex;align-items:center;gap:8px;font-size:12px}

/* ── ACCESS TAB ─────────────────────────────────────────────────────────── */
.crew-gate-note{margin-bottom:var(--gap)}

/* form fields (token-only inputs) */
.crew-field{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}
.crew-flabel{font-family:var(--font-mono);font-size:9px;letter-spacing:2px;
  text-transform:uppercase;color:var(--text-faint)}
.crew-input{
  width:100%;background:var(--bg);border:1px solid var(--border);
  border-radius:8px;padding:9px 11px;font-size:13px;color:var(--text);
  outline:none;transition:border-color .16s var(--ease);font-family:inherit}
.crew-input:hover{border-color:var(--border-hi)}
.crew-input:focus{border-color:var(--accent1);box-shadow:0 0 0 1px var(--accent-soft)}
.crew-input:disabled{opacity:.5;cursor:not-allowed}
select.crew-input{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--text-faint) 50%),linear-gradient(135deg,var(--text-faint) 50%,transparent 50%);
  background-position:calc(100% - 16px) 52%,calc(100% - 11px) 52%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:30px}
.crew-rolesel{min-width:118px;padding:6px 28px 6px 10px;font-size:12px}

.crew-sep-login{display:flex;align-items:center;gap:9px;
  font-size:11.5px;color:var(--text-muted);line-height:1.4;
  padding:10px 11px;border-radius:9px;background:var(--bg2);border:1px solid var(--border)}
.crew-sep-login .pdot{flex:none}
.crew-sep-login b{color:var(--text)}

/* locked (gated) controls */
.crew-locked{opacity:.45;cursor:not-allowed}
.crew-locked:hover{transform:none;border-color:var(--border);background:var(--panel)}

/* permission reference */
.crew-permlist{display:flex;flex-direction:column;gap:9px}
.crew-permrow{display:flex;align-items:center;gap:10px;padding:5px 0;
  border-bottom:1px solid var(--border)}
.crew-permrow:last-child{border-bottom:none}
.crew-permrow .role-badge{flex:none;min-width:62px;justify-content:center}
.crew-permdesc{font-size:12px;color:var(--text-muted);line-height:1.35}

.crew-loginfo .stat-row{padding:8px 0}
.crew-login-ind{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--text-muted)}

/* ── PAYROLL TAB ────────────────────────────────────────────────────────── */
.crew-payroll-table .crew-payfoot td{
  border-top:1px solid var(--border-hi);border-bottom:none;
  background:var(--bg2);font-weight:600}
.crew-payroll-table tfoot{position:sticky;bottom:0}
.crew-paynote{margin-top:0}
.crew-paynote .kpi-sub{line-height:1.5;max-width:560px}

/* ── HR TAB ─────────────────────────────────────────────────────────────── */
.crew-leave{display:flex;align-items:center;gap:10px;min-width:160px}
.crew-leave-bar{flex:1;height:7px}
.crew-leave-num{font-family:var(--font-mono);font-size:11px;color:var(--text);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.crew-leave-num small{color:var(--text-faint)}

.crew-onb-list{display:flex;flex-direction:column}
.crew-hr-docs .list-item .li-ico{font-size:16px}

/* ── PRESENCE TAB ───────────────────────────────────────────────────────── */
.crew-mypresence{margin-bottom:var(--gap)}
.crew-presence-set{display:flex;gap:8px;flex-wrap:wrap}
.crew-pchip{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;border-radius:9px;flex:none;
  color:var(--text-muted);border:1px solid var(--border);background:var(--panel);
  font-size:12.5px;font-weight:600;transition:all .15s var(--ease)}
.crew-pchip:hover{border-color:var(--border-hi);color:var(--text)}
.crew-pchip.active{
  background:var(--panel-hi);color:var(--text);border-color:var(--border-hi);
  box-shadow:inset 0 0 0 1px var(--accent-soft)}

.crew-board{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
.crew-bcol{
  background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:13px;display:flex;flex-direction:column;gap:3px}
.crew-bcol-head{display:flex;align-items:center;gap:8px}
.crew-bcol-head .pdot{flex:none}
.crew-bcol-title{font-family:var(--font-display);font-size:13px;font-weight:600;flex:1}
.crew-bcol-sub{font-family:var(--font-mono);font-size:9px;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--text-faint);margin-bottom:6px}
.crew-bcol-body{display:flex;flex-direction:column;gap:8px;min-height:40px}
.crew-bcard{
  display:flex;align-items:center;gap:10px;padding:9px 10px;
  background:var(--panel);border:1px solid var(--border);border-radius:9px;
  cursor:pointer;transition:border-color .16s var(--ease),transform .16s var(--ease)}
.crew-bcard:hover{border-color:var(--border-hi);transform:translateX(2px)}
.crew-bcard .avatar{flex:none}
.crew-bmeta{display:flex;flex-direction:column;min-width:0}
.crew-bname{font-size:12.5px;font-weight:600;color:var(--text);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.crew-bname small{color:var(--text-faint);font-weight:400}
.crew-btitle{font-size:10.5px;color:var(--text-muted);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.crew-bempty{font-size:11px;color:var(--text-faint);font-style:italic;padding:6px 2px}

/* ── RESPONSIVE NUDGES ──────────────────────────────────────────────────── */
@media (max-width:980px){
  .crew-board{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:820px){
  .crew-tablewrap{max-height:none}
  .crew-tab{padding:8px 12px;font-size:12px}
}
@media (max-width:560px){
  .crew-board{grid-template-columns:1fr}
  .crew-tab span:not(.crew-tab-ico){display:none}
  .crew-tab{padding:9px 13px}
  .crew-tab .crew-tab-ico{font-size:16px}
}