/* Accounts: logged-out pages (login, password reset, invitation), profile, admin pages. Tokens only. */

/* ------------------------------------------------------------- shared form bits */
.field-help ul { margin: var(--space-1) 0 0; padding-left: var(--space-5); }
.field-help li + li { margin-top: 2px; }
.field-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.form-footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); }

/* ------------------------------------------------------------- logged-out pages */
.auth-content .page-header {
  flex-direction: column;
  align-items: center;
  margin-bottom: var(--space-6);
  text-align: center;
}
.auth-content .page-title { font-size: var(--text-2xl); letter-spacing: -0.02em; }
.auth-content .page-subtitle { max-width: 44ch; }
.auth-wrap { width: 100%; max-width: calc(var(--space-24) * 4 + var(--space-6)); margin: 0 auto; } /* 408 px */
.auth-card { border-top: 3px solid var(--color-accent); box-shadow: var(--shadow-sm); }
.auth-card .card-body { padding: var(--space-6); }
.auth-form .field { margin-bottom: var(--space-4); }
.auth-form .btn-block { margin-top: var(--space-2); }
.auth-error { margin-bottom: var(--space-4); }
.auth-link { text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); text-underline-offset: 2px; }
.auth-link:hover { text-decoration-color: currentColor; }
.auth-card-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  text-align: center;
}
.auth-card-footer a { display: inline-flex; align-items: center; gap: var(--space-1); }
.auth-message { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); text-align: center; }
.auth-message p { margin: 0; color: var(--color-text-muted); }
.auth-message .btn { margin-top: var(--space-2); }
.auth-message-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-12);
  height: var(--space-12);
  border-radius: var(--radius-full);
  background: var(--color-accent-subtle);
  color: var(--color-accent-text);
}
.auth-message-icon.is-success { background: var(--color-success-subtle); color: var(--color-success-text); }
.auth-message-icon.is-danger { background: var(--color-danger-subtle); color: var(--color-danger-text); }
.auth-tagline { margin: var(--space-6) 0 0; color: var(--color-text-muted); font-size: var(--text-xs); text-align: center; }

.invite-summary {
  display: grid;
  gap: var(--space-2);
  margin: 0 0 var(--space-5);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-bg-subtle);
}
.invite-summary > div { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-width: 0; }
.invite-summary dt { color: var(--color-text-muted); font-size: var(--text-xs); font-weight: var(--weight-medium); }
.invite-summary dd { min-width: 0; margin: 0; }

