/* =========================
   BUTTONS
   ========================= */
.primary {
  height: var(--height-control);
  width: 100%;

  border-radius: var(--radius-md);
  border: none;

  background: var(--color-cta-primary);
  color: #ffffff;

  font-size: var(--font-size-button);
  font-weight: 600;
  font-family: var(--font-primary);

  cursor: pointer;

  box-shadow: 0 4px 10px rgba(66,133,244,0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.secondary {
  background: none;
  border: none;
  font-size: var(--font-size-body);
  color: var(--color-text-secondary);
  font-family: var(--font-primary);
  cursor: pointer;
}

/* =========================
   FORMS / INPUTS
   ========================= */
.form {
  margin-top: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.input {
  height: var(--height-control);
  padding: 0 16px;
  font-size: var(--font-size-input);
  font-family: var(--font-primary);
  color: var(--color-text-primary);

  background: #fafafa;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-light);

  transition: border-color 0.2s ease,
              box-shadow 0.2s ease,
              background 0.2s ease;
}

.input::placeholder {
  color: #888;
}

.input:focus {
  outline: none;
  background: #ffffff;
  border-color: var(--color-cta-primary);
  box-shadow: 0 0 0 3px rgba(66,133,244,0.15);
}

input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset;
}

.nav-btn {
  background: none;
  border: none;

  font-size: 14px;
  font-weight: 500;
  font-family: var(--font-primary);

  color: var(--color-text-secondary);

  height: 44px;
  min-width: 44px;

  padding: 0 10px;

  display: flex;
  align-items: center;
  gap: 4px;

  cursor: pointer;
}

.nav-icon {
  font-size: 16px;
  line-height: 1;
}
.nav-btn:first-child {
  justify-self: start;
}

.nav-btn:last-child {
  justify-self: end;
}

.nav-logout {
  justify-self: end;
}