/* (manage users) The Users page (users.js), ported from the district website's user management (AdminUsers.tsx,
   RoleBadge.tsx, ConfirmDialog.tsx): its card, table, badges, centered modals, confirm dialog and bulk paste preview, at
   its sizes, in the portal's navy and the explorer's type. */
.users-page { max-width: 64rem; margin: 0 auto; }
.users-status { min-height: 1.25rem; margin: 0 0 0.75rem; font-size: var(--type-secondary); color: var(--color-navy-700); }
.users-status:empty { margin: 0; min-height: 0; }
.users-status[data-tone="bad"] { color: #dc2626; }

/* the card: white, 16px corners, a hairline and a soft shadow */
.users-card { overflow: hidden; border: 1px solid rgba(7, 37, 59, 0.08); border-radius: 16px; background: #fff; box-shadow: 0 1px 2px rgba(7, 37, 59, 0.06); }
.users-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 16px 20px; border-bottom: 1px solid rgba(7, 37, 59, 0.05); }
.users-card__title { margin: 0; font-family: var(--font-heading); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--color-navy-700); }
.users-card__tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.users-add { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 12px; border: 0; border-radius: 8px; background: #eff6ff; color: #2563eb; font-family: var(--font-heading); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; transition: background-color 0.15s ease; }
.users-add:hover { background: #dbeafe; }
.users-add:focus-visible, .users-btn:focus-visible, .users-icon-btn:focus-visible, .users-tab:focus-visible, .users-sites__row:focus-visible, .users-draft:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }

/* inputs, the website's: 8px corners, a hairline, blue on focus */
.users-input { width: 100%; min-height: 40px; padding: 8px 12px; border: 1px solid rgba(7, 37, 59, 0.1); border-radius: 8px; background: #fff; color: var(--color-navy-900); font: inherit; font-size: 1rem; }   /* 16px: a phone does not zoom in */
.users-input:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15); }
.users-search { position: relative; }
.users-search__icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--color-navy-400, #8394a3); pointer-events: none; }
.users-input--search { padding-left: 34px; min-width: 14rem; }
.users-filter { width: auto; min-width: 9rem; cursor: pointer; text-transform: capitalize; }
.users-role-select { font-family: var(--font-heading); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; cursor: pointer; }
.users-bulk { min-height: 9rem; resize: vertical; font-family: ui-monospace, Menlo, monospace; font-size: 1rem; line-height: 1.5; }

