/* Bug-sweep fixes, team c (Oct 2026). Loaded after si.css. */

/* C1: why you are on the login screen ("Please log in again to sync") */
.login-msg{margin:-4px 0 14px;padding:10px 12px;border-radius:var(--radius-sm);background:var(--warn-tint);
  color:var(--warn-text);font-size:13.5px;font-weight:600;line-height:1.35;border:1px solid rgba(234,179,8,.35)}

/* C18: shift-note pills next to "Edited" (History, Edit time, Payroll time sheet) */
.staff-name-cell{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px}
.staff-note-pill{white-space:nowrap}
.staff-dtr-flags{white-space:nowrap}
.staff-dtr-flags .pill + .pill{margin-left:4px}

/* C36: Payroll card header on phones — title + subtitle get the full width, the two CSV buttons
   wrap underneath instead of squeezing the text; the Period KPI spans the row and may wrap. */
@media (max-width:700px){
  .staff-pay-card .card-head{flex-wrap:wrap;align-items:flex-start}
  .staff-pay-card .card-head>div:first-child{flex:1 1 100%;min-width:0}
  .staff-pay-card .card-head .actions{flex-wrap:wrap;width:100%}
  .staff-pay-card .card-head .actions .btn{flex:1 1 auto;justify-content:center}
  .staff-pay-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .staff-pay-kpi:first-child,.staff-pay-kpi:last-child{grid-column:1 / -1}
  .staff-pay-kpi:first-child b{white-space:normal;overflow:visible;text-overflow:clip;font-size:16px}
}

/* C-R5: Settings → Users on phones — each user becomes a small card (name + status on top, role
   pills, then the action buttons wrapping inside the screen) instead of a wide table whose buttons
   pushed the names out of view. The card header's two Add buttons wrap under the subtitle. */
@media (max-width:480px){
  .set-users-card .card-head{flex-wrap:wrap;align-items:flex-start}
  .set-users-card .card-head>div:first-child{flex:1 1 100%;min-width:0}
  .set-users-card .card-head .actions{width:100%;flex-wrap:wrap}
  .set-users-card .card-head .actions .btn{flex:1 1 auto;justify-content:center}
  .set-users-card .table-wrap{overflow:visible}
  .set-users-card table.table{display:block;width:100%;min-width:0}
  .set-users-card table.table thead{display:none}
  .set-users-card table.table tbody{display:block}
  .set-users-card table.table tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 10px;
    padding:12px 16px;border-bottom:1px solid var(--line, #eee)}
  .set-users-card table.table td{display:block;padding:0;border:0;min-width:0;width:auto !important;text-align:left}
  .set-users-card table.table td:nth-child(1){grid-column:1;grid-row:1;overflow-wrap:anywhere}
  .set-users-card table.table td:nth-child(3){grid-column:2;grid-row:1;justify-self:end}
  .set-users-card table.table td:nth-child(2){grid-column:1 / -1}
  .set-users-card table.table td.set-hide-sm{display:none}
  .set-users-card table.table td:last-child{grid-column:1 / -1}
  .set-users-card .set-role{display:flex;flex-wrap:wrap;gap:4px}
  .set-users-card .set-actions{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:6px}
  .set-users-card table.table tr:hover > td{background:transparent}
}