/* COMPONENTS — BEM blocks. Built up across the screen tasks. */

/* navbar */
.navbar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}
.navbar__start { display: flex; align-items: center; }
.navbar__title { padding-inline: var(--space-2); }
.navbar__end {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}
.navbar__user {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding-inline: var(--space-2);
  line-height: 1.2;
}
.navbar__user-name {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: .875rem;
  font-weight: 500;
}
.navbar__user-email { font-size: .75rem; color: var(--color-text-muted); }

/* button */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, filter .15s ease;
}
.button:hover { border-color: var(--color-border); }
.button--primary { background: var(--color-primary); color: var(--color-primary-text); }
.button--primary:hover { filter: brightness(1.05); border-color: transparent; }
.button--ghost { background: transparent; }
.button--ghost:hover { background: var(--color-surface); }
.button--sm { padding: var(--space-1) var(--space-3); font-size: .875rem; }

/* alert */
.alert {
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
}
.alert--info { background: var(--color-info-bg); color: var(--color-info-text); }

/* table */
.table { font-size: .95rem; }
.table tbody tr:nth-child(even) { background: var(--color-zebra); }
.table tbody tr.table__row--clickable { cursor: pointer; }
.table tbody tr.table__row--clickable:hover { background: var(--color-surface); }
.table__empty {
  padding-block: var(--space-6);
  text-align: center;
  color: var(--color-text-muted);
}

/* badge */
.badge {
  display: inline-flex;
  align-items: center;
  padding: .125rem var(--space-2);
  border-radius: var(--radius-pill);
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.4;
}
.badge--danger { background: var(--color-danger); color: #fff; }
.badge--ghost {
  background: var(--color-surface);
  color: var(--color-text-muted);
  margin-left: var(--space-1);
}

/* card */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-4);
}
.card__body {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.card__title { font-size: 1rem; font-weight: 600; }

/* spinner */
.spinner {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: var(--radius-pill);
  animation: spin .6s linear infinite;
}

/* hero — full-height centred panel for the auth (splash / login) screens */
.hero {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--space-4);
  background: var(--color-surface);
}
.hero__content { max-width: 28rem; text-align: center; }
.hero__title { font-size: 1.875rem; font-weight: 700; }
.hero__text { margin-block: var(--space-6); color: var(--color-text-muted); }

/* form fields */
.field-label { font-size: .875rem; font-weight: 500; }
.field-control {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
  color: var(--color-text);
  font: inherit;
}
.field-control:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}