/* the table: User · Email · Role · Site · remove */
.users-thead, .users-tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) 150px 190px 40px; gap: 12px; align-items: center; padding: 0 20px; }
.users-thead { padding-top: 10px; padding-bottom: 10px; background: #f8fafc; border-bottom: 1px solid rgba(7, 37, 59, 0.05); }
.users-thead span { font-family: var(--font-heading); font-size: 0.625rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-navy-500, #6b7f8f); }
.users-tr { padding-top: 14px; padding-bottom: 14px; border-bottom: 1px solid rgba(7, 37, 59, 0.05); cursor: pointer; transition: background-color 0.15s ease; }
.users-tr:last-child { border-bottom: 0; }
.users-tr:hover, .users-tr:focus { background: rgba(248, 250, 252, 0.9); outline: none; }
.users-tr:focus-visible { box-shadow: inset 3px 0 0 #2563eb; }
.users-who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.users-avatar { display: inline-flex; flex: none; align-items: center; justify-content: center; border-radius: 999px; color: #fff; font-family: var(--font-heading); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.02em; }
.users-name { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.875rem; font-weight: 500; color: var(--color-navy-800, #12324a); }
.users-email-sm { display: none; margin: 0; font-size: 0.6875rem; color: var(--color-navy-500, #6b7f8f); }
.users-email { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.875rem; color: var(--color-navy-600, #4a6276); }
.users-site { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.75rem; color: var(--color-navy-600, #4a6276); }
.users-site.is-all { font-family: var(--font-heading); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-navy-500, #6b7f8f); }
.users-tr__end { display: flex; justify-content: flex-end; }
.users-you { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: #eff6ff; color: #3b82f6; font-family: var(--font-heading); font-size: 0.5625rem; letter-spacing: 0.12em; text-transform: uppercase; vertical-align: 1px; }
.users-empty { margin: 0; padding: 24px 20px; font-size: var(--type-secondary); color: var(--color-navy-500, #6b7f8f); }

/* RoleBadge */
.role-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-family: var(--font-heading); font-size: 0.625rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.role-badge--md { gap: 6px; padding: 6px 12px; font-size: 0.6875rem; letter-spacing: 0.1em; }

/* buttons */
.users-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: var(--color-navy-400, #8394a3); cursor: pointer; transition: color 0.15s ease, background-color 0.15s ease; }
.users-icon-btn:hover { color: var(--color-navy-700); background: #f8fafc; }
.users-icon-btn--danger:hover { color: #ef4444; background: #fef2f2; }
.users-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 8px 16px; border: 0; border-radius: 8px; font-family: var(--font-heading); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; transition: background-color 0.15s ease; }
.users-btn[hidden] { display: none; }
.users-btn:disabled { cursor: not-allowed; color: #cbd5e1; background: #f1f5f9; }
.users-btn--primary { background: var(--color-navy-900); color: #fff; }
.users-btn--primary:hover:not(:disabled) { background: var(--color-navy-800, #12324a); }
.users-btn--quiet { background: #f1f5f9; color: var(--color-navy-600, #4a6276); }
.users-btn--quiet:hover { background: #e2e8f0; }
.users-btn--danger { background: #ef4444; color: #fff; }
.users-btn--danger:hover { background: #dc2626; }
.users-btn--text-danger { padding: 8px 12px; background: transparent; color: #ef4444; font-size: 0.6875rem; }
.users-btn--text-danger:hover { background: #fef2f2; }
.users-btn--wide { width: 100%; }

/* the modals: centered, 16px corners, a header, a body that scrolls, a footer on a faint wash */
.users-scrim { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, 0.3); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.users-scrim--side { background: rgba(0, 0, 0, 0.2); backdrop-filter: none; -webkit-backdrop-filter: none; z-index: 62; }
.users-modal { position: fixed; z-index: 61; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; width: min(var(--modal-w, 78vw), calc(100vw - 2rem)); max-height: calc(100dvh - 3rem); border: 1px solid rgba(7, 37, 59, 0.1); border-radius: 16px; background: #fff; box-shadow: 0 25px 50px -12px rgba(7, 37, 59, 0.35); outline: none; }
.users-modal--side { top: 0; right: 0; left: auto; bottom: 0; z-index: 63; transform: none; width: min(440px, 100vw); max-height: none; border-radius: 0; border-width: 0 0 0 1px; }
.users-modal--alert { padding: 24px; }
.users-modal__head { display: flex; align-items: flex-start; gap: 16px; padding: 20px 24px; border-bottom: 1px solid rgba(7, 37, 59, 0.05); }
.users-modal__title { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-heading); font-size: 1rem; font-weight: 700; color: var(--color-navy-900); }
.users-modal__email { margin: 2px 0 0; font-size: 0.75rem; color: var(--color-navy-500, #6b7f8f); }
.users-modal__meta { margin: 4px 0 0; font-family: var(--font-heading); font-size: 0.625rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-navy-400, #8394a3); }
.users-modal__body { flex: 1; min-height: 0; overflow-y: auto; padding: 20px 24px; }
.users-modal--alert .users-modal__body { display: none; }
.users-modal__foot { padding: 16px 24px; border-top: 1px solid rgba(7, 37, 59, 0.05); border-radius: 0 0 16px 16px; background: rgba(248, 250, 252, 0.5); }
.users-modal--alert .users-modal__foot { padding: 0; border: 0; background: none; }
.users-foot-split { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.users-foot-end { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.users-stack > * + * { margin-top: 24px; }
.users-stack > [hidden] { display: none; }
.users-kicker { display: block; margin: 0 0 8px; font-family: var(--font-heading); font-size: 0.625rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--color-navy-500, #6b7f8f); }
.users-grid2 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr); gap: 12px; }
.users-note { margin: 8px 0 0; font-family: var(--font-heading); font-size: 0.625rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-navy-400, #8394a3); }
.users-note.is-due { color: #d97706; }

/* ConfirmDialog */
.users-confirm { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.users-confirm__icon { display: flex; flex: none; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: #fef2f2; color: #ef4444; }
.users-confirm__title { margin: 0; font-family: var(--font-heading); font-size: 0.875rem; font-weight: 700; letter-spacing: 0.05em; color: var(--color-navy-900); }
.users-confirm__msg { margin: 4px 0 0; font-size: 0.875rem; line-height: 1.5; color: var(--color-navy-500, #6b7f8f); }

/* the site picker: one school (the website's checkbox list, as a single choice) */
.users-sites__all { padding: 12px 16px; border: 1px solid rgba(7, 37, 59, 0.05); border-radius: 8px; background: #f8fafc; font-size: 0.75rem; color: var(--color-navy-500, #6b7f8f); }
.users-sites__allword { font-family: var(--font-heading); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-navy-700); }
.users-sites .users-search { margin-bottom: 8px; }
.users-sites__list { max-height: 16rem; overflow-y: auto; border: 1px solid rgba(7, 37, 59, 0.1); border-radius: 8px; background: #fff; }
.users-sites__row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 16px; border: 0; border-bottom: 1px solid rgba(7, 37, 59, 0.05); background: none; text-align: left; font: inherit; font-size: 0.875rem; color: var(--color-navy-700); cursor: pointer; }
.users-sites__row:last-child { border-bottom: 0; }
.users-sites__row:hover:not(:disabled) { background: #f8fafc; }
.users-sites__row:disabled { cursor: default; opacity: 0.7; }
.users-sites__dot { display: flex; flex: none; align-items: center; justify-content: center; width: 16px; height: 16px; border: 1px solid rgba(7, 37, 59, 0.2); border-radius: 999px; background: #fff; }
.users-sites__row[aria-checked="true"] .users-sites__dot { border-color: #3b82f6; background: #3b82f6; }
.users-sites__dot span { width: 6px; height: 6px; border-radius: 999px; background: #fff; }
.users-sites__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.users-sites__none { margin: 0; padding: 24px 16px; text-align: center; font-size: 0.75rem; color: var(--color-navy-400, #8394a3); }

/* Add user: Single | Bulk paste, and the paste's preview */
.users-tabs { display: flex; gap: 4px; }
.users-tab { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 6px 12px; border: 1px solid rgba(7, 37, 59, 0.1); border-radius: 8px; background: #fff; color: var(--color-navy-500, #6b7f8f); font-family: var(--font-heading); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; }
.users-tab.is-on { border-color: var(--color-navy-900); background: var(--color-navy-900); color: #fff; }
.users-preview:empty { display: none; }
.users-preview { overflow: hidden; border: 1px solid rgba(7, 37, 59, 0.08); border-radius: 8px; background: #fff; }
.users-preview__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 8px 12px; border-bottom: 1px solid rgba(7, 37, 59, 0.05); background: #f8fafc; }
.users-preview__counts { font-family: var(--font-heading); font-size: 0.625rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-navy-500, #6b7f8f); }
.users-preview__counts .is-due { color: #d97706; } .users-preview__counts .is-quiet { color: var(--color-navy-400, #8394a3); } .users-preview__counts .is-bad { color: #ef4444; }
.users-preview__hint { font-size: 0.625rem; color: var(--color-navy-400, #8394a3); }
.users-preview__rows { max-height: 16rem; overflow-y: auto; }
.users-draft { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 12px; border: 0; border-bottom: 1px solid rgba(7, 37, 59, 0.05); background: none; text-align: left; font: inherit; font-size: 0.75rem; color: var(--color-navy-700); cursor: pointer; }
.users-draft:hover:not(:disabled) { background: #f8fafc; }
.users-draft:disabled { cursor: not-allowed; }
.users-draft.is-bad { background: #fef2f2; } .users-draft.is-quiet { background: #f8fafc; } .users-draft.is-due { background: rgba(255, 251, 235, 0.6); }
.users-draft__mark { width: 16px; text-align: center; font-weight: 600; }
.users-draft.is-ok .users-draft__mark { color: #10b981; } .users-draft.is-due .users-draft__mark { color: #f59e0b; } .users-draft.is-bad .users-draft__mark { color: #f87171; } .users-draft.is-quiet .users-draft__mark { color: #cbd5e1; }
.users-draft__email { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.users-draft__why { font-size: 0.625rem; color: var(--color-navy-500, #6b7f8f); }
.users-draft.is-bad .users-draft__why { color: #ef4444; }
.users-draft__site { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.6875rem; color: var(--color-navy-600, #4a6276); }
.users-draft.is-due .users-draft__site { color: #d97706; font-style: italic; }

/* the preview's note: a short line at the foot of the screen */
.users-toast { pointer-events: none; position: fixed; left: 50%; bottom: calc(88px + env(safe-area-inset-bottom)); z-index: 80; transform: translateX(-50%); max-width: calc(100vw - 2rem); padding: 10px 16px; border-radius: 10px; background: var(--color-navy-900); color: #fff; font-size: 0.875rem; box-shadow: 0 12px 30px -10px rgba(7, 37, 59, 0.5); }
@media (min-width: 768px) { .users-toast { bottom: 24px; } }

/* a phone: as the website's rows stack, the name and the email take the whole first line and wrap, never cut; the role
   badge and the site share the second line */
@media (max-width: 639px) {
  .users-thead { display: none; }
  .users-tr { grid-template-columns: auto minmax(0, 1fr) 32px; grid-template-areas: "who who end" "badge site site"; row-gap: 8px; column-gap: 10px; padding: 12px 16px; }
  .users-tr > .users-who { grid-area: who; align-items: flex-start; } .users-tr > .users-email { display: none; } .users-tr > :nth-child(3) { grid-area: badge; padding-left: 44px; }
  .users-tr > .users-site { grid-area: site; align-self: center; } .users-tr > .users-tr__end { grid-area: end; align-self: start; }
  .users-name { white-space: normal; overflow: visible; overflow-wrap: anywhere; }
  .users-email-sm { display: block; overflow-wrap: anywhere; }
  .users-card__head { padding: 14px 16px; }
  .users-card__tools { width: 100%; }
  .users-card__tools .users-search { flex: 1 1 100%; }
  .users-input--search { min-width: 0; }
  .users-filter { flex: 1; }
  .users-grid2 { grid-template-columns: minmax(0, 1fr); }
  .users-modal { max-height: calc(100dvh - 2rem); }
  .users-modal__head, .users-modal__body, .users-modal__foot { padding-left: 16px; padding-right: 16px; }
  /* the paste preview: the address on its own line, then the role and the school, both shown */
  .users-draft { flex-wrap: wrap; row-gap: 4px; }
  .users-draft__email { flex: 1 1 calc(100% - 28px); white-space: normal; overflow-wrap: anywhere; }
  .users-draft .role-badge { margin-left: 28px; }
  .users-draft__site { flex: 1; max-width: none; }
}