/* ------------------------------------------------------------- profile */
.profile-layout { display: grid; gap: var(--space-6); align-items: start; }
.profile-main { display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; }
@media (min-width: 1024px) {
  .profile-layout { grid-template-columns: calc(var(--space-20) * 3 + var(--space-10)) minmax(0, 1fr); }
  .profile-summary { position: sticky; top: calc(var(--topbar-height) + var(--space-6)); }
}
.profile-identity { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-5); }
.profile-identity-text { min-width: 0; }
.profile-identity-text p { margin: 0; }
.profile-name { overflow-wrap: anywhere; font-size: var(--text-lg); font-weight: var(--weight-semibold); }
.profile-discipline { display: flex; align-items: center; gap: var(--space-1); margin-top: var(--space-1) !important; color: var(--color-text-muted); font-size: var(--text-sm); }
.profile-section-title {
  margin: var(--space-5) 0 var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.profile-teams { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.profile-teams li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.profile-links { display: flex; flex-direction: column; gap: var(--space-1); margin: 0 calc(-1 * var(--space-2)); padding: 0; list-style: none; }
.profile-link {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-2);
  border-radius: var(--radius-md);
  color: var(--color-text);
}
.profile-link:hover { background: var(--color-hover); text-decoration: none; }
.profile-link > svg:first-child,
.profile-link > i:first-child { margin-top: 2px; color: var(--color-text-muted); }
.profile-link > span { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.profile-link-title { font-weight: var(--weight-medium); text-decoration: underline; text-decoration-color: transparent; }
.profile-link:hover .profile-link-title { text-decoration-color: currentColor; }
.profile-link-text { color: var(--color-text-muted); font-size: var(--text-xs); }
.profile-link-chevron { margin-top: var(--space-1); color: var(--color-text-muted); }

.profile-avatar .avatar-xl,
.avatar-preview .avatar-xl { width: calc(var(--space-16) + var(--space-2)); height: calc(var(--space-16) + var(--space-2)); font-size: var(--text-xl); }
.avatar-field { display: flex; align-items: center; gap: var(--space-5); margin-bottom: var(--space-5); }
.avatar-controls { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.avatar-controls .field-label { margin: 0; }
.avatar-controls .field-help,
.avatar-controls .field-error { margin: 0; }
.avatar-preview { flex: none; border-radius: var(--radius-full); }
.avatar-preview.is-new { box-shadow: 0 0 0 3px var(--color-accent-subtle), 0 0 0 4px var(--color-accent); }
.avatar-input:focus-visible + .avatar-pick { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); }
.avatar-field.has-error .avatar-pick { border-color: var(--color-danger); }

.theme-options { display: grid; gap: var(--space-3); min-width: 0; margin: 0; padding: 0; border: 0; }
@media (min-width: 640px) {
  .theme-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.theme-option {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  cursor: pointer;
}
.theme-option:hover { border-color: var(--color-border-strong); }
.theme-option:has(input:checked) { border-color: var(--color-accent); box-shadow: 0 0 0 1px var(--color-accent); }
.theme-option:has(input:focus-visible) { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); }
.theme-option input { position: absolute; top: var(--space-3); right: var(--space-3); }
.theme-preview {
  display: flex;
  height: var(--space-16);
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.theme-preview-full,
.theme-preview-half {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2);
  background: var(--color-bg);
}
.theme-preview-bar { width: 60%; height: var(--space-2); border-radius: var(--radius-sm); background: var(--color-accent); }
.theme-preview-line { width: 90%; height: var(--space-1); border-radius: var(--radius-sm); background: var(--color-bg-muted); }
.theme-preview-line.is-short { width: 50%; }
.theme-option-text { display: flex; flex-direction: column; gap: 2px; }
.theme-option-label { display: inline-flex; align-items: center; gap: var(--space-1); font-weight: var(--weight-medium); }
.theme-option-help { color: var(--color-text-muted); font-size: var(--text-xs); }

/* ------------------------------------------------------------- admin */
.page-tabs .tabs { margin-top: var(--space-1); }
.manage-panel:focus { outline: none; }
.manage-panel:focus-visible { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); }
.manage-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-4);
}
.manage-toolbar p { margin: 0; }
.team-grid { display: grid; gap: var(--space-4); }
@media (min-width: 1280px) {
  .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
.team-card { min-width: 0; overflow: hidden; }
.team-card-header { display: flex; align-items: center; gap: var(--space-3); }
.team-card-heading { flex: 1; min-width: 0; }
.team-swatch { flex: none; width: var(--space-3); height: var(--space-3); border-radius: var(--radius-sm); background: var(--team-color, var(--color-text-muted)); }
.team-table { border: 0; border-radius: 0; }
.team-table .table th:first-child,
.team-table .table td:first-child { padding-left: var(--space-5); }
.person-cell { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.person-cell-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.role-form { display: flex; align-items: center; gap: var(--space-2); margin: 0; }
.role-form .select { width: auto; min-width: 8.5rem; }
.role-own { display: inline-flex; align-items: center; gap: var(--space-2); }
.cell-actions { width: 1%; text-align: right; white-space: nowrap; }
/* containing block for visually hidden labels in cells, so they stay inside the scrolling table */
.cell-sub { display: block; }
.cell-link { color: var(--color-text); text-decoration: underline; text-decoration-color: var(--color-border-strong); text-underline-offset: 2px; }
.cell-link:hover { color: var(--color-accent-text); text-decoration-color: currentColor; }
.invite-link { display: flex; align-items: center; gap: var(--space-2); min-width: 16rem; }
.invite-link .input { min-width: 0; font-family: var(--font-mono); font-size: var(--text-xs); }

.team-preview { display: flex; align-items: center; gap: var(--space-3); }

@media (max-width: 899.98px) {
  .avatar-field { align-items: flex-start; }
  .auth-card .card-body { padding: var(--space-5); }
}

/* Dialog forms keep their buttons inside the <form>; the footer still sticks to the dialog's bottom edge
   (ui.css does this for a footer that is a direct child of .modal-body). */
.modal-body > form:last-child > .modal-footer:last-child {
  position: sticky;
  bottom: calc(-1 * var(--space-5));
  margin: var(--space-5) calc(-1 * var(--space-5)) calc(-1 * var(--space-5));
}

/* Phones: team member rows stack (person on top, role select + actions below) instead of overflowing the card. */
@media (max-width: 599.98px) {
  .team-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .team-table tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-2) var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); }
  .team-table tbody tr:last-child { border-bottom: 0; }
  .team-table tbody td { display: block; padding: 0; border: 0; }
  .team-table tbody td:first-child { grid-column: 1 / -1; overflow-wrap: anywhere; }
  .team-table select { width: 100%; }
}

