/* ───────────────────────── A ───────────────────────── */
.staff-a { padding: 28px 36px; max-width: 1400px; margin: 0 auto; }
.staff-a__head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 24px; }
.staff-a__crumb { font-size: 11px; font-family: var(--pos-font-mono); color: var(--color-text-secondary); letter-spacing: 0.05em; }
.staff-a__title { font-family: var(--pos-font-display); font-size: 28px; font-weight: 700; margin: 4px 0; letter-spacing: -0.02em; }
.staff-a__sub { font-size: 13px; color: var(--color-text-secondary); }
.staff-a__btn-primary { padding: 10px 16px; border-radius: 8px; border: 0; background: var(--color-primary); color: var(--color-btn-primary-text, #fff); font: inherit; font-weight: 700; font-size: 13px; cursor: pointer; }
.staff-a__group { margin-bottom: 22px; }
.staff-a__h2 { font-family: var(--pos-font-display); font-size: 14px; font-weight: 700; margin: 0 0 10px; letter-spacing: -0.01em; color: var(--color-text-secondary); text-transform: uppercase; }
.staff-a__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.staff-a__card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; padding: 14px 16px; cursor: pointer; }
.staff-a__card:hover { background: color-mix(in oklab, var(--color-text) 4%, var(--color-surface)); }
.staff-a__card--active { border-color: color-mix(in oklab, var(--color-success) 40%, var(--color-border)); }
.staff-a__card--off    { opacity: 0.78; }
.staff-a__card-row { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; }
.staff-a__avatar { position: relative; width: 44px; height: 44px; border-radius: 50%; background: color-mix(in oklab, var(--color-primary) 15%, var(--color-surface)); color: var(--color-primary); display: grid; place-items: center; font-family: var(--pos-font-mono); font-weight: 700; font-size: 13px; }
.staff-a__avatar-dot { position: absolute; bottom: 0; right: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--color-text-secondary); border: 2px solid var(--color-surface); }
.staff-a__avatar-dot.is-on   { background: var(--color-success); }
.staff-a__avatar-dot.is-warn { background: var(--color-warning); }
.staff-a__card-name { font-weight: 600; font-size: 14px; }
.staff-a__card-role { font-size: 12px; color: var(--color-text-secondary); margin-top: 2px; }
.staff-a__chip { padding: 3px 10px; border-radius: 999px; font-size: 10px; font-family: var(--pos-font-mono); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.staff-a__chip--on   { background: var(--color-success); color: #fff; }
.staff-a__chip--warn { background: var(--color-warning); color: var(--color-background); }
.staff-a__shift { font-size: 12px; color: var(--color-text-secondary); margin: 12px 0 8px; padding-top: 12px; border-top: 1px dashed var(--pos-divider); font-family: var(--pos-font-mono); }
.staff-a__card-actions { display: flex; gap: 6px; }
.staff-a__btn-ghost { padding: 6px 12px; border-radius: 6px; border: 1px solid var(--color-border); background: transparent; color: var(--color-text); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }

/* ───────────────────────── B ───────────────────────── */
.staff-b { padding: 18px 22px; font-family: var(--pos-font-mono); }
.staff-b__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.staff-b__title { font-size: 18px; font-weight: 700; margin: 0; letter-spacing: 0.02em; }
.staff-b__btn { padding: 6px 12px; border-radius: 6px; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); font: inherit; font-weight: 700; font-size: 11px; cursor: pointer; letter-spacing: 0.04em; margin-right: 4px; }
.staff-b__table { width: 100%; border-collapse: collapse; font-size: 12px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 6px; overflow: hidden; }
.staff-b__table th { text-align: left; padding: 8px 12px; color: var(--color-text-secondary); font-weight: 700; font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; border-bottom: 1px solid var(--pos-divider); background: color-mix(in oklab, var(--color-text) 5%, var(--color-surface)); }
.staff-b__table td { padding: 7px 12px; border-bottom: 1px solid var(--pos-divider); }
.staff-b__table tr:last-child td { border-bottom: 0; }
.staff-b__table tr.is-selected { background: color-mix(in oklab, var(--color-primary) 12%, transparent); }
.staff-b__table tbody tr { cursor: pointer; }
.staff-b__name { font-weight: 600; font-family: var(--pos-font-body); }
.staff-b__mono { font-variant-numeric: tabular-nums; }
.staff-b__chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 700; }
.staff-b__chip.is-on_shift  { background: var(--color-success); color: #fff; }
.staff-b__chip.is-on_break  { background: var(--color-warning); color: var(--color-background); }
.staff-b__chip.is-off_shift { background: color-mix(in oklab, var(--color-text) 15%, var(--color-surface)); color: var(--color-text); }
.staff-b__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.staff-b__actions { white-space: nowrap; }

/* ───────────────────────── C ───────────────────────── */
.staff-c { padding: 16px; max-width: 800px; margin: 0 auto; }
.staff-c__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.staff-c__title { font-family: var(--pos-font-display); font-size: 22px; font-weight: 700; margin: 0; letter-spacing: -0.02em; }
.staff-c__new { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--color-primary); color: var(--color-btn-primary-text, #fff); font-size: 22px; cursor: pointer; }
.staff-c__list { display: flex; flex-direction: column; gap: 8px; }
.staff-c__card { display: grid; grid-template-columns: 48px 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; cursor: pointer; }
.staff-c__card:hover { background: color-mix(in oklab, var(--color-text) 4%, var(--color-surface)); }
.staff-c__card.is-selected { border-color: var(--color-primary); }
.staff-c__avatar { position: relative; width: 48px; height: 48px; border-radius: 50%; background: color-mix(in oklab, var(--color-primary) 15%, var(--color-surface)); color: var(--color-primary); display: grid; place-items: center; font-family: var(--pos-font-mono); font-weight: 700; font-size: 14px; }
.staff-c__dot { position: absolute; bottom: 0; right: 0; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--color-surface); background: var(--color-text-secondary); }
.staff-c__dot.is-on_shift { background: var(--color-success); }
.staff-c__dot.is-on_break { background: var(--color-warning); }
.staff-c__name { font-weight: 600; font-size: 14px; }
.staff-c__role { font-size: 12px; color: var(--color-text-secondary); margin-top: 2px; }
.staff-c__btn { padding: 8px 14px; border-radius: 8px; border: 0; background: var(--color-primary); color: var(--color-btn-primary-text, #fff); font: inherit; font-weight: 700; font-size: 12px; cursor: pointer; }
.staff-c__empty { padding: 40px; text-align: center; color: var(--color-text-secondary); font-family: var(--pos-font-mono); font-size: 12px; }