/* Staff dashboard: same tokens as the public site, denser, with big targets for use at the chair. */

body.staff { background: var(--porcelain); }
.staff-app { padding: 0 var(--gutter) 3rem; max-width: 110rem; margin: 0 auto; }

.login-card { max-width: 24rem; margin: 3rem auto; }
.login-crest { width: 6rem; background: var(--ink); padding: 0.6rem; margin-bottom: 1rem; }
.login-card h1 { font-size: var(--step-4); margin-bottom: 1.25rem; }

.staff-top {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem;
  padding: 1rem 0; border-bottom: 2px solid var(--ink); margin-bottom: 1rem;
}
.staff-who { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.staff-name { font: 900 var(--step-3) / 1 var(--display); }
.location-tabs { display: flex; border: 2px solid var(--ink); }
.tab { font: 700 var(--step-1) / 1 var(--display); border: 0; background: transparent; padding: 0.5rem 0.9rem; min-height: 2.75rem; cursor: pointer; color: var(--ink); }
.tab.is-current { background: var(--ink); color: #fff; }
.staff-wait { margin: 0; font-weight: 600; }
.staff-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-left: auto; }
.staff-controls .button { font-size: var(--step-0); min-height: 2.75rem; }

.toggle { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; min-height: 2.75rem; padding: 0 0.5rem; cursor: pointer; }
.toggle input { width: 1.4rem; height: 1.4rem; min-height: 0; accent-color: var(--ink); }

.flash { padding: 0.75rem 1rem; margin: 0 0 1rem; font-weight: 600; }
.flash-error { background: var(--pole); color: #fff; }
.flash-ok { background: var(--ink); color: #fff; }

.staff-grid { display: grid; gap: 1.25rem; }
@media (min-width: 64rem) { .staff-grid { grid-template-columns: 1.1fr 1fr 1fr; align-items: start; } }

.panel { background: var(--paper); border: 2px solid var(--ink); padding: 1rem; min-width: 0; }
.panel h2 { font-size: var(--step-3); margin-bottom: 0.75rem; display: flex; align-items: center; gap: 0.5rem; }
.panel h3 { font-size: var(--step-2); }
.panel-chair { border-width: 3px; }
.count { background: var(--ink); color: #fff; font-size: 0.6em; padding: 0.15rem 0.45rem; }
.empty { color: var(--steel); }

.button-huge { min-height: 4rem; font-size: var(--step-3); width: 100%; }
.call-next .hint { margin-top: 0.6rem; }

.visit-list { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.75rem; }
.visit { border-top: 2px solid var(--ink); padding-top: 0.6rem; }
.visit-in-chair { border-top: 0; padding-top: 0; }
.visit-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 0.75rem; align-items: baseline; }
.visit-head h3 { font-size: var(--step-3); }
.visit-in-chair .visit-head h3 { font-size: var(--step-4); }
.badges { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.badge { font-size: 0.8rem; font-weight: 700; padding: 0.15rem 0.45rem; border: 1px solid var(--ink); }
.badge-ticket { background: var(--ink); color: #fff; }
.badge-here { background: #e3e7e5; }
.badge-late { border-color: var(--pole); color: var(--pole); }
.badge-live { background: var(--amber); border-color: var(--amber-dim); }
.visit-service { margin: 0.3rem 0 0.6rem; }
.visit-pictures { display: flex; gap: 0.6rem; margin-bottom: 0.6rem; }
.visit-pictures figure { margin: 0; }
.visit-pictures img { width: 6rem; height: 6rem; object-fit: cover; border: 2px solid var(--ink); }
.visit-in-chair .visit-pictures img { width: 9rem; height: 9rem; }
.visit-pictures figcaption { font-size: 0.8rem; color: var(--steel); }
.last-time { background: #e3e7e5; padding: 0.5rem 0.65rem; }
.visit .button-row { margin-top: 0.4rem; }
.visit .button { font-size: var(--step-0); min-height: 2.75rem; }
.visit-in-chair .button-huge { font-size: var(--step-2); }
.finish-form { margin-top: 0.5rem; }

.add-walkin { border-top: 2px dashed var(--ink); padding-top: 0.75rem; }
.add-walkin h3 { margin-bottom: 0.5rem; }
.add-walkin-fields { display: grid; gap: 0 0.75rem; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
.add-walkin-fields .field { margin-bottom: 0.6rem; }

.floor { border-top: 2px solid var(--ink); padding-top: 0.75rem; margin-top: 0.5rem; }
.floor ul { padding-left: 1.1rem; margin: 0.4rem 0; }
.stats { border-top: 2px solid var(--ink); padding-top: 0.75rem; margin-top: 1rem; }
.stats dl { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; margin: 0.5rem 0 0; }
.stats dt { color: var(--steel); font-size: var(--step--1); }
.stats dd { margin: 0; font: 800 var(--step-3) / 1 var(--display); }

.owner-panel, .account-panel { margin-top: 1.25rem; }
.account-panel summary { font: 800 var(--step-2) / 1 var(--display); cursor: pointer; min-height: 2.5rem; display: flex; align-items: center; }
.password-form { max-width: 24rem; margin-top: 0.75rem; }
.table-scroll { overflow-x: auto; margin-bottom: 1rem; }
.roster { border-collapse: collapse; min-width: 44rem; width: 100%; }
.roster th, .roster td { padding: 0.35rem; text-align: left; border-bottom: 1px solid var(--rule); }
.roster select { min-height: 2.5rem; padding: 0.3rem; font-size: 0.95rem; }