/* ---- team.css: what this app adds to the website's tokens and components ----
   The sign-in page (one card, the same wireframe at every width: the website's responsive.css rule that
   flattens .sign-in under 768px is deliberately not copied here), the app bar, and the plain tables of the
   first screens. Everything else comes from variables.css / base.css / layout.css / components.css. */

/* The sign-in page: the card alone, centred in the viewport, the page gutter the only thing that changes
   on a phone */
.body--bare {
  margin: 0;
  background-color: var(--md-surface);
}

.team-signin {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--md-spacing-6) var(--md-spacing-4);
  box-sizing: border-box;
}

.team-signin .sign-in {
  width: 100%;
}

.sign-in__error {
  margin: var(--md-spacing-4) 0 0;
  text-align: center;
  color: var(--md-error);
  font-size: var(--md-body-small-size);
  line-height: var(--md-body-small-line);
}

.sign-in__notice {
  margin: var(--md-spacing-4) 0 0;
  text-align: center;
  color: var(--md-primary);
  font-size: var(--md-body-small-size);
  line-height: var(--md-body-small-line);
}

/* The app bar: brand, the pages, who is signed in, Sign out */
.team-bar {
  display: flex;
  align-items: center;
  gap: var(--md-spacing-4);
  padding: var(--md-spacing-3) var(--md-spacing-4);
  border-bottom: var(--md-divider-thickness) solid var(--md-outline-variant);
  background-color: var(--md-surface);
  flex-wrap: wrap;
}

.team-bar__brand {
  font-weight: 700;
  text-decoration: none;
  color: var(--md-on-surface);
}

.team-bar__nav {
  display: flex;
  gap: var(--md-spacing-2);
  flex: 1;
  flex-wrap: wrap;
}

.team-bar__link {
  padding: var(--md-spacing-1) var(--md-spacing-3);
  border-radius: var(--md-button-radius, 999px);
  text-decoration: none;
  color: var(--md-on-surface-variant);
  font-size: var(--md-body-medium-size);
}

.team-bar__link.is-active {
  background-color: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
}

.team-bar__out {
  display: flex;
  align-items: center;
  gap: var(--md-spacing-2);
  margin: 0;
}

.team-bar__who {
  color: var(--md-on-surface-variant);
  font-size: var(--md-body-small-size);
}

.team-main {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--md-spacing-6) var(--md-spacing-4);
  box-sizing: border-box;
}

/* The dashboard's tiles */
.team-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--md-spacing-3);
}

.team-tile {
  padding: var(--md-spacing-4);
  border: var(--md-divider-thickness) solid var(--md-outline-variant);
  border-radius: var(--md-card-radius, 12px);
  background-color: var(--md-surface);
}

.team-tile__n {
  font-size: var(--md-headline-medium-size, 28px);
  line-height: 1.1;
  font-weight: 600;
}

.team-tile__l {
  margin-top: var(--md-spacing-1);
  color: var(--md-on-surface-variant);
  font-size: var(--md-body-small-size);
}

/* The one-line forms behind the table buttons */
.team-inline {
  display: inline-flex;
  gap: var(--md-spacing-1);
  align-items: center;
  margin: 0;
  white-space: nowrap;
}

.team-inline .btn--text {
  padding-left: var(--md-spacing-2);
  padding-right: var(--md-spacing-2);
  font-size: var(--md-body-small-size);
}

/* Plain tables for the first screens */
.team-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--md-body-medium-size);
}

.team-table th,
.team-table td {
  text-align: left;
  padding: var(--md-spacing-2) var(--md-spacing-3);
  border-bottom: var(--md-divider-thickness) solid var(--md-outline-variant);
  vertical-align: top;
}

.team-table th {
  color: var(--md-on-surface-variant);
  font-weight: 600;
}

.team-status {
  display: grid;
  gap: var(--md-spacing-2);
  margin: 0;
}

.team-status dt {
  color: var(--md-on-surface-variant);
  font-size: var(--md-body-small-size);
}

.team-status dd {
  margin: 0 0 var(--md-spacing-2);
}