/* ------------------------------------------------------------- V4: preferences (profile page) */
.pref-group { margin: 0; padding: 0; border: 0; min-width: 0; }
.pref-legend { margin-bottom: var(--space-2); padding: 0; font-weight: var(--weight-semibold); }
.pref-choices { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pref-choice {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  cursor: pointer;
  transition: border-color var(--motion-quick) var(--ease-out-soft), background-color var(--motion-quick) var(--ease-out-soft);
}
.pref-choice:hover { background: var(--color-hover); }
.pref-choice:has(input:checked) { border-color: var(--color-accent); background: var(--color-accent-subtle); }
.pref-choice:has(input:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.pref-group .field-help { margin-top: var(--space-2); }

/* ------------------------------------------------------------- V4: people directory */
.people-filter { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-5); }
.people-filter .field { margin: 0; }
.people-search { flex: 1 1 18rem; }
.people-team { flex: 0 1 14rem; }
.people-count { margin: 0 0 var(--space-3); }
.people-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.people-grid > li { display: flex; min-width: 0; }
.person-card {
  display: flex;
  flex: 1;
  align-items: flex-start;
  gap: var(--space-4);
  min-width: 0;
  padding: var(--space-4);
  color: var(--color-text);
  text-decoration: none;
}
.person-card-avatar, .person-avatar { position: relative; display: inline-flex; flex: none; }
.person-card-avatar .avatar { --avatar-size: var(--space-12); }  /* 48 px */
.person-card-text { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.person-card-name { overflow-wrap: anywhere; font-weight: var(--weight-semibold); }
.person-card-discipline { color: var(--color-text-muted); font-size: var(--text-sm); }
.person-card-status { font-size: var(--text-xs); color: var(--color-text-muted); }
.person-card-status.is-absent { color: var(--color-warning-text); }
.person-card-status.is-online { color: var(--color-success-text); }
.person-card-teams { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-1); }

/* status dot on the avatar (text is always next to it) */
.status-dot {
  position: absolute;
  right: 0;
  bottom: 0;
  width: var(--space-3);
  height: var(--space-3);
  border: 2px solid var(--color-surface);
  border-radius: var(--radius-full);
  background: var(--color-text-muted);
}
.status-dot.is-online { background: var(--color-success); }
.status-dot.is-focus { background: var(--color-accent); }
.status-dot.is-absent { background: var(--color-warning); }
.person-avatar .status-dot { width: var(--space-5); height: var(--space-5); border-width: 3px; }

/* ------------------------------------------------------------- V4: profile page of a person */
.person-header { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); }
.person-avatar .avatar { --avatar-size: calc(var(--space-12) * 2); font-size: var(--text-2xl); }  /* 96 px */
.person-head-text { display: flex; flex: 1; flex-direction: column; gap: var(--space-2); min-width: 0; }
.person-head-text .page-title { margin: 0; overflow-wrap: anywhere; }
.person-discipline { display: flex; align-items: center; gap: var(--space-1); margin: 0; color: var(--color-text-muted); }
.person-teams { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: 0; padding: 0; list-style: none; }
.person-teams li { display: inline-flex; align-items: center; gap: var(--space-2); }
.person-layout { display: grid; gap: var(--space-6); align-items: start; }
@media (min-width: 900px) { .person-layout { grid-template-columns: calc(var(--space-20) * 3 + var(--space-10)) minmax(0, 1fr); } }
.person-side p { margin: 0; }
.person-status {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-bg-subtle);
  font-weight: var(--weight-medium);
}
.person-status.is-absent { background: var(--color-warning-subtle); color: var(--color-warning-text); }
.person-status.is-focus { background: var(--color-accent-subtle); color: var(--color-accent-text); }
.person-status.is-online { background: var(--color-success-subtle); color: var(--color-success-text); }
.person-section-title { margin: 0 0 var(--space-2); color: var(--color-text-muted); font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.04em; }
.person-section-heading { margin: 0 0 var(--space-3); font-size: var(--text-md); font-weight: var(--weight-semibold); }
.person-mail { display: inline-flex; align-items: center; gap: var(--space-2); overflow-wrap: anywhere; }
.person-kudos { display: flex; align-items: center; gap: var(--space-2); }
.person-tasks { margin: 0; padding: 0; list-style: none; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.person-task { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-1) var(--space-3); padding: var(--space-3) var(--space-4); }
.person-task + .person-task { border-top: 1px solid var(--color-border); }
.person-task-link { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; color: var(--color-text); }
.person-task-link:hover .person-task-title { color: var(--color-accent-text); text-decoration: underline; }
.person-task-meta { display: inline-flex; gap: var(--space-3); }

/* {% person_link %} */
.person-link { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; color: inherit; text-decoration: none; }
.person-link:hover .person-link-name { text-decoration: underline; }
.person-link-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ------------------------------------------------------------- V4: availability */
.availability-layout { display: flex; flex-direction: column; gap: var(--space-6); }
.availability-list { margin: 0; padding: 0; list-style: none; }
.availability-item { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) 0; transition: opacity var(--motion-quick) var(--ease-out-soft); }
.availability-item + .availability-item { border-top: 1px solid var(--color-border); }
.availability-item.is-past { color: var(--color-text-muted); }
.availability-item.is-removing { opacity: 0.4; }
.availability-item-text { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); min-width: 0; }
.availability-note { display: inline-flex; align-items: center; gap: var(--space-1); overflow-wrap: anywhere; }

/* V4 Phase 3: touch targets of at least 40 px on phones (icon buttons in lists and tables, preference choices) */
@media (max-width: 599.98px) {
  .availability-item .btn-icon,
  .cell-actions .btn-icon,
  .cell-actions .dropdown > .btn,
  .invite-link .btn-icon {
    min-width: var(--control-h-lg);
    min-height: var(--control-h-lg);
  }
  .pref-choice,
  .profile-link { min-height: var(--control-h-lg); }
}

/* Live search: the old grid dims while the new one loads (no spinner; the swap is quick) */
.people-filter.htmx-request + .people-grid-wrap { opacity: 0.6; transition: opacity var(--motion-quick) var(--ease-out-soft); }